/* ═══════════════════════════════════════════════════════════════
   개별 계산기 4종 공통 스타일
   severance / annual-leave / unemployment / retirement-tax

   퇴사각도기는 한 화면에 질문 하나씩 묻지만, 개별 계산기는 한 화면에 다 둔다.
   검색으로 들어온 사람은 숫자 하나만 빨리 보고 싶어 하기 때문이다.
   값을 넣는 즉시 아래 결과가 바뀐다. 버튼을 누르게 하지 않는다.
   ═══════════════════════════════════════════════════════════════ */
.lede{padding:22px 0 0}
.lede h1{font-size:28px;font-weight:800;letter-spacing:-0.045em;line-height:1.35;margin:0 0 10px}
.lede p{font-size:15px;line-height:1.65;font-weight:500;color:var(--ink-3);margin:0}

/* ── 입력 ── */
.form{margin:24px 0 0;background:var(--card);border-radius:var(--r-xl);padding:8px 22px 20px}
.fld{padding:16px 0 0}
.fld label,.fld .lb{display:block;font-size:13px;font-weight:800;color:var(--ink-3);margin-bottom:2px}
.fld .opt{font-weight:600;color:var(--ink-5);margin-left:4px}
.fld .row{position:relative}
.fld input{width:100%;border:0;border-bottom:2.5px solid var(--line);background:none;border-radius:0;
  padding:9px 40px 9px 0;font-family:inherit;font-size:22px;font-weight:800;letter-spacing:-0.03em;
  color:var(--ink);outline:none;transition:border-color .2s;font-variant-numeric:tabular-nums}
.fld input::placeholder{color:var(--ink-5);font-weight:700}
.fld input:focus{border-bottom-color:var(--yel)}
.fld input[type=date]{-webkit-appearance:none;appearance:none;min-height:48px;padding-right:0}
.fld .suf{position:absolute;right:0;bottom:12px;font-size:16px;font-weight:700;color:var(--ink-3);pointer-events:none}
.fld .help{font-size:12.5px;font-weight:500;color:var(--ink-4);line-height:1.55;margin:7px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chip{border:0;background:#F3EFE6;color:var(--ink-2);font-size:13px;font-weight:700;
  padding:8px 13px;border-radius:999px;cursor:pointer}
.chip:active{background:var(--yel-soft)}
.seg{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.seg button{width:100%;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:var(--r-sm);
  padding:13px 15px;font-size:14.5px;font-weight:800;color:var(--ink);cursor:pointer;
  transition:border-color .16s, background .16s}
.seg button small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:3px;line-height:1.5}
.seg button.on{border-color:var(--ink);background:var(--yel-soft)}
.seg.two{flex-direction:row}
.seg.two button{text-align:center;padding:13px 8px}

/* ── 결과 ── */
.out{margin:14px 0 0;background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:26px 24px 24px}
.out .k{font-size:13px;font-weight:700;color:var(--yel);margin:0 0 8px}
.out .v{font-size:40px;font-weight:800;letter-spacing:-0.05em;line-height:1.1;margin:0}
.out .v .u{font-size:22px;font-weight:700;margin-left:2px}
.out .n{font-size:13.5px;font-weight:500;line-height:1.6;color:#A9ADB3;margin:12px 0 0}
.out.idle .v{color:#5A5E64}

.lines{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);padding:4px 20px;margin-top:12px}
.lines:empty{display:none}
.line{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.line:last-child{border-bottom:0}
.line .lk{font-size:14px;font-weight:700;color:var(--ink-2)}
.line .lk small{display:block;font-size:12px;font-weight:500;color:var(--ink-4);margin-top:3px;line-height:1.5}
.line .lv{font-size:15px;font-weight:800;white-space:nowrap;text-align:right}
.line .lv.dim{color:var(--ink-4)}

/* ── 하루 차이 안내 → 퇴사각도기 ── */
.hook{display:flex;gap:12px;align-items:center;margin-top:12px;padding:18px 18px 18px 14px;background:var(--yel);
  border-radius:var(--r-lg);border:2px solid var(--ink)}
.hook:empty{display:none}
.hook img{width:70px;height:auto;flex:0 0 auto;display:block}
.hook .ht{font-size:15px;font-weight:800;letter-spacing:-0.03em;line-height:1.5;margin:0 0 5px}
.hook .hd{font-size:12.5px;font-weight:600;color:#5C4700;line-height:1.6;margin:0}
.hook .hl{display:inline-block;margin-top:9px;font-size:13px;font-weight:800;border-bottom:2px solid var(--ink)}

/* 광고 자리. 애드센스 코드를 넣기 전에는 비어 있어서 보이지 않는다.
   "광고 영역" 같은 빈 상자가 보이면 애드센스 심사에서 미완성 사이트로 보인다. */
.ad{margin:40px 0 0;min-height:100px}
.ad:empty{display:none}

/* ── 본문 ── */
article{padding-top:8px}
article h2{font-size:20px;font-weight:800;letter-spacing:-0.035em;line-height:1.4;margin:44px 0 12px}
article p,article li{font-size:14.5px;line-height:1.8;font-weight:500;color:var(--ink-2)}
article p{margin:0 0 12px}
article ul{margin:0 0 12px;padding-left:20px}
article li{margin-bottom:6px}
article strong{font-weight:800;color:var(--ink)}
.formula{background:var(--card);border-radius:var(--r-md);padding:16px 18px;margin:0 0 14px;
  font-size:14.5px;font-weight:800;line-height:1.75;letter-spacing:-0.02em;border-left:5px solid var(--yel)}
.law{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-md);padding:4px 18px}
.law div{padding:13px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;line-height:1.6;color:var(--ink-3);font-weight:500}
.law div:last-child{border-bottom:0}
.law b{display:block;color:var(--ink);font-weight:800;font-size:14px;margin-bottom:2px}

.faq details{background:var(--card);border-radius:var(--r-md);margin-bottom:9px;padding:0 18px}
.faq summary{list-style:none;cursor:pointer;padding:16px 26px 16px 0;position:relative;
  font-size:14.5px;font-weight:800;line-height:1.55;letter-spacing:-0.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:3px;top:22px;width:8px;height:8px;
  border-right:2.4px solid var(--ink-4);border-bottom:2.4px solid var(--ink-4);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.faq details p{margin:0;padding:0 0 17px;font-size:14px;color:var(--ink-3)}

.others{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.others a{display:block;background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);
  padding:15px 16px;font-size:14.5px;font-weight:800;transition:border-color .16s}
.others a:hover{border-color:var(--ink)}
.others a small{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:3px}
.others a.main{grid-column:1 / -1;background:var(--ink);border-color:var(--ink);color:#fff}
.others a.main small{color:var(--yel)}
.hook.tall img{width:54px}

/* ── PC ──────────────────────────────────────────────
   왼쪽: 제목 → 입력칸 → 설명 글
   오른쪽: 결과(.side). 설명을 읽으며 내려가도 오른쪽에 붙어 있어, 값을 바꾸면 바로 보인다.
   폰에서는 HTML 순서 그대로 입력칸 → 결과 → 설명이다. */
@media (min-width:960px){
  .calc{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:48px;align-items:start}
  .calc > *{grid-column:1 / -1}
  .calc > .lede{grid-row:1}
  .calc > .form{grid-column:1;grid-row:2}
  .calc > .side{grid-column:2;grid-row:2 / span 2;position:sticky;top:96px;margin-top:24px}
  .calc > article{grid-column:1;grid-row:3}
  .calc > [data-fresh]{grid-row:4}
  .calc > .site-foot{grid-row:5}

  .lede{padding:44px 0 4px}
  .lede h1{font-size:40px;margin:0 0 12px}
  .lede p{font-size:17px;max-width:640px}

  .form{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;padding:14px 32px 30px}
  .form .fld:has(.seg:not(.two)){grid-column:1 / -1}
  .fld{padding:20px 0 0}
  .fld label,.fld .lb{font-size:13.5px}
  .fld input{font-size:24px}
  .seg:not(.two){display:grid;grid-template-columns:repeat(3,1fr)}
  .seg button:hover{border-color:var(--ink-4)}
  .seg button.on:hover{border-color:var(--ink)}
  .chip:hover{background:var(--yel-soft)}

  .out{margin:0;padding:30px 30px 28px}
  .out .v{font-size:46px}
  .out .n{font-size:14px}
  .lines{padding:6px 24px}
  .line .lk{font-size:14.5px}
  .line .lv{font-size:15.5px}
  .hook{padding:20px 20px 20px 16px}
  .ad{margin:24px 0 0}

  .others{grid-template-columns:repeat(3,1fr)}
  .others a{padding:18px 18px}
  article h2{font-size:24px;margin:56px 0 14px}
  article p,article li{font-size:16px;line-height:1.85}
  .formula{font-size:15.5px;padding:18px 22px}
  .law div{font-size:14.5px}
  .law b{font-size:15px}
  .faq summary{font-size:15.5px;padding:18px 28px 18px 0}
  .faq summary:hover{color:var(--ink-2)}
  .faq details p{font-size:15px}
  .faq summary::after{top:24px}
  .faq details[open] summary::after{top:28px}
}