@charset "utf-8";
/* 세액공제·감면 대상여부 시뮬레이션 — 디자인 시스템
   근거: 인수인계 문서 v7 3장. 색·서체·간격은 확정본이므로 임의로 바꾸지 않는다. */

/* ── 타이틀 서체. font-display:swap 으로 늦게 떠도 글이 사라지지 않게 한다 ── */
@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff') format('woff');
}

:root{
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-title: 'Spoqa Han Sans Neo', 'Pretendard', sans-serif;
  --title-size:15.5px;  --title-weight:700;

  --brand:#4A2B33;      --brand-soft:#8A6E74;
  --navy:#1B3A5F;      --header-bg:#E8EFF7;   --header-line:#C8DAEC;
  --cta:#2E6BE6;       --sel-bg:#EDF2FD;      --sel-text:#1A4FBF;
  --line:#8A9099;      --page:#F7F8FA;        --card:#FFFFFF;

  --art6-bg:#E4EDFD;   --art6-bar:#2E6BE6;    --art6-text:#1A4FBF;
  --art7-bg:#DEF1EC;   --art7-bar:#12876B;    --art7-text:#0A5D4A;
  --art29-bg:#EDE8FA;  --art29-bar:#6B57C9;   --art29-text:#4B3D9E;

  --ok-text:#076047;   --warn-bg:#FDF3E3;     --warn-text:#8A4B04;
  --alert-bg:#FDECEA;  --alert-text:#B3261E;  --alert-strong:#8C1A14;
  --kakao:#FEE500;     --kakao-text:#191919;

  --text:#1A1D23;      --text-sub:#5A6069;    --text-muted:#6B7280;
  --gut:14px;          --radius:9px;          --radius-card:10px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  font-size:13px; line-height:1.55; color:var(--text);
  background:var(--page);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }

/* ── 앱 틀 ─────────────────────────────────────────────── */
.app{
  max-width:430px; margin:0 auto; min-height:100vh;
  background:var(--card); display:flex; flex-direction:column;
  box-shadow:0 0 0 1px rgba(27,58,95,.06);
}
.topbar{
  background:#fff; border-bottom:2px solid var(--brand);
  padding:9px var(--gut); display:flex; align-items:center; gap:0;
  position:sticky; top:0; z-index:20;
}
.topbar .back{
  border:0; background:transparent; color:var(--brand);
  font-size:16px; line-height:1; padding:2px 4px 2px 0; margin:0 4px 0 -4px;
}
.topbar .sym{ height:24px; width:24px; display:block; flex:none; margin-right:6.4px; }
.topbar .name{
  font-family:var(--font-title); font-weight:700; font-size:12px;
  color:var(--brand); letter-spacing:-.3px; line-height:1;
}
.topbar .tag{
  margin-left:auto; color:var(--brand-soft); font-size:10px;
  line-height:1.35; text-align:right; letter-spacing:-.2px;
}
.screen{ padding:16px var(--gut) 26px; flex:1; }

/* ── 진행 표시 (3구간) ─────────────────────────────────── */
.progress{ padding:10px var(--gut) 0; }
.progress .bars{ display:flex; gap:5px; }
.progress .bar{ flex:1; height:4px; border-radius:2px; background:#E3E7EC; overflow:hidden; }
.progress .bar > i{ display:block; height:100%; width:0; background:var(--cta); border-radius:2px; transition:width .25s ease; }
.progress .meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:6px; font-size:11px; color:var(--text-muted);
}
.progress .meta .step{ color:var(--navy); font-weight:600; }

/* ── 제목 ─────────────────────────────────────────────── */
.title{
  font-family:var(--font-title); font-weight:var(--title-weight);
  font-size:var(--title-size); line-height:1.4; color:var(--navy);
  margin:0 0 2px; letter-spacing:-.2px;
}
.subtitle{ font-size:11.5px; color:var(--text-sub); margin:0 0 14px; }
.label{ font-size:11.5px; color:var(--text-sub); margin:0 0 5px; font-weight:500; }
.sect{ margin-top:18px; }

/* ── 카드·박스 ────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid #E3E7EC; border-radius:var(--radius-card);
  padding:12px; margin-bottom:10px;
}
.box{ border-radius:var(--radius); padding:10px 11px; font-size:11.5px; line-height:1.6; }
.box p{ margin:0; }
.box p + p{ margin-top:3px; }
.box-alert{ background:var(--alert-bg); color:var(--alert-text); }
.box-alert strong{ color:var(--alert-strong); font-weight:700; }
.box-warn{ background:var(--warn-bg); color:var(--warn-text); }
.box-info{ background:var(--sel-bg); color:var(--sel-text); }
.box-plain{ background:#F2F4F7; color:var(--text-sub); }

/* 문항 화면 하단 상시 경고 (회색 작은 글씨) */
.standing-note{ margin-top:18px; font-size:10.5px; color:var(--text-muted); line-height:1.55; }

/* 각주 */
.foot{ margin-top:10px; font-size:10.5px; color:var(--text-muted); line-height:1.6; }
.foot li{ list-style:none; }
.foot ul{ margin:0; padding:0; }

/* ── 버튼 ─────────────────────────────────────────────── */
.btn{
  display:block; width:100%; border:0; border-radius:var(--radius);
  padding:12px 14px; font-size:13px; font-weight:600; text-align:center;
  text-decoration:none; line-height:1.3;
}
.btn + .btn{ margin-top:8px; }
.btn-cta{ background:var(--cta); color:#fff; }
.btn-cta:disabled{ background:#C3CEDD; color:#fff; cursor:not-allowed; }
.btn-ghost{ background:#fff; color:var(--sel-text); border:1px solid var(--cta); }
.btn-quiet{ background:#fff; color:var(--text-sub); border:1px solid var(--line); }
.btn-kakao{ background:var(--kakao); color:var(--kakao-text); }
.btn-row{ display:flex; gap:8px; }
.btn-row .btn{ margin-top:0; }
.actions{ margin-top:18px; }

/* ── 선택지 ───────────────────────────────────────────── */
.choice{
  display:block; width:100%; text-align:left; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 12px; font-size:12.5px; margin-bottom:8px; color:var(--text);
}
.choice[aria-pressed="true"]{
  background:var(--sel-bg); border-color:var(--cta); color:var(--sel-text); font-weight:600;
}
.choice .hint{ display:block; font-size:10.5px; color:var(--text-muted); margin-top:2px; font-weight:400; }
.choice[aria-pressed="true"] .hint{ color:var(--sel-text); opacity:.85; }

/* 입력 */
.field{
  width:100%; border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 11px; background:#fff; font-size:12.5px;
}
.field:focus{ outline:2px solid var(--cta); outline-offset:-2px; border-color:var(--cta); }
select.field{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-sub) 50%),linear-gradient(135deg,var(--text-sub) 50%,transparent 50%); background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; }
.field-row{ display:flex; gap:8px; }
.field-row > *{ flex:1; min-width:0; }
.check{ display:flex; gap:8px; align-items:flex-start; font-size:12px; margin-bottom:8px; }
.check input{ margin:3px 0 0; width:15px; height:15px; accent-color:var(--cta); flex:none; }

/* ── 배지 ─────────────────────────────────────────────── */
.badge{
  display:inline-block; border-radius:5px; padding:3px 8px;
  font-size:11px; font-weight:700; line-height:1.4;
}
.badge-ok{ background:#E2F3EC; color:var(--ok-text); }
.badge-warn{ background:var(--warn-bg); color:var(--warn-text); }
.badge-none{ background:#EDEFF2; color:var(--text-sub); }

/* ── 조문 카드 ────────────────────────────────────────── */
.art{
  border-radius:var(--radius-card); padding:11px 12px 11px 14px;
  border-left:4px solid transparent; margin-bottom:9px; width:100%;
  text-align:left; border-top:0; border-right:0; border-bottom:0; display:block;
}
.art .art-label{ font-size:10.5px; font-weight:600; opacity:.9; }
.art .art-name{ font-family:var(--font-title); font-weight:700; font-size:13px; margin-top:1px; }
.art .art-foot{ font-size:11px; margin-top:4px; }
.art-6{ background:var(--art6-bg);  border-left-color:var(--art6-bar);  color:var(--art6-text); }
.art-7{ background:var(--art7-bg);  border-left-color:var(--art7-bar);  color:var(--art7-text); }
.art-29{ background:var(--art29-bg); border-left-color:var(--art29-bar); color:var(--art29-text); }
.art-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }

/* ── 표 ───────────────────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; font-size:11.5px; margin-top:8px; }
.tbl th,.tbl td{ border:1px solid #DCE1E7; padding:6px 7px; text-align:center; }
.tbl th{ background:#F2F5F9; color:var(--navy); font-weight:600; }
.tbl td.rowhead{ background:#FAFBFC; text-align:left; color:var(--text-sub); }
.tbl caption{ caption-side:top; text-align:left; font-size:11.5px; font-weight:600; color:var(--navy); padding-bottom:4px; }

/* ── 목록 ─────────────────────────────────────────────── */
.list{ margin:0; padding:0; list-style:none; font-size:11.5px; line-height:1.65; }
.list li{ position:relative; padding-left:11px; }
.list li::before{ content:''; position:absolute; left:2px; top:8px; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; }

/* ── 접이식 ───────────────────────────────────────────── */
details.fold{ border:1px solid #E3E7EC; border-radius:var(--radius); background:#fff; margin-top:10px; }
details.fold > summary{ list-style:none; cursor:pointer; padding:10px 12px; font-size:12px; font-weight:600; color:var(--sel-text); }
details.fold > summary::-webkit-details-marker{ display:none; }
details.fold > summary::after{ content:' ▾'; }
details.fold[open] > summary::after{ content:' ▴'; }
details.fold .fold-body{ padding:0 12px 12px; font-size:11.5px; color:var(--text-sub); line-height:1.65; }

/* ── 검색 결과 ────────────────────────────────────────── */
.result{ margin-top:10px; }
.result-item{
  display:block; width:100%; text-align:left; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 11px; margin-bottom:7px;
}
.result-item[aria-pressed="true"]{ background:var(--sel-bg); border-color:var(--cta); }
.result-item .code{ font-size:10.5px; color:var(--text-muted); }
.result-item .name{ font-size:12.5px; font-weight:600; color:var(--text); margin-top:1px; }
.result-item[aria-pressed="true"] .name{ color:var(--sel-text); }
.result-item .path{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }

/* ── 로고·완료 ────────────────────────────────────────── */
.brand{ text-align:center; padding:6px 0 12px; }
.brand img{ height:46px; width:auto; }
.done-mark{
  width:52px; height:52px; margin:8px auto 12px; border-radius:50%;
  background:#E2F3EC; color:var(--ok-text); display:flex; align-items:center;
  justify-content:center; font-size:24px;
}
.center{ text-align:center; }

/* ── 접근성 ───────────────────────────────────────────── */
.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;
}
:focus-visible{ outline:2px solid var(--cta); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ── 처리방침·이용약관 문서 페이지 ─────────────────────── */
.doc{ font-size:12.5px; line-height:1.7; color:var(--text); }
.doc h2{
  font-family:var(--font-title); font-size:13.5px; font-weight:700;
  color:var(--navy); margin:22px 0 6px; padding-top:12px;
  border-top:1px solid #E3E7EC;
}
.doc p{ margin:0 0 8px; }
.doc p.strong{ font-weight:700; color:var(--navy); margin-top:14px; }
.doc .tbl{ margin:8px 0 10px; }
.doc .tbl td.rowhead{ white-space:nowrap; }
.doc .list{ font-size:12.5px; margin-bottom:10px; }
.doc .foot{ margin-top:-2px; margin-bottom:10px; }
.doc .actions a.btn{ text-decoration:none; }

/* 법적 문서 링크 줄 */
.legal{ margin-top:22px; padding-top:12px; border-top:1px solid #E3E7EC; text-align:center; font-size:10.5px; }
.legal a{ color:var(--text-muted); text-decoration:underline; }
.legal span{ color:#C3CEDD; margin:0 6px; }

/* ── 사업자등록증에서 읽은 종목 후보 버튼 ─────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.chip{
  border:1px solid var(--line); background:#fff; color:var(--text);
  border-radius:16px; padding:7px 13px; font-size:12.5px; line-height:1.3;
}
.chip[aria-pressed="true"]{
  background:var(--sel-bg); border-color:var(--cta); color:var(--sel-text); font-weight:600;
}

/* ── "잘 모르겠어요"를 골랐을 때의 진행 안내 ───────────── */
.go-on{
  margin:4px 0 8px; padding:9px 11px; border-radius:var(--radius);
  background:var(--sel-bg); color:var(--sel-text);
  font-size:11.5px; line-height:1.6;
}
.go-on strong{ font-weight:700; }

/* 입력칸의 예시 글씨는 흐리게 */
.field::placeholder{ color:#A9B0B9; font-weight:400; }