/* ===== Accessibility ===== */
.skip-link{position:absolute;top:-40px;left:0;background:var(--green);color:#fff;padding:8px 16px;z-index:100;font-size:14px;border-radius:0 0 8px 0;transition:top .2s}
.skip-link:focus{top:0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
select:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Common page header ===== */
.page-head{padding:30px 0 8px;display:flex;align-items:center;gap:12px}
.back-btn{font-family:inherit;font-size:14px;color:var(--ink-soft);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 15px;cursor:pointer;transition:.15s}
.back-btn:hover{background:#ece9df;color:var(--ink)}
h2.sec{font-family:'Gowun Dodum',sans-serif;font-weight:400;font-size:26px}
.sec-desc{color:var(--ink-soft);font-size:15px;margin:4px 0 24px}

/* ===== Cards / inputs ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field .hint{font-size:12px;color:var(--ink-soft);font-weight:400;margin-top:5px}
select,input[type=number]{width:100%;font-family:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fbfaf6;color:var(--ink)}
select:focus,input:focus{outline:none;border-color:var(--green);background:#fff}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:90px;font-family:inherit;font-size:14px;font-weight:500;padding:11px 8px;border:1px solid var(--line);border-radius:10px;background:#fbfaf6;color:var(--ink-soft);cursor:pointer;transition:.15s}
.seg button.on{background:var(--green);color:#fff;border-color:var(--green)}
.cond-hint:not(:empty){color:var(--amber);font-weight:500;margin-top:6px}

/* ===== Tab bar ===== */
.tab-bar{display:flex;gap:8px;margin:0 0 24px}
.tab-bar button{flex:0 0 auto;min-width:110px;font-family:inherit;font-size:14px;font-weight:500;padding:11px 20px;border:1px solid var(--line);border-radius:10px;background:#fbfaf6;color:var(--ink-soft);cursor:pointer;transition:.15s}
.tab-bar button.on{background:var(--green);color:#fff;border-color:var(--green)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ===== Result card ===== */
.result{background:var(--green-soft);border:none}
.result .big{font-family:'Gowun Dodum',sans-serif;font-size:44px;line-height:1.1;color:var(--green);margin:4px 0}
.result .big small{font-size:17px;color:var(--ink-soft);font-family:'Noto Sans KR'}
.res-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.res-row:last-child{border-bottom:none}
.res-row span:first-child{color:var(--ink-soft)}
.res-row span:last-child{font-weight:700}
.alloc{margin-top:14px;padding:13px 15px;background:#fff;border-radius:10px;font-size:13px;color:var(--ink-soft);border:1px solid var(--line)}
.alloc b{color:var(--green)}

/* ===== Breakdown bars ===== */
.brk{margin-top:6px}
.brk-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.brk-row:last-child{border-bottom:none}
.brk-name{flex:0 0 96px;font-size:13px}
.brk-bar{flex:1;height:8px;background:#edeadf;border-radius:999px;overflow:hidden}
.brk-fill{height:100%;background:var(--green);border-radius:999px}
.brk-val{flex:0 0 64px;text-align:right;font-size:13px;font-weight:700}

/* ===== Formula ===== */
.formula{margin-top:24px;font-size:13px;color:var(--ink-soft);background:#fbfaf6;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.formula code{font-family:ui-monospace,Menlo,monospace;background:#ece9df;padding:2px 7px;border-radius:5px;font-size:13px;color:var(--ink)}

/* ===== Pills / Tags ===== */
.pill{font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap}
.pill.safe{background:var(--green-soft);color:var(--green)}
.pill.caution{background:var(--amber-soft);color:var(--amber)}
.pill.danger{background:var(--red-soft);color:var(--red)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0}
.tag{font-size:11px;padding:3px 9px;border-radius:999px;background:#f1efe8;color:var(--ink-soft);border:1px solid var(--line)}

/* ===== Mobile touch targets ===== */
@media(pointer:coarse){
  .seg button,.tab-bar button,.pick,.chip,.action-btn,.back-btn,.reset-btn{min-height:44px;min-width:44px}
  .pick{padding:11px 16px}
  .chip{padding:10px 16px}
}