/* ===== 테마: 애플 벤토 (2026-11-02 사용자 선택, 시안 10종 중 9번)
   index.html의 <html data-skin="s9" class="light">로 켠다. 배치·기능은 그대로 두고 글꼴·버튼·카드·그림자·바탕만 바꾼다.
   html[data-skin=x][data-skin] = 계열(메디컬/이공계) 색 규칙보다 우선. 공통 규칙은 --sk-* 변수로 조절. */
html[data-skin]{--sk-font:"Pretendard Variable",Pretendard,sans-serif;--sk-hw:800;--sk-ls:-.03em;--sk-h1:36px;--sk-rb:8px;--sk-rc:12px;--sk-rcomp:12px;--sk-rtag:6px;
  --sk-shadow:none;--sk-pri-shadow:none;--sk-card-bg:var(--raise);--sk-card-border:var(--line2)}
html[data-skin] body{font-family:var(--sk-font)!important;letter-spacing:-.01em}
html[data-skin] .main::before{display:none}
html[data-skin] .home h1{font-size:var(--sk-h1)!important;font-weight:var(--sk-hw);letter-spacing:var(--sk-ls);line-height:1.25}
html[data-skin] h2,html[data-skin] .bt b,html[data-skin] .val b,html[data-skin] .tp-title,html[data-skin] .startpick .sp b,html[data-skin] .modal h2{font-weight:var(--sk-hw);letter-spacing:var(--sk-ls)}
html[data-skin] .btn{border-radius:var(--sk-rb)!important;font-weight:700}
html[data-skin] .btn.pri,html[data-skin] .send{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:var(--sk-pri-shadow)!important}
html[data-skin] .new{border-radius:var(--sk-rb)!important;background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:var(--sk-pri-shadow)!important}
html[data-skin] .new .plus{color:var(--accent-ink)!important}
html[data-skin] .val,html[data-skin] .bhead,html[data-skin] .cons,html[data-skin] .modal,html[data-skin] .startpick .sp,html[data-skin] .repcard,html[data-skin] .inflow,html[data-skin] .md figure.chart,html[data-skin] .panel .notice,html[data-skin] .topic{border-radius:var(--sk-rc)!important;box-shadow:var(--sk-shadow)!important}
html[data-skin] .val,html[data-skin] .bhead,html[data-skin] .cons,html[data-skin] .startpick .sp,html[data-skin] .repcard{background:var(--sk-card-bg)!important;border-color:var(--sk-card-border)!important}
html[data-skin] .val::before{display:none}
html[data-skin] .composer{border-radius:var(--sk-rcomp)!important;box-shadow:var(--sk-shadow)!important}
html[data-skin] .composer:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)!important;border-color:var(--accent)!important}
html[data-skin] .tag,html[data-skin] .chip,html[data-skin] .dtag,html[data-skin] .fold-btn{border-radius:var(--sk-rtag)!important}
html[data-skin] .cav{border-radius:var(--sk-rb)!important;box-shadow:none!important}
html[data-skin] .cav.n,html[data-skin] .cons .cava{background:var(--accent);color:var(--accent-ink)}
html[data-skin] .eyebrow{font-family:var(--sk-font)!important;font-weight:700;letter-spacing:.02em}
html[data-skin] .seg button[aria-pressed="true"]::after{box-shadow:none}
html[data-skin] .hist button[aria-current="true"]{background:var(--accent-soft)!important;border-left-color:var(--accent)!important}

/* 밝은 테마 공통 */
html[data-skin].light{color-scheme:light;--pri:#111;--pri-ink:#fff;--ok:#15803D;--ok-soft:#DCFCE7;--warn:#B45309;--warn-soft:#FEF3C7;--bad:#B91C1C;--bad-soft:#FEE2E2;--grid:transparent}
html[data-skin].light .eyebrow{display:inline-block;background:var(--accent-soft);color:var(--accent-text);padding:5px 12px;border-radius:var(--sk-rtag)}

/* 애플 벤토: 밝은 회색 바탕, 테두리 없는 큰 둥근 흰 카드, 큰 제목, 파란 강조 */
html[data-skin="s9"][data-skin]{--bg:#F5F5F7;--side:#FBFBFD;--sunk:#F5F5F7;--raise:#FFFFFF;--line:#E8E8ED;--line2:#D2D2D7;--ink:#1D1D1F;--muted:#515154;--faint:#6E6E73;--accent:#0071E3;--accent-ink:#FFFFFF;--accent-soft:#E8F1FC;--accent-text:#0066CC;--ai:#0071E3;--ai-soft:#E8F1FC;
  --sk-hw:700;--sk-ls:-.04em;--sk-h1:44px;--sk-rb:12px;--sk-rc:22px;--sk-rcomp:18px;--sk-rtag:8px;--sk-card-border:transparent;--sk-shadow:0 2px 12px rgba(0,0,0,.04)}
html[data-skin="s9"] .home .sub{font-size:17px}
@media (max-width:900px){html[data-skin="s9"] .home h1{font-size:28px!important}}

/* 2026-11-02 글씨가 얇고 흐려 보인다는 의견: 기본 굵기를 올리고 회색 글씨를 진하게 */
html[data-skin="s9"][data-skin]{--ink:#111113;--muted:#3A3A3E;--faint:#5A5A60}
html[data-skin="s9"] body{font-weight:500;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
html[data-skin="s9"] .md,html[data-skin="s9"] .cmt .txt,html[data-skin="s9"] .home .sub{font-weight:500}
html[data-skin="s9"] b,html[data-skin="s9"] strong,html[data-skin="s9"] .cname{font-weight:700}
html[data-skin="s9"] .md h1,html[data-skin="s9"] .md h2,html[data-skin="s9"] .md h3{font-weight:800}

/* 메디컬 탭은 청록, 이공 탭은 파랑. 탭을 누르면 버튼·강조색·그림 색이 같이 바뀐다. (로고는 브랜드 색 그대로) */
html[data-skin="s9"][data-track="med"]{--accent:#0A8468;--accent-ink:#FFFFFF;--accent-soft:#E6F4EF;--accent-text:#08745B;--ai:#0A8468;--ai-soft:#E6F4EF}
.claim{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.claim summary{cursor:pointer;list-style:none;width:max-content}
.claim summary::-webkit-details-marker{display:none}
.claim .form{margin-top:10px;display:grid;gap:10px}
.vlines li{word-break:keep-all;text-wrap:pretty}
.val .vlines li,.val .vlines li:last-child{font-size:15.5px;line-height:1.6;color:color-mix(in srgb,var(--ink) 82%,var(--bg));margin-top:0}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.side-bottom .lab{line-height:1.6}
.side-bottom .lab-code{display:block;white-space:nowrap}
/* 주제 고르기 막대 (입력창 위) */
.pickbar{display:grid;gap:8px;width:100%;max-width:740px;margin:0 auto 10px;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--raise);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.pickbar.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 2px 10px rgba(0,0,0,.04)}
.pickbar p{margin:0}
.pb-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.pb-no{font-size:12px;font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:6px;padding:2px 6px;flex:none}
.pb-title{flex:1;min-width:0;font-size:15px}
.pb-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-desc{flex:1;min-width:160px}
.pickbar .btn.pri{padding:10px 22px}