:root{--navy:#111c2f;--green:#168a57;--bg:#f3f5f7;--line:#e3e8ed;--text:#253044;--muted:#748093}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR","Malgun Gothic",Arial,sans-serif;color:var(--text);background:var(--bg)}button,input{font:inherit}.topbar{height:72px;position:fixed;inset:0 0 auto;z-index:30;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 24px;box-shadow:0 4px 18px #0d172733}.menu-button{width:42px;height:42px;border:0;background:#ffffff12;color:#fff;border-radius:10px;font-size:25px;cursor:pointer}.brand{display:flex;align-items:center;gap:10px;margin-left:15px}.brand img,.drawer-head img{width:48px;height:48px;border-radius:50%;object-fit:contain;background:#fff}.brand div,.drawer-head div{display:flex;flex-direction:column}.brand b{letter-spacing:2px}.brand small,.drawer-head small{font-size:10px;color:#b9c2ce}.top-title{margin-left:auto;font-weight:700;color:#d6dde7}.drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:300px;background:#fff;transform:translateX(-102%);transition:.28s;box-shadow:8px 0 30px #0003}.drawer.open{transform:none}.drawer-dim{position:fixed;z-index:45;inset:0;background:#07101db3;opacity:0;visibility:hidden;transition:.25s}.drawer-dim.open{opacity:1;visibility:visible}.drawer-head{height:115px;background:var(--navy);padding:20px;display:flex;align-items:center;color:#fff;gap:12px}.drawer-head img{width:56px;height:56px}.drawer-head button{margin-left:auto;align-self:flex-start;background:none;border:0;color:#fff;font-size:28px}.drawer nav{padding:16px}.drawer nav a{display:flex;gap:13px;text-decoration:none;color:#465267;padding:15px 16px;border-radius:11px;margin:4px 0;font-weight:700}.drawer nav a:hover,.drawer nav a.active{background:#eaf7f0;color:var(--green)}.drawer-note{font-size:11px;color:#98a0ac;line-height:1.6;padding:0 28px}.page{max-width:1040px;margin:auto;padding:104px 20px 60px}.hero{background:linear-gradient(135deg,#122039,#0f6947);border-radius:22px;color:#fff;padding:36px 42px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 30px #1d304524}.eyebrow{font-size:11px;letter-spacing:2px;color:#91dfb9;font-weight:800}.hero h1{font-size:32px;margin:8px 0}.hero p:last-child{color:#d3e2dc;margin-bottom:0}.hero-icon{font-size:70px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;margin-top:20px;padding:26px 30px;box-shadow:0 5px 18px #2734490a}.section-title{display:flex;align-items:center;gap:13px}.section-title>span{background:var(--green);color:#fff;border-radius:50%;min-width:34px;height:34px;display:grid;place-items:center;font-weight:800}.section-title h2{font-size:19px;margin:0}.section-title p{font-size:12px;color:var(--muted);margin:5px 0 0}.push{margin-left:auto}.outline,.primary{border-radius:9px;padding:11px 18px;cursor:pointer;font-weight:700}.outline{color:var(--green);background:#fff;border:1px solid #8bc9ab}.primary{border:0;color:#fff;background:var(--green)}.selected-summary{margin-top:20px;border-radius:12px;background:#f7f9fa;padding:15px}.selected-summary em{font-style:normal;color:var(--green)}#selectedChips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.chip{background:#e6f5ed;color:#116a43;border:1px solid #b9e2cc;padding:6px 9px;border-radius:20px;font-size:12px}.chip button{border:0;background:none;color:#6d9280}.empty-text{font-size:12px;color:#a0a8b3}.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.type-card{border:2px solid var(--line);border-radius:14px;padding:19px 12px;text-align:center;cursor:pointer;position:relative}.type-card input{position:absolute;opacity:0}.type-card:has(input:checked){border-color:var(--green);background:#eef9f3;box-shadow:0 0 0 3px #168a5717}.type-card i{font-style:normal;font-size:27px;display:block;margin-bottom:8px}.type-card b,.type-card small{display:block}.type-card small{color:var(--muted);font-size:11px;margin-top:6px}.draw-button{width:100%;border:0;border-radius:12px;background:linear-gradient(90deg,#168a57,#0f7045);color:#fff;font-weight:800;padding:16px;cursor:pointer;box-shadow:0 7px 16px #168a5730}.ladder-stage{height:330px;margin:22px 0 10px;border-radius:14px;background:linear-gradient(#f8fafb,#f0f5f2);overflow:hidden}.ladder-stage canvas{width:100%;height:100%}.winners{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.winner{border:1px solid #eadba7;border-radius:14px;background:#fffbeb;text-align:center;padding:16px 8px;animation:pop .4s both}.winner .medal{font-size:30px}.winner b,.winner small{display:block}.winner b{font-size:17px;margin:5px}.winner small{color:#8b7544}.center{display:block;margin:18px auto 0}@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.modal{position:fixed;z-index:80;inset:0;background:#07101db5;display:none;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.modal-box{background:#fff;width:100%;border-radius:18px;box-shadow:0 22px 60px #0005}.member-box{max-width:660px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden}.modal-head{display:flex;justify-content:space-between;padding:21px 23px 16px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0}.modal-head p{margin:5px 0 0;font-size:12px;color:var(--muted)}.modal-head button{border:0;background:none;font-size:28px}.search-row{display:flex;gap:8px;padding:14px 20px;background:#f7f9fa}.search-row input{min-width:0;flex:1;border:1px solid #dbe1e7;border-radius:9px;padding:10px}.search-row button{border:1px solid #cbd4dd;background:#fff;border-radius:8px;font-size:12px}.member-list{padding:10px 20px;overflow:auto;min-height:260px}.member-item{display:flex;align-items:center;padding:11px 8px;border-bottom:1px solid #eef1f3}.member-item input{width:18px;height:18px;accent-color:var(--green);margin-right:12px}.member-item small{margin-left:auto;color:#8b95a3}.gender{margin-left:7px;font-size:10px;padding:3px 6px;border-radius:10px;background:#edf2f7}.modal-foot{padding:15px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.alert-box{max-width:360px;text-align:center;padding:27px}.alert-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#fff1d8;color:#d58a00;font-size:28px;font-weight:900;margin:auto}.alert-box p{white-space:pre-line;color:#667184;font-size:13px;line-height:1.6}.alert-box .primary{width:100%}.loading,.no-result{text-align:center;color:#8d97a4;padding:50px 0}
@media(max-width:700px){.topbar{height:62px;padding:0 13px}.brand img{width:39px;height:39px}.brand b{font-size:13px}.brand small{display:none}.top-title{font-size:13px}.page{padding:82px 12px 40px}.hero{padding:25px 22px;border-radius:17px}.hero h1{font-size:24px}.hero p:last-child{font-size:12px;line-height:1.6}.hero-icon{font-size:43px}.panel{padding:20px 16px}.section-title{align-items:flex-start}.type-grid{grid-template-columns:1fr;gap:9px}.type-card{display:grid;grid-template-columns:42px 1fr;text-align:left;padding:13px}.type-card i{grid-row:1/3;margin:0}.ladder-stage{height:270px;margin-left:-8px;margin-right:-8px}.winners{grid-template-columns:1fr}.drawer{width:min(84vw,300px)}.search-row{flex-wrap:wrap}.search-row input{flex-basis:100%}.member-list{padding:8px 13px}.modal{padding:10px}}
.select-wrap{margin:22px 0;background:#f7f9fa;border:1px solid var(--line);border-radius:14px;padding:18px}.select-wrap label{display:block;font-size:13px;font-weight:800;margin-bottom:8px}.select-wrap select{width:100%;height:52px;border:2px solid #cfd8df;border-radius:10px;background:#fff;color:var(--text);font-size:15px;font-weight:700;padding:0 14px;outline:none}.select-wrap select:focus{border-color:var(--green);box-shadow:0 0 0 3px #168a5717}.select-wrap p{font-size:12px;color:var(--muted);margin:9px 2px 0}

/* 기존 조편성 화면과 동일한 중앙 로고 상단 */
.main-header { position: relative; min-height: 370px; background: var(--navy); color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.main-header .menu-button { position: absolute; left: 24px; top: 24px; z-index: 3; width: 58px; height: 58px; border-radius: 13px; font-size: 32px; line-height: 1; }
.header-inner { padding: 28px 20px 24px; }
.header-inner h1 { margin: 18px 0 7px; font-size: 28px; }
.header-inner p { margin: 0; color: #c9d1dd; font-size: 13px; }
.logo-container { position: relative; display: inline-block; animation: floating 3s ease-in-out infinite; }
.golf-ball-bg { position: relative; width: 184px; height: 184px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background-color: #f8fafc; background-image: radial-gradient(circle,#cbd5e1 22%,transparent 23%),radial-gradient(circle,#cbd5e1 22%,transparent 23%); background-size: 12px 12px; background-position: 0 0,6px 6px; box-shadow: inset -10px -10px 20px rgba(0,0,0,.15),inset 10px 10px 20px #fff,0 5px 15px rgba(0,0,0,.3); }
.golf-ball-bg img { position: relative; z-index: 1; width: 95%; height: 95%; object-fit: contain; mix-blend-mode: multiply; }
.logo-shine { position: absolute; z-index: 2; top: 0; left: -100%; width: 50%; height: 100%; border-radius: 50%; background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0)); transform: skewX(-25deg); animation: shine 4s infinite; pointer-events: none; }
@keyframes floating { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes shine { 0% { left: -100%; } 20%,100% { left: 200%; } }
.page { padding-top: 12px; }

/* 전체 회원 사다리 좌우 드래그 영역 */
.drag-guide { margin: 16px 0 8px; padding: 9px 12px; border-radius: 9px; background: #edf8f2; color: #167149; text-align: center; font-size: 12px; font-weight: 700; }
.ladder-stage { position:relative; overflow-x:scroll; overflow-y:hidden; cursor:grab; user-select:none; touch-action:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-behavior:auto; scrollbar-color:#168a57 #e8eeeb; scrollbar-width:thin; }
.ladder-stage.dragging { cursor: grabbing; }
.ladder-stage canvas { display:block; width:auto; max-width:none; height:100%; pointer-events:none; -webkit-user-drag:none; }
.ladder-stage::-webkit-scrollbar { height:9px; }
.ladder-stage::-webkit-scrollbar-track { border-radius:8px; background:#e8eeeb; }
.ladder-stage::-webkit-scrollbar-thumb { border-radius:8px; background:#168a57; }
.ladder-stage::-webkit-scrollbar { height: 11px; }
.ladder-stage::-webkit-scrollbar-track { background: #e8eeeb; border-radius: 10px; }
.ladder-stage::-webkit-scrollbar-thumb { background: #168a57; border-radius: 10px; }

@media(max-width:700px) {
    .ladder-stage { cursor:auto; touch-action:pan-x pan-y; }
    .main-header { min-height: 315px; }
    .main-header .menu-button { left: 18px; top: 18px; width: 54px; height: 54px; font-size: 30px; }
    .golf-ball-bg { width: 150px; height: 150px; }
    .header-inner h1 { font-size: 22px; margin-top: 15px; }
    .header-inner p { font-size: 11px; }
    .page { padding-top: 0; }
    .ladder-stage { height: 310px; margin-left: -8px; margin-right: -8px; }
}
.prize-box { max-width: 520px; overflow: hidden; }
.prize-fields { padding: 18px 22px; }
.prize-field { margin-bottom: 15px; }
.prize-field:last-child { margin-bottom: 0; }
.prize-field label { display: block; margin-bottom: 7px; color: #465267; font-size: 13px; font-weight: 800; }
.prize-field input { width: 100%; height: 54px; border: 2px solid #d4dce3; border-radius: 10px; padding: 0 14px; color: #253044; font-size: 17px; font-weight: 750; outline: none; }
.prize-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #168a5717; }
.saved-titles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.saved-title { border: 1px solid #b9e2cc; border-radius: 18px; background: #eaf7f0; padding: 6px 10px; font-size: 12px; font-weight: 700; }
.winner { border-width: 2px; }
@media(max-width:700px) { .prize-field input { height: 58px; font-size: 18px; } .ladder-stage { height: 390px; } }

/* 모바일 기본 셀렉트 팝업을 사용하지 않는 큰 사용자 정의 선택창 */
.custom-select { position: relative; width: 100%; }
.custom-select-button { width: 100%; min-height: 58px; border: 2px solid #cfd8df; border-radius: 11px; background: #fff; color: var(--text); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 17px; font-weight: 800; text-align: left; cursor: pointer; }
.custom-select-button i { font-style: normal; font-size: 26px; transition: transform .2s; }
.custom-select.open .custom-select-button { border-color: var(--green); box-shadow: 0 0 0 3px #168a5717; }
.custom-select.open .custom-select-button i { transform: rotate(180deg); }
.custom-options { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 7px); display: none; overflow: hidden; border: 2px solid var(--green); border-radius: 11px; background: #fff; box-shadow: 0 12px 28px rgba(17,28,47,.2); }
.custom-select.open .custom-options { display: block; }
.custom-options button { width: 100%; min-height: 56px; display: block; border: 0; border-bottom: 1px solid #e8eeeb; background: #fff; color: #253044; padding: 12px 18px; font-size: 17px; font-weight: 750; text-align: left; cursor: pointer; }
.custom-options button:last-child { border-bottom: 0; }
.custom-options button:hover, .custom-options button:focus, .custom-options button.selected { background: #eaf7f0; color: var(--green); outline: none; }
@media(max-width:700px) {
    .custom-select-button { min-height: 62px; font-size: 18px; padding: 0 16px; }
    .custom-options button { min-height: 60px; font-size: 18px; padding: 14px 16px; }
}