:root { --bg:#f4f5f7; --card:#ffffff; --line:#e2e5ea; --fg:#1c1f26; --mut:#6b7280;
--acc:#16a34a; --acc-d:#15803d; --danger:#e23b3f; --field:#f1f3f6; --blue:#2f74d0; --gold:#c98a00;
--safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scrollbar-gutter: stable; } /* 스크롤바 유무로 가로 흔들림 방지 */
@supports not (scrollbar-gutter: stable){ html { overflow-y: scroll; } }
html,body { margin:0; }
body { background:var(--bg); color:var(--fg); font-size:16px; line-height:1.4;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif; -webkit-text-size-adjust:100%; }
.app { max-width:480px; margin:0 auto; min-height:100vh; padding:0 16px calc(24px + var(--safe-b)); }
header { padding:calc(14px + var(--safe-t)) 2px 8px; position:relative; }
h1 { font-size:20px; margin:0 0 4px; padding-right:84px; }
.sub { color:var(--mut); font-size:13px; }
.share-btn { position:absolute; right:2px; top:calc(14px + var(--safe-t)); display:inline-flex; align-items:center; gap:6px;
background:#eaf6ee; color:var(--acc-d); border:1px solid #cfe9d8; border-radius:999px; padding:7px 14px;
font-size:13px; font-weight:700; cursor:pointer; transition:background .12s ease, transform .12s ease; }
.share-btn:hover { background:#e0f1e7; }
.share-btn:active { transform:scale(.95); background:#d6ecde; }
/* 홈 화면 추가 배너 */
.a2hs { display:flex; align-items:center; gap:8px; background:#eaf6ee; border:1px solid #cfe9d8; border-radius:12px; padding:9px 10px 9px 13px; margin:10px 0; }
.a2hs-t { flex:1; font-size:12.5px; color:var(--acc-d); font-weight:600; line-height:1.4; }
.a2hs-add { flex:none; background:var(--acc); color:#fff; border:0; border-radius:9px; padding:7px 14px; font-weight:800; font-size:13px; cursor:pointer; }
.a2hs-x { flex:none; background:transparent; border:0; color:var(--mut); font-size:14px; cursor:pointer; padding:4px; }
.ios-guide { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:24px; z-index:200; }
.ios-card { background:var(--card); border-radius:16px; padding:18px; max-width:340px; width:100%; }
/* 인증 바 */
.authbar { display:flex; align-items:center; gap:8px; background:var(--field); border:1px solid var(--line); border-radius:12px; padding:10px; margin:10px 0; flex-wrap:wrap; }
.authbar input { flex:1; min-width:80px; height:42px; padding:0 12px; background:var(--bg); border:1px solid var(--line); border-radius:9px; color:var(--fg); font-size:15px; }
.authbar button { height:42px; padding:0 14px; border:0; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; }
.btn-acc { background:var(--acc); color:#fff; border:0; } .btn-ghost { background:transparent; border:1px solid var(--line); color:var(--mut); }
.btn-kakao { background:#FEE500; color:#191600; font-size:15px; height:46px; padding:0 16px; border:0; }
.khint { font-size:12px; color:var(--mut); flex-basis:100%; line-height:1.5; }
.khint b { color:var(--gold); }
.who { font-weight:700; } .who b { color:var(--acc-d); }
.vert-switch { display:flex; gap:8px; margin-bottom:12px; }
.notice-bar { margin-bottom:12px; padding:9px 12px; background:#eef5ee; border:1px solid #d4e7d4; border-radius:10px; font-size:12.5px; color:var(--acc-d); }
.notice-line { display:flex; align-items:center; gap:7px; }
.notice-bar.expandable .notice-line { cursor:pointer; }
.notice-ico { flex:none; }
.notice-txt { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.notice-bar.open .notice-txt { white-space:normal; }
.notice-bar.expandable .notice-line, .notice-line { cursor:pointer; }
.notice-chev { flex:none; font-size:17px; line-height:1; transition:transform .15s; }
.notice-bar.open .notice-chev { transform:rotate(180deg); }
.notice-list { list-style:none; margin:8px 0 0; padding:8px 0 0; border-top:1px solid #cfe3cf; }
.notice-list li { display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:7px; cursor:pointer; }
.notice-list li:hover { background:#e0efe0; }
.notice-list .nl-t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--fg); }
.notice-list .nl-d { flex:none; font-size:11px; color:var(--mut); }
.vbtn { flex:1; height:46px; border:1px solid var(--line); background:var(--card); color:var(--mut); border-radius:12px; font-size:15px; font-weight:800; cursor:pointer; }
.vbtn.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.sortrow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 12px; flex-wrap:wrap; }
.sortrow .sr-left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sortrow .switch { margin:0; }
.locbtn { flex:none; height:42px; padding:0 14px; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; }
.locbtn.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.dist { display:inline-block; font-size:12px; font-weight:800; color:var(--acc-d); margin-left:6px; }
.locname { font-size:12px; font-weight:700; color:var(--acc-d); margin:4px 2px 0; }
.locname:empty { display:none; }
.grate { display:inline-block; font-size:12px; font-weight:800; color:#e8a200; margin-left:6px; }
.gmeta { margin-top:4px; display:flex; align-items:center; gap:12px; }
.gmeta .grate, .gmeta .dist { margin-left:0; }
.src { display:inline-block; font-size:10px; font-weight:800; padding:1px 6px; border-radius:6px; margin-left:4px; vertical-align:1px; }
.src-kakao { background:#fee500; color:#3c1e1e; } .src-naver { background:#03c75a; color:#fff; }
.slot .tag .cmp { color:#fff; background:#3b82f6; border-radius:4px; padding:0 4px; font-weight:800; }
.go-offer { display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px; margin-top:8px; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; font-size:15px; }
.go-offer .go-prov { font-weight:800; flex:1; text-align:left; }
.go-offer .go-fee { font-weight:800; color:var(--acc-d); }
.go-offer .go-arrow { font-size:13px; font-weight:700; color:var(--mut); }
.tabs { display:flex; gap:6px; background:var(--field); border:1px solid var(--line); border-radius:12px; padding:5px; position:sticky; top:0; z-index:10; margin-bottom:16px; }
.tab { flex:1; text-align:center; padding:11px 0; border-radius:8px; font-size:14px; font-weight:700; color:var(--mut); cursor:pointer; }
.tab.active { background:var(--acc); color:#fff; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:16px; }
.sec-title { font-size:15px; font-weight:700; margin:4px 2px 10px; display:flex; align-items:center; gap:8px; }
.sec-title .cnt { color:var(--mut); font-weight:400; font-size:13px; }
label { display:block; font-size:13px; color:var(--mut); margin:14px 2px 6px; }
label.top0 { margin-top:0; }
input, select { width:100%; height:52px; padding:0 14px; background:var(--field); border:1px solid var(--line); border-radius:12px; color:var(--fg); font-size:16px; appearance:none; -webkit-appearance:none; }
input[type=checkbox], input[type=radio] { width:auto; height:auto; padding:0; background:initial; border:initial; border-radius:initial; appearance:auto; -webkit-appearance:auto; } /* 전역 input 스타일에서 체크박스/라디오 예외 */
select { background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; padding-right:40px; }
input:focus, select:focus { outline:none; border-color:var(--acc-d); }
input[type=date], input[type=time] { cursor:pointer; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { filter:invert(1); opacity:.65; cursor:pointer; width:22px; height:22px; padding-left:6px; }
.row { display:flex; gap:10px; } .row > div { flex:1; min-width:0; }
.day-ctl { display:flex; gap:10px; align-items:center; }
.day-ctl select { flex:1; min-width:0; }
.day-ctl input[type=date] { flex:0 0 auto; width:auto; }
.day-wd { flex:none; font-weight:800; font-size:15px; margin-left:-2px; color:var(--mut); }
.datewrap { position:relative; flex:0 0 auto; }
.datebtn { display:inline-flex; align-items:center; height:52px; padding:0 16px; background:var(--field);
border:1px solid var(--line); border-radius:12px; color:var(--fg); font-size:16px; font-weight:700; white-space:nowrap; }
.datewrap input[type=date] { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
.go { height:52px; padding:0 18px; background:var(--acc); color:#fff; border:0; border-radius:12px; font-weight:800; font-size:15px; cursor:pointer; }
.day-ctl .go { width:auto; flex:none; }
.switch { display:flex; align-items:center; gap:10px; margin:14px 2px 0; font-size:14px; cursor:pointer; }
.switch input { display:none; }
.switch .track { width:46px; height:28px; border-radius:20px; background:var(--line); position:relative; transition:.2s; flex:none; }
.switch .track::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.2s; }
.switch .track { box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.switch input:checked + .track { background:var(--acc); }
.switch input:checked + .track::after { transform:translateX(18px); }
.meta-line { font-size:13px; margin:2px 2px 10px; display:flex; gap:12px; flex-wrap:wrap; }
.rate { color:var(--gold); font-weight:700; } .rate small { color:var(--mut); font-weight:400; }
.r-diff { color:#e08a1e; font-size:11.5px; margin-left:7px; letter-spacing:-1px; }
.r-fear { color:#c0392b; font-size:11.5px; margin-left:7px; letter-spacing:-1px; }
.price { color:var(--acc-d); font-weight:700; } .price.none { color:var(--mut); font-weight:400; }
.legend { display:flex; gap:14px; font-size:12px; color:var(--mut); margin:2px 2px 10px; flex-wrap:wrap; }
.legend i { display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:-1px; margin-right:5px; }
.lg-open { background:var(--acc); } .lg-full { background:var(--field); border:1px solid var(--line); }
.lg-sub { background:var(--field); box-shadow:inset 0 0 0 1.5px var(--acc-d); }
.sched-hint { color:var(--mut); font-size:13px; padding:10px 2px; }
.day { margin-bottom:14px; }
.day-h { font-size:13px; margin:0 2px 8px; font-weight:600; }
.wd-sat { color:var(--blue); } .wd-sun { color:var(--danger); }
.slots, .ov-slots { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.slots.collapsed .slot:nth-child(n+5) { display:none; }
.gslots { margin-top:10px; }
.gmore { margin-top:8px; width:100%; height:34px; border:1px solid var(--line); background:var(--field); color:var(--mut); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; }
.slot { height:48px; border-radius:10px; border:1px solid var(--line); background:var(--field); color:var(--fg);
font-size:14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1.05; position:relative; }
.slot .tag { font-size:12px; font-weight:700; }
.slot .tag .h9 { color:#e8741e; font-weight:800; }
.slot.open { border-color:#9ad9b3; background:#edfbf2; } .slot.open .tag { color:var(--acc-d); }
.slot.full { color:var(--mut); } .slot.full .tag { color:var(--mut); }
.slot.full::after { content:'🔔'; position:absolute; top:2px; right:4px; font-size:10px; opacity:.3; }
.slot.full.alerted::after { opacity:1; }
.slot.alerted { border-color:var(--gold); background:#fffaf0; }
.slot.subbed { box-shadow:inset 0 0 0 1.5px var(--acc-d); } /* 자동 구독 범위 시간 = 전체 얇은 테두리 */
.slot.open::after { content:'↗'; position:absolute; top:1px; right:4px; font-size:11px; color:var(--acc-d); opacity:.6; }
.slot.past { opacity:.4; cursor:default; border-color:var(--line); background:var(--field); }
.slot.past .tag { color:var(--mut); }
.slot.past::after { display:none; }
.slot-expired { text-decoration:line-through; opacity:.5; }
.slot .bell { display:none; }
.ov-item { border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:var(--field); }
.ov-head { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:4px; flex-wrap:wrap; }
.badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; }
.badge.ke { background:#e3edff; color:#2b5fa8; } .badge.dp { background:#fbecd0; color:#956510; }
.badge.xd { background:#efe5fb; color:#6b3fb0; }
.badge.nv { background:#dcf4e3; color:#1c7a43; }
.badge.sh { background:#efe7d6; color:#7a5a1c; }
.badge.hp { background:#e7eef0; color:#3a5a66; }
.badge.mp { background:#f3e0e6; color:#8a2b4d; }
.badge.p3 { background:#e0eede; color:#3d6b2f; }
.badge.zw { background:#e6e8f6; color:#3a3f8a; }
.badge.pw { background:#fde8e0; color:#9a4a23; }
.badge.ex { background:#e0f0f4; color:#1d6b80; }
.badge.sg { background:#e9f5e0; color:#4a6b1d; }
.badge.mk { background:#efe7f6; color:#5a3a8a; }
.badge.es2 { background:#fbe8ef; color:#9a2b5a; }
.ov-cnt { color:var(--mut); font-size:12px; font-weight:400; margin-left:auto; }
.ov-sub { font-size:12px; margin:0 0 9px; display:flex; gap:10px; flex-wrap:wrap; }
.badge.reg { background:#eceef1; color:#5b6470; }
.badge.loc { background:#e3edff; color:#2b5fa8; }
.targets { list-style:none; padding:0; margin:0; }
.targets li { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:14px; margin-bottom:10px; background:var(--field); }
.t-body { flex:1; min-width:0; } .t-main { font-size:15px; word-break:break-all; } .t-main b { color:var(--acc-d); }
.t-meta { color:var(--mut); font-size:12.5px; margin-top:4px; }
/* 내 알림 — 테마 카드 + 날짜별 묶음 */
.targets li.mine-group { display:block; padding:0; border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.03); transition:box-shadow .15s, transform .15s; }
.targets li.mine-group:hover { box-shadow:0 4px 14px rgba(0,0,0,.06); }
.mine-head { display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(180deg, var(--field) 0%, var(--card) 100%); border-bottom:1px solid var(--line); }
.mine-head-l { flex:1; min-width:0; }
.mine-theme b { font-size:15.5px; color:var(--fg); letter-spacing:-.2px; }
.mine-sub { color:var(--mut); font-size:12px; margin-top:2px; }
.mine-head-r { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.mine-cnt { font-size:11px; padding:3px 9px; border-radius:999px; background:var(--acc); color:#fff; font-weight:700; min-width:22px; text-align:center; }
.mine-del-all { background:transparent; border:1px solid var(--line); color:var(--mut); cursor:pointer; font-size:11.5px; padding:4px 9px; border-radius:8px; font-weight:600; }
.mine-del-all:hover { background:#fee; color:#c33; border-color:#fcc; }
.mine-days { padding:8px 10px 10px; display:flex; flex-direction:column; gap:6px; }
.mine-sub-badge { font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:999px; background:var(--acc); color:#fff; vertical-align:middle; margin-left:4px; }
.mine-sub-row { display:flex; align-items:center; gap:11px; padding:11px 14px;
background:var(--field); border-bottom:1px solid var(--line); border-left:3px solid var(--acc); }
.mine-sub-ico { flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
border-radius:999px; background:var(--acc); font-size:15px; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.mine-sub-txt { flex:1; min-width:0; }
.mine-sub-title { font-size:12.5px; font-weight:800; color:var(--acc-d); }
.mine-sub-cond { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.mine-sub-pill { font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:999px;
background:var(--field); border:1px solid var(--line); color:var(--fg); }
.mine-sub-pill b { color:var(--acc-d); font-weight:800; }
.mine-sub-pill.all { background:var(--acc); color:#fff; border-color:var(--acc); }
.mine-sub-row .mine-sub-btns { margin-left:auto; flex:none; display:flex; gap:6px; align-self:flex-start; }
.mine-sub-row .mine-sub-edit, .mine-sub-row .mine-sub-del { flex:none; font-size:11.5px; padding:4px 9px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--mut); cursor:pointer; font-weight:600; }
.mine-sub-row .mine-sub-edit:hover { background:var(--field); color:var(--acc-d); border-color:var(--acc-d); }
.mine-sub-row .mine-sub-del:hover { background:#fee; color:#c33; border-color:#fcc; }
.mine-day { display:flex; align-items:flex-start; gap:10px; padding:7px 8px; border-radius:10px; }
.mine-day:hover { background:var(--field); }
.mine-day-h { display:flex; align-items:center; gap:6px; min-width:84px; font-size:12.5px; font-weight:700; color:var(--acc-d); padding-top:3px; }
.mine-day-cnt { font-size:10.5px; font-weight:600; color:var(--mut); background:var(--field); border:1px solid var(--line); border-radius:999px; padding:1px 6px; }
.mine-day:hover .mine-day-cnt { background:var(--card); }
.mine-chips { flex:1; display:flex; flex-wrap:wrap; gap:5px; }
.mine-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; font-size:12.5px; font-weight:600; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--fg); cursor:pointer; transition:background .12s, border-color .12s, color .12s, transform .12s, box-shadow .12s; font-family:inherit; }
.mine-chip .mc-x { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:999px; background:var(--field); color:var(--mut); font-size:9.5px; font-weight:700; transition:background .12s, color .12s; }
.mine-chip:hover { background:var(--acc); color:#fff; border-color:var(--acc); transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.08); }
.mine-chip:hover .mc-x { background:rgba(255,255,255,.25); color:#fff; }
.mine-chip:active { transform:translateY(0); }
.mine-chip-day { background:#fff7e6; border-color:#ffd591; color:#874d00; }
.mine-chip-day .mc-x { background:#ffe7ba; color:#874d00; }
.mine-chip-day:hover { background:#fa8c16; border-color:#fa8c16; color:#fff; }
.mine-chip-day:hover .mc-x { background:rgba(255,255,255,.3); color:#fff; }
.mine-chip.is-expired { opacity:.45; text-decoration:line-through; cursor:default; padding-right:10px; }
.mine-chip.is-expired:hover { background:var(--card); color:var(--fg); transform:none; box-shadow:none; border-color:var(--line); }
.del { flex:none; width:44px; height:44px; padding:0; background:transparent; border:1px solid var(--danger); color:var(--danger); border-radius:12px; font-size:18px; cursor:pointer; }
.empty { color:var(--mut); font-size:14px; text-align:center; padding:24px 0; }
.pick-filter { text-align:center; padding:30px 18px; margin:10px 0; border:1.5px dashed var(--acc); border-radius:16px; background:var(--field); }
.pick-filter .pf-ico { font-size:32px; line-height:1; animation:pfbob 1.4s ease-in-out infinite; }
.pick-filter .pf-tit { font-size:17px; font-weight:800; color:var(--fg); margin:10px 0 5px; }
.pick-filter .pf-sub { font-size:13px; color:var(--mut); line-height:1.5; }
.pick-filter b { color:var(--acc-d); }
@keyframes pfbob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.summary { color:var(--mut); font-size:13px; margin:14px 2px 8px; }
.toast { position:fixed; left:50%; bottom:calc(24px + var(--safe-b)); transform:translateX(-50%) translateY(8px);
background:var(--acc); color:#fff; padding:11px 20px; border-radius:24px; font-weight:700; font-size:14px; opacity:0; transition:.25s; pointer-events:none; z-index:30; white-space:nowrap; max-width:90%; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--danger); color:#fff; }
.foot { color:var(--mut); font-size:11.5px; text-align:center; padding:8px 0; }
.spin { display:inline-block; width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--acc-d); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-3px; margin-right:7px; }
@keyframes sp { to { transform:rotate(360deg); } }
/* 커스텀 드롭다운 (탭 시 즉시 적용·닫힘 — 네이티브 picker의 다음/완료 제거) */
.cs-native { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.cs-wrap { position:relative; width:100%; }
.day-ctl .cs-wrap { flex:1; min-width:0; }
.cs-btn { width:100%; height:52px; text-align:left; padding:0 38px 0 14px; background:var(--field);
border:1px solid var(--line); border-radius:12px; color:var(--fg); font-size:16px; cursor:pointer;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-btn::after { content:''; position:absolute; right:14px; top:0; bottom:0; width:20px;
background:url("data:image/svg+xml;utf8,") no-repeat center; }
.cs-btn.open { border-color:var(--acc-d); }
.cs-btn.cs-active { border-color:var(--acc); background:#eaf6ee; color:var(--acc-d); font-weight:700; box-shadow:0 0 0 1px var(--acc) inset; } /* 필터 선택 시 강조 */
/* compact: 콘텐츠 너비로 작게(정렬 등) */
.cs-wrap.cs-sm { flex:none; width:auto; }
#schedCtl .cs-wrap.cs-sm { margin-left:auto; } /* 테마별 정렬 드롭다운 우측 정렬(래퍼 기준) */
.cs-wrap.cs-sm .cs-btn { width:auto; height:42px; font-size:14px; padding:0 32px 0 12px; }
.cs-wrap.cs-sm .cs-menu { left:auto; right:0; min-width:140px; top:46px; }
.cs-menu { position:absolute; left:0; right:auto; top:56px; z-index:40; background:var(--card);
border:1px solid var(--line); border-radius:12px; max-height:50vh; overflow:auto;
box-shadow:0 10px 28px rgba(0,0,0,.15); padding:4px;
width:max-content; min-width:100%; max-width:min(86vw,380px); }
.cs-item { padding:12px 14px; font-size:15px; border-radius:8px; cursor:pointer; white-space:normal; word-break:break-word; line-height:1.35; }
/* 검색형 드롭다운 팝업: 모바일에서만 상단 고정(키보드 가림 방지) + 배경 딤.
PC에선 일반 앵커 드롭다운 유지(팝업/딤 미적용). */
.cs-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:55; }
@media (max-width:640px){
.cs-menu.cs-pop { position:fixed; top:12px; left:50%; transform:translateX(-50%);
width:calc(100% - 20px); max-width:420px; max-height:55vh; z-index:60; }
}
@media (min-width:641px){ .cs-backdrop { display:none; } }
.cs-search { width:100%; height:42px; padding:0 12px; margin-bottom:4px; box-sizing:border-box;
border:1px solid var(--line); border-radius:9px; font-size:15px; color:var(--fg); background:var(--field);
position:sticky; top:0; z-index:1; }
.cs-search:focus { outline:none; border-color:var(--acc-d); }
.cs-item.on { color:var(--acc-d); font-weight:700; }
.cs-mk { margin-right:6px; font-size:14px; white-space:nowrap; }
.cs-item:active { background:var(--field); }
.cs-item.cs-checked { background:var(--field); }
.cs-check { float:right; margin-left:8px; color:var(--acc-d); font-weight:800; }
.cs-subtag { float:right; margin-left:8px; font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px; background:var(--acc); color:#fff; }
.cs-item:not(.cs-checked) .cs-check { display:none; }
.cs-item.cs-locked { color:var(--mut); cursor:default; opacity:.7; }
.cs-item.cs-locked .cs-check { color:var(--mut); font-weight:700; font-size:12px; }
.hide { display:none; }
/* 즐겨찾기/내가 한 테마 토글 + 마이페이지 버튼 */
.marks { margin-left:auto; display:inline-flex; gap:6px; flex:none; }
.mark-btn { border:1px solid var(--line); background:var(--card); border-radius:9px; padding:8px 11px; font-size:18px; line-height:1; cursor:pointer; }
.theme-card > .marks { position:absolute; top:11px; right:12px; margin-left:0; z-index:2; }
.mark-fav { filter:grayscale(1) opacity(.4); transition:filter .12s; } /* 미적용: 흐린 회색 별 */
.mark-fav.on { filter:none; } /* 적용: 금색 별 */
.played-tag { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:20px; background:#dcf4e3; color:#1c7a43; margin-left:6px; vertical-align:1px; }
.new-badge { display:inline-block; font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:20px; background:#ffe1e1; color:#d6334a; margin-left:6px; vertical-align:1px; letter-spacing:.3px; }
/* 통합 자동완성 검색(지역/사이트/지점/테마) */
.usearch { position:relative; margin:0 0 12px; }
.usearch-in { width:100%; height:52px; padding:0 14px; box-sizing:border-box; border:1px solid var(--line); border-radius:12px; background:var(--field); color:var(--fg); font-size:16px; }
.usearch-in:focus { outline:none; border-color:var(--acc-d); }
.pl-search { margin:0 0 10px; }
.usug { position:absolute; left:0; right:0; top:50px; z-index:45; background:var(--card); border:1px solid var(--line); border-radius:11px; box-shadow:0 6px 20px rgba(0,0,0,.12); max-height:340px; overflow-y:auto; padding:5px; }
.usug-item { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.usug-item.on, .usug-item:hover { background:var(--field); }
.usug-badge { flex:none; font-size:11px; font-weight:800; padding:2px 7px; border-radius:6px; }
.b-reg { background:#e7f0ff; color:#2b59c3; } .b-site { background:#eafaf0; color:#1c7a43; }
.b-br { background:#fff2e0; color:#c47a12; } .b-th { background:#fde8ee; color:#c0306a; }
.usug-name { flex:1; min-width:0; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usug-ctx { flex:none; font-size:11.5px; color:var(--mut); max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usug-empty { padding:12px; color:var(--mut); font-size:13px; text-align:center; }
.usug-head { padding:7px 10px 5px; font-size:11.5px; font-weight:700; color:var(--mut); }
.rec-chips { display:flex; flex-wrap:wrap; gap:6px; padding:2px 8px 6px; }
.rec-chip { display:inline-flex; align-items:center; font-size:12px; font-weight:700; padding:4px 10px; border-radius:7px; cursor:pointer; max-width:100%; overflow:hidden; white-space:nowrap; }
.rec-chip .fb-k { flex:none; font-size:10.5px; font-weight:800; opacity:.75; padding-right:6px; margin-right:6px; border-right:1px solid currentColor; }
.rec-chip > span, .rec-chip { min-width:0; }
.rec-chip .rc-nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-chip.on { outline:2px solid var(--acc-d); outline-offset:1px; }
.rec-div { border:0; border-top:1px solid var(--line); margin:5px 8px; }
.rec-item { padding:9px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--fg); }
.rec-item:hover, .rec-item.on { background:var(--field); }
.rec-item { display:flex; align-items:center; gap:4px; }
.rec-num { color:var(--acc-d); margin-right:3px; flex:none; }
.rec-it-nm { flex:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-it-ctx { color:var(--mut); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 4px; }
.rec-col { min-width:0; }
.rec-col .usug-head { padding:6px 8px 4px; }
.rec-col .rec-item { padding:8px 10px; } /* 2컬럼이라 조금 컴팩트 */
.rec-col .rec-it-nm { max-width:none; } /* 좁은 컬럼에서도 이름 우선 표시 */
.filter-body { margin-top:8px; }
#dayFilters { margin-top:18px; } /* 조회 버튼과 상세 필터 사이 공백 */
/* 내가 한 테마: 통계/직접추가 폼/목록 */
.pl-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:6px 0 12px; }
.pl-stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center; }
.pl-stat b { display:block; font-size:19px; color:var(--fg); line-height:1.1; }
.pl-stat span { font-size:11px; color:var(--mut); }
.pl-bars { margin:0 0 12px; }
.pl-bars .pl-bar-tit { font-size:12px; color:var(--mut); margin:8px 2px 5px; font-weight:700; }
.pl-bar { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:12.5px; }
.pl-bar .nm { flex:none; width:84px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-bar .tr { flex:1; height:9px; background:var(--field); border-radius:6px; overflow:hidden; }
.pl-bar .fl { height:100%; background:var(--acc); border-radius:6px; }
.pl-bar .vv { flex:none; color:var(--mut); width:22px; text-align:right; }
.pl-add-btn { width:100%; height:42px; border:1px dashed var(--acc); background:var(--card); color:var(--acc-d); border-radius:11px; font-size:14px; font-weight:800; cursor:pointer; margin-bottom:10px; }
.pl-form { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; }
.pl-form-tit { font-size:14px; font-weight:800; margin-bottom:10px; color:var(--fg); }
.pl-form input[type=text], .pl-form input:not([type]), .pl-form input#plTheme, .pl-form input#plSite, .pl-form input#plBranch { width:100%; height:42px; padding:0 12px; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; font-size:15px; color:var(--fg); background:var(--field); margin-bottom:8px; }
.pl-row2 { display:flex; gap:8px; }
.pl-row2 > * { flex:1; min-width:0; }
.pl-lab { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--mut); margin-bottom:8px; }
.pl-lab input[type=date] { height:42px; padding:0 10px; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; font-size:14px; color:var(--fg); background:var(--field); }
.pl-stars { display:flex; align-items:center; gap:2px; font-size:24px; line-height:1; padding-top:18px; }
.pl-stars .st, .pl-stars-disp .st { position:relative; color:#d7d7d7; user-select:none; }
.pl-stars .st { cursor:pointer; }
.pl-stars .st .fill, .pl-stars-disp .st .fill { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:#f5b301; pointer-events:none; }
.pl-stars-disp { display:inline-flex; }
.pl-bulk-chips { margin-top:10px; }
.pl-bulk-empty { color:var(--mut); font-size:12.5px; padding:2px 0; }
.pl-bulk-item { border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-top:8px; background:var(--card); }
.pl-bulk-h { display:flex; align-items:center; gap:7px; font-size:13.5px; }
.pl-bulk-h .x { margin-left:auto; cursor:pointer; color:var(--mut); font-weight:800; }
.pl-bulk-h .x:hover { color:var(--danger); }
.pl-bulk-f { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:9px; }
.pl-bulk-f label { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--mut); }
.pl-bulk-f input { height:34px; padding:0 9px; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--card); color:var(--fg); }
.pl-bulk-f input.bclear { width:96px; }
.golf-bell { margin-left:auto; border:1px solid var(--line); background:var(--card); border-radius:9px; padding:3px 9px; font-size:13px; cursor:pointer; filter:grayscale(1); opacity:.5; }
.golf-bell.on { filter:none; opacity:1; border-color:var(--gold); background:#fffaf0; }
.pl-stars-mini { display:inline-flex; gap:1px; font-size:19px; line-height:1; cursor:pointer; }
.pl-stars-mini .st { position:relative; color:#d7d7d7; user-select:none; }
.pl-stars-mini .st .fill { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:#f5b301; pointer-events:none; }
.pl-form .req-msg { min-height:64px; }
.pl-form-btns { display:flex; gap:8px; margin-top:4px; }
.pl-fb { flex:1; height:46px; border-radius:11px; font-size:15px; font-weight:800; cursor:pointer; }
.pl-item { display:block; }
.pl-it-head { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pl-it-meta { font-size:12px; color:var(--mut); margin-top:3px; }
.pl-it-stars { color:#f5b301; font-size:13px; letter-spacing:1px; }
.pl-it-review { font-size:13px; color:var(--fg); margin-top:6px; white-space:pre-wrap; background:var(--field); border-radius:9px; padding:8px 10px; }
.pl-it-btns { display:flex; gap:6px; margin-top:8px; }
.pl-it-btns button { border:1px solid var(--line); background:var(--card); color:var(--mut); border-radius:8px; padding:5px 12px; font-size:12.5px; font-weight:700; cursor:pointer; }
.pl-it-btns .pl-ed { color:var(--acc-d); }
.pl-it-btns .pl-del { color:#c0392b; }
.pl-mode-row { margin:2px 0 10px; }
.pl-mode-btn { border:0; background:transparent; color:var(--acc-d); font-size:12.5px; font-weight:700; cursor:pointer; padding:2px; }
.pl-it-imgs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pl-it-imgs img { width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
/* 커뮤니티(자유게시판) */
.bd-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.bd-write-btn { margin-left:auto; border:1px solid var(--acc); background:var(--card); color:var(--acc-d);
border-radius:10px; padding:8px 14px; font-size:13.5px; font-weight:800; cursor:pointer; }
.bd-form { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; }
.bd-form input { width:100%; height:44px; padding:0 12px; box-sizing:border-box; border:1px solid var(--line);
border-radius:9px; font-size:15px; color:var(--fg); background:var(--field); margin-bottom:8px; }
.bd-form .req-msg { min-height:120px; }
.bd-form-btns { display:flex; gap:8px; margin-top:4px; }
.bd-fb { flex:1; height:46px; border-radius:11px; font-size:15px; font-weight:800; cursor:pointer; }
.bd-item { display:block; cursor:pointer; }
.bd-item .bd-t { font-weight:700; font-size:15px; line-height:1.3; }
.bd-item .bd-m { font-size:12px; color:var(--mut); margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
.bd-c { display:inline-flex; align-items:center; gap:3px; }
/* 이모지 뒤 숫자가 이모지 폰트로 끌려가지 않게 기본 폰트 강제(모바일) */
.bd-c i { font-style:normal; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-variant-numeric:tabular-nums; }
.bd-item:active { background:var(--field); }
.bd-more { width:100%; height:42px; border:1px solid var(--line); background:var(--card); color:var(--mut);
border-radius:11px; font-size:14px; font-weight:700; cursor:pointer; margin-top:4px; }
.bd-back { display:inline-flex; align-items:center; gap:8px; background:transparent; border:0; color:var(--acc-d);
font-weight:800; font-size:15px; cursor:pointer; padding:6px 2px 12px; }
.bd-back .chev-l { width:9px; height:9px; border-left:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg); }
.bd-d-title { font-size:20px; font-weight:800; line-height:1.3; }
.bd-d-meta { font-size:12.5px; color:var(--mut); margin:6px 0 14px; }
.bd-d-body { font-size:15px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.bd-actions { display:flex; gap:8px; align-items:center; margin:16px 0; }
.bd-like { border:1px solid var(--line); background:var(--card); border-radius:20px; padding:8px 16px;
font-size:14px; font-weight:700; cursor:pointer; color:var(--mut); }
.bd-like.on { border-color:#e84393; color:#e84393; background:#fdeef5; }
.bd-del { margin-left:auto; border:1px solid var(--line); background:var(--card); color:#c0392b;
border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:700; cursor:pointer; }
.bd-csec { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.bd-comment { padding:10px 0; border-bottom:1px solid var(--line); }
.bd-c-h { font-size:12.5px; color:var(--mut); display:flex; gap:8px; align-items:center; }
.bd-c-del { margin-left:auto; border:0; background:transparent; color:#c0392b; font-size:12px; cursor:pointer; }
.bd-c-body { font-size:14px; margin-top:3px; white-space:pre-wrap; word-break:break-word; }
.bd-c-form { display:flex; gap:8px; margin-top:12px; }
.bd-c-form input { flex:1; height:42px; padding:0 12px; box-sizing:border-box; border:1px solid var(--line);
border-radius:9px; font-size:14px; color:var(--fg); background:var(--field); }
.bd-c-form button { flex:none; border:0; background:var(--acc); color:#fff; border-radius:9px; padding:0 16px; font-weight:700; cursor:pointer; }
.bd-file-row { display:flex; align-items:center; gap:10px; margin:2px 0 8px; }
.bd-file-btn { border:1px solid var(--line); background:var(--field); color:var(--acc-d); border-radius:9px;
padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer; }
.bd-file-btn input { display:none; }
.bd-guest { display:flex; gap:8px; margin-bottom:8px; }
.bd-guest.hide { display:none; } /* .hide(=display:none)가 .bd-guest 뒤라 specificity로 확실히 숨김 */
.bd-guest input { flex:1; min-width:0; }
.bd-author { margin-bottom:8px; font-size:13px; font-weight:700; color:var(--acc-d); }
.bd-cc-row { display:flex; gap:6px; margin-bottom:6px; }
.bd-cc-row input { flex:1; min-width:0; height:38px; padding:0 10px; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--field); color:var(--fg); }
.bd-attached { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.bd-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:9px;
padding:5px 8px; font-size:12px; background:var(--card); max-width:100%; }
.bd-chip img { width:34px; height:34px; object-fit:cover; border-radius:6px; }
.bd-chip .nm { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-chip .x { border:0; background:transparent; color:#c0392b; cursor:pointer; font-size:14px; }
.bd-d-files { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.bd-d-files img { max-width:100%; border-radius:12px; border:1px solid var(--line); }
.bd-d-file-link { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
border-radius:9px; padding:9px 12px; font-size:13.5px; color:var(--acc-d); text-decoration:none; background:var(--card); }
.bd-m .bd-clip { color:var(--acc-d); }
.mark-btn.on { border-color:var(--acc); background:#eaf6ee; }
.mark-btn:active { transform:scale(.92); }
.mp-edit { flex:none; border:1px solid var(--line); background:var(--field); color:var(--acc-d); border-radius:9px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer; }
.mp-edit.mp-withdraw { color:var(--mut); background:transparent; border-color:transparent; padding:8px 6px; font-weight:500; font-size:12px; }
.mp-edit.mp-withdraw:hover { color:var(--danger,#c33); background:#fee; border-color:#fcc; }
.mp-menu { margin-top:14px; }
.mp-row { width:100%; display:flex; align-items:center; gap:10px; padding:16px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); margin-bottom:10px; font-size:15px; font-weight:700; color:var(--fg); cursor:pointer; }
.mp-row > span { display:inline-flex; align-items:center; line-height:1; }
.mp-row .lbl { flex:1; text-align:left; }
.mp-row .cnt { color:var(--mut); font-weight:600; font-size:13px; }
.mp-row .chev { flex:none; width:9px; height:9px; border-right:2.5px solid var(--mut); border-top:2.5px solid var(--mut); transform:rotate(45deg); margin-left:2px; }
.mp-row:active { background:var(--field); }
.mp-back { display:inline-flex; align-items:center; gap:8px; line-height:1; background:transparent; border:0; color:var(--acc-d); font-weight:800; font-size:15px; cursor:pointer; padding:6px 2px 10px; }
.mp-back .chev-l { flex:none; width:9px; height:9px; border-left:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg); margin-left:3px; }
.mp-go { flex:none; border:0; background:var(--field); color:var(--acc-d); border:1px solid var(--line); border-radius:8px; padding:6px 11px; font-size:12.5px; font-weight:700; cursor:pointer; margin-right:6px; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; overscroll-behavior:contain; }
.modal-bg.hide { display:none; } /* .hide 보다 뒤/구체적이라 확실히 숨김 */
body.modal-open { overflow:hidden; } /* 모달 열림 → 배경 페이지 스크롤 잠금(휠은 모달에만) */
.modal { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; width:100%; max-width:380px;
max-height:85vh; overflow-y:auto; overscroll-behavior:contain; } /* 내용 길면(자동예약·댓글 등) 모달 내부 스크롤 — 화면 밖 넘침 방지 */
#noticeModal #nmBody { max-height:none; overflow:visible; }
.poll { margin-top:16px; }
.poll-q { font-size:13px; font-weight:800; color:var(--fg); margin-bottom:9px; }
.poll-opt { position:relative; display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:0 12px; margin-bottom:8px; border:1px solid var(--line); border-radius:10px; background:var(--field); cursor:pointer; overflow:hidden; text-align:left; }
.poll-bar { position:absolute; left:0; top:0; bottom:0; width:0; background:#eaf6ee; z-index:0; transition:width .35s ease; }
.poll-opt.mine { border-color:var(--acc); }
.poll-opt.mine .poll-bar { background:#d6efdd; }
.poll-t { position:relative; z-index:1; flex:1; font-size:14px; font-weight:600; color:var(--fg); }
.poll-n { position:relative; z-index:1; font-size:12px; font-weight:800; color:var(--acc-d); }
.poll-tot { font-size:11.5px; color:var(--mut); margin-top:2px; }
#bdPollWrap .bd-poll-opt { width:100%; height:40px; padding:0 12px; margin-bottom:6px; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; background:var(--field); color:var(--fg); font-size:14px; }
.modal h3 { margin:0 0 4px; font-size:18px; }
.modal .su-btn { width:100%; height:50px; border-radius:12px; font-size:15px; font-weight:800; cursor:pointer; margin-top:12px; }
.modal .btn-ghost { color:var(--mut); }
.req-msg { width:100%; min-height:96px; padding:12px 14px; background:var(--field); border:1px solid var(--line); border-radius:12px; color:var(--fg); font-size:16px; font-family:inherit; resize:vertical; }
.req-msg:focus { outline:none; border-color:var(--acc-d); }
.req-cat { font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; background:#23314a; color:#9cc2ff; }
.reco-intro { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.reco-intro h2 { margin:0 0 4px; font-size:18px; display:flex; align-items:center; gap:7px; }
.reco-intro p { margin:0; font-size:12.5px; color:var(--mut); }
.theme-card { position:relative; border:1px solid var(--line); border-radius:14px; background:var(--card); padding:13px 14px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.theme-card .day:last-child { margin-bottom:0; }
.sched-reg { margin:0 0 6px; padding-right:96px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.sched-th { font-size:16px; line-height:1.5; margin:0 0 2px; padding-right:96px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.sched-th .sched-th-rest { margin-right:-96px; } /* 본문(가격/난이도) 줄은 버튼 아래라 전체 폭 사용 */
.sched-th > b { color:var(--fg); }
.sched-th .played-tag, .sched-th .rate { margin-left:6px; vertical-align:middle; }
.sched-th-rest { display:flex; align-items:center; gap:8px; margin-top:7px; }
.sched-th-rest .marks { margin-left:auto; }
/* 테마 구독 버튼 + 모달 요일칩 */
.sub-btn { flex:none; height:30px; padding:0 12px; font-size:12.5px; font-weight:700; cursor:pointer;
border:1px solid var(--line); border-radius:999px; background:var(--field); color:var(--acc-d); }
.sub-btn.on { background:var(--acc); color:#fff; border-color:var(--acc); }
/* 구독/자동예약 버튼은 가격·난이도 줄 아래 별도 줄(우측정렬)로 — 좁은 화면 깨짐 방지 */
.sched-btns { display:flex; gap:6px; margin-top:7px; justify-content:flex-end; flex-wrap:wrap; }
.sched-th .sched-btns { margin-right:-96px; }
.ab-btn { flex:none; height:30px; padding:0 12px; font-size:12.5px; font-weight:700; cursor:pointer;
border:1px solid #f0c088; border-radius:999px; background:#fff4e6; color:#c05600; }
.ab-btn.on { background:#f97316; color:#fff; border-color:#f97316; }
.ab-btn.warn { background:#fff0f0; color:var(--danger,#c33); border-color:var(--danger,#c33); }
.ab-btn.done { background:var(--field); color:var(--mut); border-color:var(--line); cursor:default; }
/* 이 테마 자동예약 대기 인원(경쟁 신호). 순위는 표시하지 않음 — 슬롯 겹침에 따라 달라져 오해 소지 */
.ab-cnt { flex:none; align-self:center; margin-left:5px; font-size:11.5px; font-weight:700;
color:#c05600; opacity:.85; white-space:nowrap; }
/* 항공: 클릭한 편 바로 아래 인라인 상세(하단 고정 패널 대체) */
.air-detail { padding:10px 8px 12px; background:var(--field); border-top:1px dashed var(--line); }
.air-row:hover { background:var(--field); }
/* 항공 노선별 달력 — 일별 최저가를 한눈에(싼 날 찾기) */
.cal-head { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:3px; }
.cal-head div { text-align:center; font-size:11px; font-weight:700; color:var(--mut); padding:2px 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-cell { min-height:52px; border:1px solid var(--line); border-radius:8px; padding:3px 2px;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:var(--card); }
.cal-cell.empty { border:0; background:transparent; }
.cal-cell.has { cursor:pointer; }
.cal-cell.has:hover { border-color:var(--acc); }
.cal-cell.lo { background:#e8f7ee; border-color:#1e8e4e; } /* 그 기간 최저가 */
.cal-d { font-size:11px; color:var(--mut); line-height:1.3; }
.cal-cell.sat .cal-d { color:#2f74d0; } .cal-cell.sun .cal-d { color:#c0392b; }
.cal-p { font-size:11.5px; font-weight:800; color:var(--acc-d); line-height:1.25; margin-top:1px; }
.cal-cell.lo .cal-p { color:#1e8e4e; }
.cal-none { font-size:10px; color:var(--mut); opacity:.6; margin-top:2px; }
.cal-mon { font-size:13px; font-weight:800; margin:10px 0 6px; }
.ab-in { height:42px; padding:0 12px; background:var(--field); border:1px solid var(--line); border-radius:9px; color:var(--fg); font-size:15px; box-sizing:border-box; }
/* 자동예약 입력: 항목명(라벨)을 왼쪽에 인라인 배치(줄바꿈 대신) */
.ab-field { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ab-field > label { flex:0 0 78px; margin:0; line-height:1.25; white-space:nowrap; }
.ab-field > .ab-in { flex:1 1 auto; width:auto; min-width:0; }
.ab-field .ab-hint { display:block; font-size:10.5px; color:var(--mut); font-weight:400; white-space:normal; margin-top:1px; }
/* 구독 모드 세그먼트(전체/평일·주말/요일별) */
.sub-mode { display:flex; gap:6px; }
.sub-mode-btn { flex:1; height:40px; border:1px solid var(--line); border-radius:10px; background:var(--field);
color:var(--mut); font-size:13.5px; font-weight:700; cursor:pointer; padding:0; }
.sub-mode-btn.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
/* 구독 모달 요일별 시간표 칩 */
.subtt-top { margin:0 0 10px; }
.subtt-all-top { width:100%; height:38px; border:1px dashed var(--acc); border-radius:10px; background:var(--field);
color:var(--acc-d); font-size:13px; font-weight:800; cursor:pointer; }
.subtt-g { margin:0 0 12px; }
.subtt-h { display:flex; align-items:center; gap:8px; margin:0 0 6px; }
.subtt-h b { font-size:14px; color:var(--acc-d); }
.subtt-all { margin-left:auto; flex:none; font-size:11.5px; padding:3px 9px; border:1px solid var(--line);
border-radius:8px; background:var(--field); color:var(--mut); cursor:pointer; font-weight:600; }
.subtt-chips { display:flex; flex-wrap:wrap; gap:6px; }
.subtt-chip { padding:7px 12px; font-size:13.5px; font-weight:700; border:1px solid var(--line); border-radius:10px;
background:var(--field); color:var(--fg); cursor:pointer; }
.subtt-chip.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.sched-sub { font-size:12px; color:var(--mut); margin:8px 0 12px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ryr-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.ryr { border:1px solid var(--line); background:var(--card); color:var(--mut); font-weight:700; font-size:13px; padding:6px 12px; border-radius:20px; cursor:pointer; }
.ryr.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.reco-cat { font-size:14px; font-weight:800; margin:18px 2px 9px; display:flex; align-items:center; gap:6px; }
.reco-card { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:13px; margin-bottom:8px; background:var(--card); }
.reco-card.win1 { border-color:var(--acc); background:linear-gradient(180deg,#f3fbf6,var(--card)); }
.reco-rank { font-size:21px; width:30px; text-align:center; flex:none; display:flex; align-items:center; justify-content:center; }
.reco-num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
border-radius:50%; background:var(--field); border:1px solid var(--line); color:var(--mut);
font-size:13px; font-weight:800; }
.reco-body { flex:1; min-width:0; }
.reco-theme { font-weight:800; font-size:15px; line-height:1.25; }
.reco-store { font-size:12px; color:var(--mut); margin-top:2px; }
.reco-rate { margin-top:4px; }
.reco-chip { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:20px; background:#ffece6; color:#c0392b; margin-left:4px; vertical-align:1px; }
.reco-pop-intro { background:linear-gradient(180deg,#fff6f3,var(--card)); border:1px solid var(--line); border-radius:14px; padding:13px 16px; margin-bottom:6px; }
.reco-pop-intro h2 { margin:0 0 3px; font-size:17px; display:flex; align-items:center; gap:7px; }
.reco-pop-intro p { margin:0; font-size:12px; color:var(--mut); }
.reco-region { margin-top:10px; width:100%; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--fg); font-size:14px; font-weight:600; cursor:pointer; }
.reco-sub-tabs { display:flex; gap:8px; margin-bottom:14px; }
.rsub { flex:1; height:44px; border:1px solid var(--line); background:var(--card); color:var(--mut);
border-radius:12px; font-size:13.5px; font-weight:800; cursor:pointer; padding:0 4px; }
.rsub.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.reco-go { flex:none; border:0; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:800; cursor:pointer; background:var(--acc); color:#fff; }
.reco-count { flex:none; font-size:20px; font-weight:900; color:var(--acc-d); min-width:40px; text-align:center; }
.noti-tip { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:10px; padding:10px 12px; font-size:12.5px; line-height:1.55; margin:10px 0 0; }
.noti-tip .acc { color:var(--acc-d); }
.pl-years { display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 10px; }
.pl-yr { height:34px; padding:0 14px; border:1px solid var(--line); background:var(--card); color:var(--mut); border-radius:18px; font-size:13px; font-weight:700; cursor:pointer; }
.pl-yr.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.mine-tabs { display:flex; gap:7px; margin:2px 0 10px; }
.mine-tab { flex:1; height:36px; border:1px solid var(--line); background:var(--card); color:var(--mut); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; }
.mine-tab.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.mine-clear { width:100%; height:36px; border:1px solid var(--danger); background:var(--card); color:var(--danger); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; margin-bottom:8px; }
.desc-link { cursor:pointer; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px; }
.desc-link .desc-ico { font-size:0.85em; }
.td-body { white-space:pre-wrap; word-break:break-word; font-size:14.5px; line-height:1.6; color:var(--fg); max-height:60vh; overflow-y:auto; margin:6px 0 12px; }
.td-img { display:block; width:100%; max-width:320px; height:auto; border-radius:10px; margin:0 auto 12px; }
.td-text { white-space:pre-wrap; word-break:break-word; }
.td-text img { display:block; max-width:100%; height:auto; border-radius:8px; margin:8px auto; }
.td-meta { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.td-mchip { font-size:12px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--field); color:var(--fg); border:1px solid var(--line); }
.cs-wrap.cs-disabled { opacity:.5; }
.cs-wrap.cs-disabled .cs-btn { cursor:not-allowed; }
.reco-na { flex:none; font-size:11.5px; color:var(--mut); text-align:center; max-width:74px; }
.reco-special { background:var(--card); border:1px solid var(--line); border-radius:13px; padding:6px 14px; }
.reco-sp-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.reco-sp-row:last-child { border-bottom:0; }
.reco-sp-cat { flex:none; width:74px; font-weight:800; color:var(--acc-d); font-size:12.5px; }
.reco-sp-main { flex:1; min-width:0; }
.reco-sp-go { flex:none; border:0; border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; cursor:pointer; background:var(--field); color:var(--acc-d); border:1px solid var(--line); }
.req-status { font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; display:inline-block; }
.req-status.new { background:#eef0f3; color:#5a6472; }
.req-status.wip { background:#fdeccf; color:#9a6a12; }
.req-status.done { background:#dcf4e3; color:#1c7a43; }
/* ===== 항공 결과 카드 ===== */
.airc { border:1px solid var(--line); border-radius:14px; padding:11px 13px; margin-bottom:9px;
background:var(--card); transition:border-color .12s, box-shadow .12s; }
.airc:hover { border-color:#cfd5dd; box-shadow:0 2px 10px rgba(20,25,35,.06); }
.airc.best { border-color:#bfe6cb; background:#fbfefc; }
.airc-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.airc-price { font-size:19px; font-weight:800; letter-spacing:-.3px; margin-left:auto; }
.airc.best .airc-price { color:var(--acc-d); }
.airc-won { font-size:13px; font-weight:700; }
/* 결과 카드: 가격 옆 예약 버튼 + 펼침/접힘 화살표 */
/* 노선별: 시간(가는/오는)을 날짜 아래 줄로, 우측에 가격+예약 */
.airc-timerow { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:6px; }
/* 가격+예약을 한 묶음으로 우측에 붙여 줄바꿈돼도 함께 이동(노선별 airc-top 과밀 대응) */
.airc-pe { margin-left:auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.airc-pe .airc-price { margin-left:0; }
.airc-go { display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:8px;
font-size:12px; font-weight:800; background:var(--acc); color:#fff; text-decoration:none; white-space:nowrap; }
.airc-go:hover { background:var(--acc-d); }
.airc-chevbar { display:flex; justify-content:center; margin-top:7px; }
.airc-chev { font-size:12px; color:var(--mut); transition:transform .18s; line-height:1; user-select:none; }
.air-row.open .airc-chev { transform:rotate(180deg); }
.airc-tag { font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px;
background:var(--field); color:#4b5563; }
.airc-tag.hi { background:#e8f6ed; color:var(--acc-d); }
.airc-tag.warn { background:#fdeccf; color:#9a6a12; }
.airc-tag.hol { background:#ffe9ec; color:#c0143c; }
/* 연도 포함 강조 날짜 뱃지 */
.airc-date { font-size:14px; font-weight:800; letter-spacing:-.2px; color:var(--acc-d);
background:#eef6f0; border-radius:8px; padding:2px 9px; white-space:nowrap; }
.airc-date .yr { font-size:11px; font-weight:700; color:var(--mut); }
.airc-date .wd { font-size:12px; font-weight:700; color:var(--mut); }
.airc-date .wd.sat { color:var(--blue); } .airc-date .wd.sun { color:#c0392b; }
.airc-best { font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px;
background:var(--acc); color:#fff; }
/* 구간(가는/오는) 한 줄 */
.airl { margin-top:7px; } /* 가는/오는 라벨 제거 → 단일 열(위=가는, 아래=오는 순서로 구분) */
.airl-body { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-width:0; }
.airl-date { font-size:12px; font-weight:700; color:var(--mut); min-width:62px; }
.airl-t { font-size:14px; font-weight:800; letter-spacing:-.2px; }
.airl-ap { font-size:12px; font-weight:700; color:#4b5563; }
/* 소요시간 양옆 화살표 — flex 로 늘어나 너무 길던 걸 짧은 대시로 고정(국내선용) */
.airl-line { flex:0 0 auto; width:22px; height:1px; background:var(--line); position:relative; }
/* 국제선 구간: 출발/도착을 세로로 쌓기 */
.airl-od { display:flex; flex-direction:column; gap:2px; }
.airl-pt { display:flex; align-items:baseline; gap:6px; }
.airl-line::after { content:''; position:absolute; right:-1px; top:-2.5px;
border-left:5px solid var(--line); border-top:3px solid transparent;
border-bottom:3px solid transparent; }
.airl-dur { font-size:10.5px; color:var(--mut); white-space:nowrap; }
.airl-car { font-size:12px; color:var(--mut); }
.airc-sub { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px;
font-size:12px; color:var(--mut); }
.airc-sub b { color:var(--fg); font-weight:700; }
.airc-spark { margin-left:auto; display:inline-flex; align-items:center; }
.airc-foot { display:flex; align-items:flex-start; gap:10px; margin-top:9px; }
.airc-foot .airc-book { margin-left:0; } /* 소스별 버튼 2개는 나란히 */
.airc-srcbox { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.airc-seat { font-size:11px; font-weight:600; color:var(--mut); white-space:nowrap; }
.airc-book { margin-left:auto; display:inline-flex; align-items:center; gap:4px; height:32px;
padding:0 13px; border-radius:9px; font-size:12.5px; font-weight:800;
background:var(--acc); color:#fff; text-decoration:none; border:0; white-space:nowrap; }
.airc-book:hover { background:var(--acc-d); }
.airc-book.ghost { background:var(--field); color:var(--acc-d); border:1px solid var(--line); }
.airc-book.ghost:hover { background:#eaf5ee; }
/* ===== 기간 선택 달력(출발일 범위) ===== */
.rgfield { width:100%; height:46px; padding:0 14px; border:1px solid var(--line); background:var(--field);
border-radius:12px; font-size:14px; font-weight:700; color:var(--fg); cursor:pointer;
display:flex; align-items:center; gap:8px; font-family:inherit; text-align:left; }
.rgfield:hover { border-color:#cfd5dd; }
.rgfield.on { border-color:var(--acc); background:#f4fbf6; }
.rgfield .rgf-ph { color:var(--mut); font-weight:600; }
.rgfield .rgf-x { margin-left:auto; color:var(--mut); font-size:17px; line-height:1; padding:0 2px; }
.rgcal { border:1px solid var(--line); border-radius:14px; padding:12px; margin-top:8px; background:var(--card); }
.rgcal-hd { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rgcal-nav { width:32px; height:32px; border:1px solid var(--line); background:var(--card); border-radius:9px;
font-size:15px; font-weight:800; color:var(--fg); cursor:pointer; line-height:1; }
.rgcal-nav:disabled { opacity:.35; cursor:default; }
.rgcal-ym { flex:1; text-align:center; font-size:14px; font-weight:800; }
.rgcal-hint { font-size:12px; color:var(--acc-d); font-weight:700; margin-bottom:6px; text-align:center; }
.rgcal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.rgcal-w { text-align:center; font-size:11px; color:var(--mut); padding:2px 0 4px; }
.rgcal-w.sun { color:#c0392b; } .rgcal-w.sat { color:var(--blue); }
.rgcal-d { height:38px; border:0; background:transparent; border-radius:9px; font-size:13px; font-weight:600;
color:var(--fg); cursor:pointer; font-family:inherit; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:1px; padding:0; }
.rgcal-d:disabled { color:#c9ced6; cursor:default; }
.rgcal-d.mid { background:#e8f6ed; border-radius:0; }
.rgcal-d.edge { background:var(--acc); color:#fff; font-weight:800; }
.rgcal-d.edge.s { border-radius:9px 0 0 9px; } .rgcal-d.edge.e { border-radius:0 9px 9px 0; }
.rgcal-d.edge.only { border-radius:9px; }
.rgcal-d .rgp { font-size:10px; font-weight:700; color:var(--acc-d); line-height:1; }
.rgcal-d.edge .rgp { color:#dff3e6; }
.rgcal-d.mid .rgp { color:var(--acc-d); }
.rgcal-ft { display:flex; gap:8px; margin-top:10px; }
.rgcal-ft button { flex:1; height:38px; border-radius:10px; font-size:13px; font-weight:800;
cursor:pointer; font-family:inherit; }
.rgcal-reset { border:1px solid var(--line); background:var(--card); color:var(--mut); }
.rgcal-done { border:0; background:var(--acc); color:#fff; }
/* 상세(가격추이) 패널은 카드 안쪽에서 좌우 끝까지 붙이고 아래 모서리를 맞춘다 */
.airc .air-detail { margin:10px -13px -11px; padding:10px 13px 12px; border-radius:0 0 13px 13px; }
.airc .air-row:hover { background:transparent; } /* 카드 자체 hover 로 충분 */
@media (max-width:420px){ .airl-date { min-width:0; } .airc-price { font-size:17px; } }