/* Hallmark · redesign · genre: modern-minimal · theme: custom (vibe: "공신력 있는 금 거래소, 다크") · anchor hue: gold 82 / navy 258
 * 2026-10-13 대표님: 형광 노랑·포스터체(블랙한산스)·그라데이션 버튼 → 다크 남색 + 금색 포인트. 클래스 이름은 그대로(7개 페이지 공용)
 * 어르신 기준 유지: 본문 18px+, 누르는 곳 52px+ */
:root{color-scheme:dark;
  --bg:oklch(17% .02 258);--card:oklch(21% .022 258);--line:oklch(31% .022 258);--tint:oklch(25% .03 258);
  --fg:oklch(95% .006 250);--sub:oklch(76% .014 250);
  --gold:oklch(80% .1 82);--goldfg:oklch(18% .02 258);--silver:oklch(80% .01 250);--warn:oklch(68% .15 28);
  --b1:var(--gold);--b1fg:var(--goldfg);--b2:var(--card);--b2fg:var(--fg);--hl:var(--gold);--hlfg:var(--goldfg);
  --f-body:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;--f-head:var(--f-body)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:19px/1.7 var(--f-body);word-break:keep-all;overflow-wrap:break-word;overflow-x:clip}
main{max-width:640px;margin:0 auto;padding:20px 16px 48px}
h1,h2,.btn,.res .big,.nav a,.links a,.cell b,.rowline b,summary{font-family:var(--f-head);letter-spacing:-.02em}
h1{font-size:31px;line-height:1.35;font-weight:800;margin:10px 0 10px;min-width:0;overflow-wrap:anywhere}
h2{font-size:23px;line-height:1.4;font-weight:800;margin:40px 0 10px}
.sub{font-size:18px;color:var(--sub);margin:0 0 20px;text-wrap:balance}
p,li,.hint,details p{text-wrap:pretty}
.back{display:inline-block;min-height:44px;line-height:44px;font-size:17px;color:var(--sub);text-decoration:none}
mark{background:none;color:var(--fg);font-weight:800;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
b{font-weight:800}
.red{color:var(--fg);box-shadow:inset 0 -3px 0 var(--gold)}
.btns{display:grid;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 14px;border-radius:12px;background:var(--b2);color:var(--b2fg);font-size:20px;font-weight:700;text-decoration:none;text-align:center;border:1px solid var(--line);cursor:pointer;width:100%;font-family:inherit;transition:background-color .15s,border-color .15s}
.btn:hover{border-color:var(--sub)}
.btn:active{transform:translateY(1px)}
.btn.main{background:var(--b1);color:var(--b1fg);border-color:var(--b1)}
.btn.main:hover{background:oklch(84% .1 82)}
.btn.gold{background:var(--b1);color:var(--b1fg);border-color:var(--b1)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hint{font-size:16px;color:var(--sub);margin:10px 0 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.key{border-left:3px solid var(--gold);background:var(--tint);padding:14px 16px;border-radius:0 10px 10px 0;margin:14px 0;font-size:18px}
.info{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin:14px 0}
.info svg{display:block;width:100%;height:auto}
.info figcaption{font-size:15px;color:var(--sub);text-align:center;margin-top:6px}
svg text{font-family:var(--f-body);fill:var(--fg)}
.t-inv{fill:var(--b2fg)}.t-hl{fill:var(--hlfg)}.t-b1{fill:var(--b1fg)}
label{display:block;font-size:18px;font-weight:700;margin:14px 0 6px}
input,select{width:100%;min-height:56px;font-size:21px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);font-variant-numeric:tabular-nums}
input:focus,select:focus{border-color:var(--gold)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.res{margin-top:18px;padding:16px;border-radius:12px;background:var(--card);border:1px solid var(--gold)}
.res .big{font-size:30px;font-weight:800;margin:0;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cell{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.cell .no{margin-bottom:6px}
.cell b{display:block;font-size:18px;line-height:1.4}
.cell span{display:block;color:var(--sub);font-size:16px;line-height:1.5;margin-top:4px}
.no{width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--goldfg);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.rowline{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.rowline:last-child{border-bottom:0}
.rowline b{display:block;font-size:19px}
.rowline span{color:var(--sub);font-size:17px}
table{width:100%;border-collapse:collapse;font-size:17px;margin:10px 0;font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--line);padding:11px 8px;text-align:left;vertical-align:top}
th{color:var(--sub);font-size:15px;font-weight:600}
details{border-bottom:1px solid var(--line);padding:12px 0}
summary{cursor:pointer;font-weight:700;font-size:19px;min-height:44px}
details p{margin:6px 0 0;color:var(--sub);font-size:17px}
.ad{margin:44px 0;text-align:center;overflow:hidden;max-width:100%}
.ad .adl{font-size:13px;color:var(--sub);margin:0 0 6px;letter-spacing:.1em}
.links{display:grid;gap:8px;margin-top:20px}
.links a{display:flex;align-items:center;min-height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;color:var(--fg);text-decoration:none;font-size:18px;font-weight:600;background:var(--card)}
.links a:hover,.nav a:hover{border-color:var(--sub)}
.nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:40px}
.nav a{display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--line);border-radius:10px;color:var(--fg);text-decoration:none;font-size:17px;font-weight:600;background:var(--card);white-space:nowrap}
.chart{display:flex;gap:36px;justify-content:center;align-items:flex-end;height:230px;padding:8px 0 0}
.col{display:flex;flex-direction:column-reverse;width:104px}
.col .s-price{height:140px;background:var(--silver)}
.col .s-vat{height:14px;background:var(--gold)}
.col .s-margin{height:24px;background:var(--warn)}
.col .s-gap{height:38px;border:2px dashed var(--warn);border-bottom:0}
.clabels{display:flex;gap:36px;justify-content:center;margin-top:8px;font-weight:700;font-size:20px}
.clabels span{width:104px;text-align:center}
.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:18px;font-weight:600}
.legend li{display:flex;align-items:center;gap:10px}
.legend i{width:20px;height:20px;border-radius:4px;flex:none;display:inline-block}
.legend .d{background:transparent;border:2px dashed var(--warn)}
.prio{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.prio li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
.prio .no{width:40px;height:40px;font-size:19px;background:var(--card);color:var(--fg);border:1px solid var(--line)}
.prio .hot .no{background:var(--gold);color:var(--goldfg);border-color:var(--gold)}
.prio b{display:block;font-size:19px;line-height:1.35}
.prio span.d{display:block;color:var(--sub);font-size:16px}
.prio .bar{display:block;height:8px;border-radius:4px;background:var(--line);margin-top:8px}
.prio .hot .bar{background:var(--gold)}
.mock th,.mock td{text-align:center;font-size:18px}
.mock tr.hl td,.mock tr.hl th{background:var(--tint);color:var(--fg);font-weight:800;box-shadow:inset 0 -2px 0 var(--gold)}
.big2{font-size:28px;font-weight:800;margin:0;font-variant-numeric:tabular-nums}
footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--sub)}
footer p{margin:6px 0}
a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}
/* 10/13 도구 페이지(돌반지·내 금 합계·각인): 개수 ± 버튼 */
.step{display:flex;align-items:center;gap:6px;flex:none}
.step button{width:52px;height:52px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:26px;line-height:1;cursor:pointer;font-family:inherit}
.step button:hover{border-color:var(--sub)}
.step output{min-width:36px;text-align:center;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.rowline .no{width:32px;height:32px;font-size:16px}
.item{border:1px solid var(--line);border-radius:12px;padding:4px 14px 14px;margin-bottom:10px}
.item .x{display:block;margin:0 -6px -10px auto;min-height:44px;padding:0 6px;background:none;border:0;color:var(--sub);font-size:16px;cursor:pointer;font-family:inherit}
.btn.add{border-style:dashed}
/* 10/15 메인: 색 있는 버튼·질문형 링크·고민 상자 */
.btn.alt{background:oklch(88% .012 250);color:oklch(20% .02 258);border-color:oklch(88% .012 250)}
.btn.alt:hover{background:oklch(93% .012 250)}
.btn.chk{background:var(--warn);color:oklch(18% .03 28);border-color:var(--warn)}
.btn.chk:hover{background:oklch(73% .15 28)}
.pts{padding-left:0;list-style:none;display:grid;gap:10px;margin:14px 0}
.pts li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:18px;line-height:1.6}
.pts b{display:block;color:var(--gold);font-size:17px}
.links.q a{background:var(--tint);border-color:oklch(45% .06 82);font-weight:700}
.links.q a::before{content:"Q";flex:none;width:28px;height:28px;margin-right:10px;border-radius:50%;background:var(--gold);color:var(--goldfg);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.links.shop a{border-color:oklch(55% .12 28)}
.warnbox{margin-top:44px;padding:4px 16px 18px;border:2px solid var(--warn);border-radius:16px;background:var(--tint)}
.warnbox h2{margin-top:18px}
.tlinks{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:40px;font-size:16px}
.tlinks a{color:var(--sub);min-height:40px;display:inline-flex;align-items:center}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
/* 10/15 하단 메뉴: 눈에 띄게 */
.nav::before{content:"다른 정보도 확인하세요";grid-column:1/-1;font-size:20px;font-weight:800;margin-bottom:4px}
.nav a{background:var(--tint);border-color:oklch(55% .09 82);color:var(--gold)}
.nav a:nth-child(1){background:var(--gold);color:var(--goldfg);border-color:var(--gold)}
.nav a:nth-child(2){background:oklch(88% .012 250);color:oklch(20% .02 258);border-color:oklch(88% .012 250)}
/* 10/15 실시간 시세 사이트 목록 */
.src li{display:block}
.src .go{display:flex;align-items:center;min-height:52px;margin-top:10px;padding:8px 14px;border-radius:10px;background:var(--gold);color:var(--goldfg);font-weight:800;font-size:17px;text-decoration:none}