: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; }
.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; }
.menu-button { position:absolute; left:24px; top:24px; z-index:3; width:58px; height:58px; border:0; border-radius:13px; background:#ffffff12; color:#fff; font-size:32px; line-height:1; cursor:pointer; }
.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,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-25deg); animation:shine 4s infinite; }
@keyframes floating { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes shine { 0% { left:-100%; } 20%,100% { left:200%; } }
.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; border-radius:50%; object-fit:contain; background:#fff; }
.drawer-head div { display:flex; flex-direction:column; }
.drawer-head small { color:#b9c2ce; font-size:10px; }
.drawer-head button { margin-left:auto; align-self:flex-start; border:0; background:none; color:#fff; font-size:28px; cursor:pointer; }
.drawer nav { padding:16px; }
.drawer nav a { display:flex; gap:13px; margin:4px 0; padding:15px 16px; border-radius:11px; color:#465267; font-weight:700; text-decoration:none; }
.drawer nav a:hover,.drawer nav a.active { background:#eaf7f0; color:var(--green); }
.page { max-width:920px; margin:auto; padding:12px 20px 60px; }
.panel { margin-top:20px; padding:26px 30px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 5px 18px #2734490a; }
.section-title { display:flex; align-items:center; gap:13px; }
.section-title>span { min-width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-weight:800; }
.section-title h2 { margin:0; font-size:19px; }
.section-title p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.push { margin-left:auto; }
.outline,.primary { padding:11px 18px; border-radius:9px; font-weight:700; cursor:pointer; }
.outline { border:1px solid #8bc9ab; background:#fff; color:var(--green); }
.primary { border:0; background:var(--green); color:#fff; }
.selected-summary { margin-top:20px; padding:15px; border-radius:12px; background:#f7f9fa; }
.selected-summary em { color:var(--green); font-style:normal; }
#selectedChips { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.chip { padding:6px 9px; border:1px solid #b9e2cc; border-radius:20px; background:#e6f5ed; color:#116a43; font-size:12px; }
.chip button { border:0; background:none; color:#6d9280; cursor:pointer; }
.empty-text { color:#a0a8b3; font-size:12px; }
.mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; padding:6px; border-radius:13px; background:#edf1ef; }
.mode-tabs button { min-height:50px; border:0; border-radius:9px; background:transparent; color:#687382; font-size:14px; font-weight:800; cursor:pointer; }
.mode-tabs button.active { background:#fff; color:var(--green); box-shadow:0 3px 10px #27344918; }
.member-action,.custom-title-head { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.custom-title-head>div { display:flex; flex-direction:column; gap:5px; }
.custom-title-head small { color:var(--muted); font-size:11px; }
.custom-title-list { display:grid; gap:9px; margin-top:13px; }
.custom-title-row { display:flex; align-items:center; gap:8px; }
.custom-title-row span { width:28px; height:28px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#eaf7f0; color:var(--green); font-size:12px; font-weight:900; }
.custom-title-row input { min-width:0; flex:1; height:52px; padding:0 13px; border:2px solid #d4dce3; border-radius:10px; color:#253044; font-size:16px; font-weight:750; outline:none; }
.custom-title-row input:focus { border-color:var(--green); box-shadow:0 0 0 3px #168a5717; }
.custom-title-row button { width:44px; height:44px; flex-shrink:0; border:0; border-radius:9px; background:#fff0f0; color:#dc2626; font-size:20px; cursor:pointer; }
.blank-controls { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; border:1px dashed #cfd8df; border-radius:12px; background:#f8faf9; }
.blank-controls button { min-height:44px; padding:0 14px; border:1px solid #d5dce2; border-radius:9px; background:#fff; color:#374151; font-weight:800; cursor:pointer; }
.blank-controls #addBlankButton { border-color:#f0b9b9; background:#fff2f2; color:#c62828; }
.blank-controls b { min-width:62px; color:#202733; text-align:center; font-size:13px; }
.randomize-button { min-height:44px; padding:0 15px; border:0; border-radius:10px; background:#eaf7f0; color:var(--green); font-size:13px; font-weight:900; cursor:pointer; }
.randomize-button:active { transform:scale(.97); }
.title-wrap { margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:14px; background:#f7f9fa; }
.title-wrap label { display:block; margin-bottom:8px; font-size:13px; font-weight:800; }
.title-wrap label small { color:var(--muted); font-weight:500; }
.title-wrap input { width:100%; height:56px; padding:0 15px; border:2px solid #cfd8df; border-radius:10px; background:#fff; color:var(--text); font-size:17px; font-weight:700; outline:none; }
.title-wrap input:focus { border-color:var(--green); box-shadow:0 0 0 3px #168a5717; }
.pass-wrap { margin-top:12px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#f7f9fa; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.pass-wrap>div:first-child { display:flex; flex-direction:column; gap:5px; }
.pass-wrap b { font-size:14px; }
.pass-wrap small { color:var(--muted); font-size:11px; }
.stepper { display:flex; align-items:center; flex-shrink:0; overflow:hidden; border:2px solid #b9d7c7; border-radius:11px; background:#fff; }
.stepper button { width:48px; height:48px; border:0; background:#eaf7f0; color:var(--green); font-size:25px; font-weight:900; cursor:pointer; }
.stepper input { width:52px; height:48px; border:0; border-left:1px solid #dbe9e1; border-right:1px solid #dbe9e1; color:#253044; font-size:19px; font-weight:900; text-align:center; outline:none; }
.wheel-area { position:relative; width:min(100%,680px); height:auto; min-height:0; margin:30px auto 18px; padding:13px; aspect-ratio:1/1; border:5px solid #d5b24c; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff8c9 0,#ddb847 22%,#8e6817 58%,#39270b 100%); box-shadow:inset 0 0 0 6px #fff1a6,inset 0 0 22px #0007,0 14px 28px rgba(17,28,47,.28); overflow:visible; }
.wheel-area:before { content:""; position:absolute; z-index:0; inset:8px; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.28) 0 2deg,transparent 2deg 15deg); pointer-events:none; }
#rouletteCanvas { position:relative; z-index:1; display:block; width:100%; height:100%; min-width:0; min-height:0; border-radius:50%; filter:drop-shadow(0 5px 9px rgba(17,28,47,.35)); }
.fixed-pointer { position:absolute; z-index:5; top:-14px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; color:#dc2626; font-size:13px; font-weight:900; }
.fixed-pointer i { display:block; width:0; height:0; border-left:24px solid transparent; border-right:24px solid transparent; border-top:46px solid #ef4444; filter:drop-shadow(0 4px 2px #0003); }
.wheel-center { position:absolute; z-index:4; left:50%; top:50%; width:124px; height:124px; transform:translate(-50%,-50%); display:grid; place-items:center; overflow:hidden; border:8px solid #fff; border-radius:50%; background:#fff; box-shadow:0 4px 15px #0006; pointer-events:none; }
.wheel-center img { width:100%; height:100%; object-fit:contain; }
.spin-button { width:100%; min-height:78px; border:0; border-radius:14px; background:linear-gradient(90deg,#168a57,#0f7045); color:#fff; cursor:pointer; touch-action:none; user-select:none; box-shadow:0 8px 18px #168a5738; }
.spin-button b,.spin-button small { display:block; }
.spin-button b { font-size:20px; }
.spin-button small { margin-top:5px; color:#d9f4e6; font-size:12px; }
.spin-button.holding { background:linear-gradient(90deg,#e34b31,#c62828); transform:scale(.99); }
.result-panel { text-align:center; border:2px solid #e8cc75; background:#fffbeb; }
.result-icon { font-size:48px; }
.result-panel>small { color:#a26e00; font-size:15px; font-weight:800; }
.result-panel h2 { margin:8px 0; font-size:30px; }
.result-panel p { color:var(--muted); }
.modal { position:fixed; z-index:80; inset:0; display:none; align-items:center; justify-content:center; padding:18px; background:#07101db5; }
.modal.open { display:flex; }
.modal-box { width:100%; border-radius:18px; background:#fff; 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; color:var(--muted); font-size:12px; }
.modal-head button { border:0; background:none; font-size:28px; cursor:pointer; }
.search-row { display:flex; gap:8px; padding:14px 20px; background:#f7f9fa; }
.search-row input { min-width:0; flex:1; padding:10px; border:1px solid #dbe1e7; border-radius:9px; }
.search-row button { border:1px solid #cbd4dd; border-radius:8px; background:#fff; font-size:12px; cursor:pointer; }
.member-list { min-height:260px; padding:10px 20px; overflow:auto; }
.member-item { display:flex; align-items:center; padding:11px 8px; border-bottom:1px solid #eef1f3; cursor:pointer; }
.member-item input { width:18px; height:18px; margin-right:12px; accent-color:var(--green); }
.member-item small { margin-left:auto; color:#8b95a3; }
.gender { margin-left:7px; padding:3px 6px; border-radius:10px; background:#edf2f7; font-size:10px; }
.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; padding:27px; text-align:center; }
.alert-icon { width:52px; height:52px; margin:auto; display:grid; place-items:center; border-radius:50%; background:#fff1d8; color:#d58a00; font-size:28px; font-weight:900; }
.alert-box p { color:#667184; font-size:13px; line-height:1.6; white-space:pre-line; }
.alert-box .primary { width:100%; }
.loading,.no-result { padding:50px 0; color:#8d97a4; text-align:center; }
#confettiCanvas { position:fixed; z-index:200; inset:0; width:100%; height:100%; pointer-events:none; }
@media(max-width:700px) {
    .main-header { min-height:315px; }
    .menu-button { left:18px; top:18px; width:54px; height:54px; font-size:30px; }
    .golf-ball-bg { width:150px; height:150px; }
    .header-inner h1 { margin-top:15px; font-size:22px; }
    .header-inner p { font-size:11px; }
    .page { padding:0 12px 40px; }
    .panel { padding:20px 16px; }
    .section-title { align-items:flex-start; }
    .roulette-panel .section-title { flex-wrap:wrap; }
    .roulette-panel .randomize-button { width:100%; margin:10px 0 0; min-height:50px; font-size:15px; }
    .title-wrap input { height:60px; font-size:18px; }
    .wheel-area { width:100%; max-width:100%; margin-top:26px; flex:none; }
    .wheel-center { width:88px; height:88px; border-width:6px; }
    .fixed-pointer i { border-left-width:19px; border-right-width:19px; border-top-width:38px; }
    .spin-button { min-height:82px; }
    .drawer { width:min(84vw,300px); }
    .search-row { flex-wrap:wrap; }
    .search-row input { flex-basis:100%; }
    .member-list { padding:8px 13px; }
    .modal { padding:10px; }
    .pass-wrap { align-items:flex-start; }
    .stepper button { width:44px; height:46px; }
    .stepper input { width:45px; height:46px; }
    .mode-tabs button { font-size:13px; }
    .member-action,.custom-title-head { align-items:flex-start; }
    .custom-title-head { flex-wrap:wrap; }
    .custom-title-row input { height:56px; font-size:17px; }
    .blank-controls { flex-wrap:wrap; }
}