/* 검색용 정적 페이지(scripts/build.mjs가 생성) 스타일. 색상 토큰은 index.html과 같아요. */
/* 한글 명조: 부크크 명조 Bold (ⓒ부크크 · 눈누에서 배포하는 웹폰트를 수정 없이 그대로 사용) */
@font-face{font-family:'BookkMyungjo';font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-weight:400;font-display:optional;src:url(/fonts/dm-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-weight:500;font-display:optional;src:url(/fonts/dm-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#E9E2D3; --surface:#FBF7EE; --surface2:#F1E9D8; --ink:#221D16; --mut:#8C8171; --line:#DBD0BB;
  --accent:#B3492E; --ice:rgba(255,255,255,.4); --glow:18%; --ok:#2F6B45;
  --serif-en:'Instrument Serif','Times New Roman','BookkMyungjo','AppleMyungjo','Nanum Myeongjo',serif;
  --serif-ko:'BookkMyungjo','AppleMyungjo','Nanum Myeongjo','Batang',serif;
  --sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,'Pretendard Variable',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17110C; --surface:#221A13; --surface2:#2C221A; --ink:#F1E6D4; --mut:#A89A85; --line:#382B20;
    --accent:#DFA35D; --ice:rgba(255,255,255,.14); --glow:10%; --ok:#8CC79A;
  }
}
:root[data-theme="dark"]{
  --bg:#17110C; --surface:#221A13; --surface2:#2C221A; --ink:#F1E6D4; --mut:#A89A85; --line:#382B20;
  --accent:#DFA35D; --ice:rgba(255,255,255,.14); --glow:10%; --ok:#8CC79A;
}
*{box-sizing:border-box}
body{margin:0;padding-inline:clamp(16px,4vw,40px);color:var(--ink);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse 900px 520px at 88% -8%, color-mix(in srgb,var(--accent) var(--glow),transparent), transparent 62%), var(--bg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1080px;margin-inline:auto;padding-block:20px 56px}

.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.brand{font:400 46px/.9 var(--serif-en);letter-spacing:-.035em;text-decoration:none}
.tabs{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tabs a{padding:6px 0;border-bottom:2px solid transparent;font:500 14px var(--sans);color:var(--mut);text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current]{color:var(--ink);border-color:var(--accent)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;font:400 12px var(--mono);color:var(--mut)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

.eyebrow{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
h1{margin:12px 0 0;font:700 clamp(32px,5vw,46px)/1.2 var(--serif-ko);letter-spacing:-.01em;word-break:keep-all;text-wrap:balance}
/* 항목 제목은 앱 상세창(.phead)과 같은 모양: 영문(위) · 한글(아래) */
h1.title{margin-top:8px;font:700 32px/1.2 var(--serif-en);letter-spacing:-.015em}
h1.title .en{display:block}
h1.title .ko{display:block;margin-top:4px;font:400 15px/1.6 var(--sans);letter-spacing:0;color:var(--mut)}
.aka{margin:10px 0 0;font-size:13.5px;color:var(--mut)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{padding:2px 9px;border:1px solid var(--line);border-radius:2px;font-size:12.5px;color:var(--mut)}
.lead{margin:18px 0 0;font-size:16.5px;text-wrap:pretty;word-break:keep-all}
.note{margin:10px 0 0;font-size:14px;color:var(--mut)}

.item{display:grid;gap:28px;margin-top:22px}
@media (min-width:860px){
  .item{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:52px;align-items:start}
  .media{position:sticky;top:20px}
}
.media{aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;color:var(--ink);background:color-mix(in srgb,var(--liq,#ccc) 16%,var(--surface2))}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media svg{height:70%;width:auto}

.spec{display:grid;grid-template-columns:1fr 1fr;margin:22px 0 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.spec div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec .wide{grid-column:1/-1}
.spec dt{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.spec dd{margin:6px 0 0;font-size:15px;word-break:keep-all}
.sec{margin-top:34px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.sec-h h2{margin:0;font:700 17px/1.4 var(--sans)}
.prog{font:400 12px var(--mono);color:var(--mut);letter-spacing:.04em}
.ings{list-style:none;margin:6px 0 0;padding:0}
.ings li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.sw{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.sw.none{background:transparent;box-shadow:none;border:1px solid var(--mut)}
.amt{font:500 13px var(--mono);text-align:right;white-space:nowrap}
.amt i{margin-left:8px;font-style:normal;font-weight:400;color:var(--mut)}
.steps{counter-reset:s;list-style:none;margin:6px 0 0;padding:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:13px 0;border-bottom:1px solid var(--line);text-wrap:pretty;word-break:keep-all}
.steps li::before{content:counter(s,decimal-leading-zero);padding-top:3px;font:500 12px var(--mono);color:var(--accent)}
.cta{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:14px 20px;background:var(--ink);color:var(--bg);font-weight:500;text-decoration:none}
.cta:hover{opacity:.9}

.more{margin-top:60px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:24px 20px;margin-top:18px}
.card{display:flex;flex-direction:column;text-decoration:none}
.cthumb{aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;color:var(--ink);background:color-mix(in srgb,var(--liq,#ccc) 12%,var(--surface2))}
.cthumb img{width:100%;height:100%;object-fit:cover;display:block}
.cthumb svg{height:70%;width:auto}
/* 카드 이름은 앱 목록 카드(.tile)와 같은 모양: 선 · 영문 · 한글 */
.card .cbody{display:block;padding-top:14px;border-top:1px solid var(--ink)}
.cname{display:block;font:700 21px/1.25 var(--serif-en);letter-spacing:-.01em}
.cko{display:block;margin-top:3px;font-size:13px;color:var(--mut)}
.card:hover .cname{text-decoration:underline;text-underline-offset:3px}
.alllinks{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.alllinks a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:2px;font-size:13.5px;text-decoration:none}
.alllinks a:hover{border-color:var(--ink)}
.alllinks a[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.alllinks .n{margin-left:4px;font:400 11px var(--mono);color:var(--mut)}

/* 조주기능사 필기 */
.hero{max-width:720px;margin-top:30px}
.qlist{list-style:none;margin:0;padding:0}
.qi{padding:22px 0;border-bottom:1px solid var(--line)}
.qq{margin:0;font:700 17px/1.65 var(--serif-ko);word-break:keep-all;text-wrap:pretty}
.qn{margin-right:10px;font:500 12px var(--mono);letter-spacing:.06em;color:var(--accent)}
.opts{list-style:none;display:grid;gap:4px;margin:12px 0 0;padding:0;font-size:15px;word-break:keep-all}
.opts .mk{margin-right:10px;font-family:var(--mono);color:var(--mut)}
.qi:has(details[open]) .opts .ok{color:var(--ok);font-weight:700}
.qi:has(details[open]) .opts .ok .mk{color:var(--ok)}
details{margin-top:12px}
summary{display:inline-block;cursor:pointer;font:500 13.5px var(--sans);color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ans{margin:10px 0 0;font-weight:700;color:var(--ok)}
.ex{margin:4px 0 0;font-size:14.5px;color:var(--mut);text-wrap:pretty;word-break:keep-all}

.subtypes{list-style:none;margin:6px 0 0;padding:0}
.subtypes li{padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--mut);text-wrap:pretty;word-break:keep-all}
.subtypes li b{display:block;margin-bottom:3px;font:500 15px var(--sans);color:var(--ink)}
a.tag{text-decoration:none}
a.tag:hover{border-color:var(--ink);color:var(--ink)}
.spec dd a{text-underline-offset:3px}
a.prog{text-decoration:none}
a.prog:hover{color:var(--ink)}
.qthumb span{font:400 clamp(56px,9vw,88px)/1 var(--serif-en);letter-spacing:-.03em;color:var(--accent)}
.tag.xtag{border-color:var(--accent);color:var(--accent)}
.exing{list-style:none;margin:10px 0 0;padding:0}
.exing li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.exing .amt{font:500 13px var(--mono);text-align:right;white-space:nowrap}
.src{margin:10px 0 0;font-size:12.5px;color:var(--mut);text-wrap:pretty}
/* 문의하기 · 개인정보처리방침 */
.form{display:grid;gap:18px;max-width:640px;margin-top:28px}
.field label{display:block;margin-bottom:8px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:2px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.field textarea{min-height:180px;resize:vertical;line-height:1.6}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{padding:16px 18px;background:var(--surface2);border:1px solid var(--line)}
.consent p{margin:0}
.consent .ptable{margin:10px 0}
.check{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:500;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}
button.cta{border:0;cursor:pointer;font:inherit;font-weight:500;margin-top:0}
button.cta:disabled{opacity:.5;cursor:default}
.form-status{margin:0;font-size:14.5px;min-height:1.5em}
.form-status.ok{color:var(--ok)}
.form-status.err{color:var(--accent)}
.ptable{width:100%;margin-top:12px;border-collapse:collapse;font-size:14px}
.ptable th,.ptable td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top;word-break:keep-all}
.ptable th{width:1%;white-space:nowrap;font-weight:500;color:var(--mut);background:var(--surface2)}
.ptable thead th{width:auto}
.plist{margin:12px 0 0;padding-left:20px;font-size:15px}
.plist li{margin:6px 0;word-break:keep-all}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:64px;padding-top:16px;border-top:1px solid var(--line);font:400 12px/1.6 var(--mono);color:var(--mut)}