@charset "utf-8";
/* ===========================================================================
   세액공제·감면 대상여부 시뮬레이션 — app.css (완성본 / 통째로 대체)
   ---------------------------------------------------------------------------
   기존 app.css를 이 파일로 교체하세요. app-theme.css는 링크하지 않습니다.
   · 클래스명·선택자는 기존과 100% 동일 — app.js 수정 불필요
   · 변수명도 기존과 동일, 값만 확정 팔레트로 교체
   · 추가된 변수 없음 (기존 22개 전부 재정의)
   바뀐 것: 색 전체 / 조문 카드 흰 배경+좌측 막대 / 버튼·입력칸 pill·48px /
            체크박스 20px / 본문 크기 상향 / 서체 Pretendard 단일
   =========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root{
  /* 서체 — Pretendard 단일. 제목도 같은 가족의 굵기로 위계를 만든다 */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-title: var(--font);
  --title-size:21px;   --title-weight:700;

  /* 브랜드 — 로고와 상단바 구분선 전용. 2026-10-08 갈색·보라 → 코발트로 개편 */
  --brand:#1F4FD8;      --brand-soft:#4E5968;
  --navy:#191F28;       --header-bg:#FFFFFF;   --header-line:#E5E8EB;
  --cta:#1F4FD8;        --sel-bg:#E8EEFD;      --sel-text:#1A43B8;
  --line:#D1D6DB;       --page:#F5F6F8;        --card:#FFFFFF;

  /* 조문 카드 — 배경은 셋 다 흰색, 좌측 막대 농도로만 구분 (100 / 60 / 30%) */
  --art6-bg:#FFFFFF;    --art6-bar:#1F4FD8;                --art6-text:#1F4FD8;
  --art7-bg:#FFFFFF;    --art7-bar:rgba(31,79,216,.6);     --art7-text:#1F4FD8;
  --art29-bg:#FFFFFF;   --art29-bar:rgba(31,79,216,.3);    --art29-text:#1F4FD8;

  --ok-text:#008560;    --warn-bg:#FDF2E4;     --warn-text:#9A5606;
  --alert-bg:#FDEAE4;   --alert-text:#C23A1C;  --alert-strong:#9E2A11;
  --kakao:#FEE500;      --kakao-text:#191919;

  --text:#191F28;       --text-sub:#4E5968;    --text-muted:#6B7684;
  --gut:20px;           --radius:12px;         --radius-card:16px;

  /* 내부용 — 위 22개에서 파생. app.js는 참조하지 않는다 */
  --hairline-card:#E5E8EB;
  --canvas-deep:#E5E8EB;
  --positive-soft:#E6F8F0;
  --positive-line:#9FE3C5;
  --pill:999px;
  --focus-ring:0 0 0 3px rgba(31,79,216,.28);
  --shadow-card:0 8px 24px -8px rgba(25,31,40,.12),0 1px 3px rgba(25,31,40,.05);

  /* 2026-10-08 개편 — 검정·파랑 주색, 초록 포인트 (참고: 사용자 제공 IR 덱 2종)
     파랑 #2D88FF·초록 #00BC74 는 면·도형용. 글씨에는 반 톤 진한 --cta / --accent-text 를 쓴다 */
  --ink:#191F28;
  --cobalt:#1F4FD8;     /* 시우세무회계 정체성 색 — 로고·상호·상단 줄·주 버튼 */
  --accent:#00BC74;     --accent-text:#008560; --accent-soft:#E6F8F0;  --accent-line:#9FE3C5;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  font-size:16px; line-height:1.6; color:var(--text);
  background:var(--page);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; text-wrap:pretty;
}
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(25,31,40,.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:18px; 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:14px;
  color:var(--brand); letter-spacing:-.3px; line-height:1;
}
.topbar .tag{
  margin-left:auto; color:var(--brand-soft); font-size:11px;
  line-height:1.35; text-align:right; letter-spacing:-.2px;
}
.screen{ padding:20px var(--gut) 32px; flex:1; background:var(--page); }

/* ── 진행 표시 (3구간) ─────────────────────────────────── */
.progress{ padding:12px var(--gut) 0; background:var(--page); }
.progress .bars{ display:flex; gap:5px; }
.progress .bar{ flex:1; height:6px; border-radius:var(--pill); background:var(--canvas-deep); overflow:hidden; }
.progress .bar > i{ display:block; height:100%; width:0; background:var(--cta); border-radius:var(--pill); transition:width .36s cubic-bezier(.16,1,.3,1); }
.progress .meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:8px; font-size:13px; color:var(--text-muted);
}
.progress .meta .step{ color:var(--navy); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── 제목 ─────────────────────────────────────────────── */
.title{
  font-family:var(--font-title); font-weight:var(--title-weight);
  font-size:var(--title-size); line-height:1.5; color:var(--navy);
  margin:0 0 4px; letter-spacing:-.01em;
}
.subtitle{ font-size:15px; line-height:1.6; color:var(--text-sub); margin:0 0 16px; }
.label{ font-size:12px; color:var(--text-sub); margin:0 0 6px; font-weight:500; }
.sect{ margin-top:20px; }

/* ── 카드·박스 ────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--hairline-card); border-radius:var(--radius-card);
  padding:20px; margin-bottom:12px; box-shadow:var(--shadow-card);
}
.box{ border-radius:var(--radius); padding:12px 14px; font-size:13px; line-height:1.6; }
.box p{ margin:0; }
.box p + p{ margin-top:4px; }
.box-alert{ background:var(--alert-bg); color:var(--alert-text); border:1px solid #F9BCA9; }
.box-alert strong{ color:var(--alert-strong); font-weight:700; }
.box-warn{ background:var(--warn-bg); color:var(--warn-text); border:1px solid #F1B978; }
.box-info{ background:var(--sel-bg); color:var(--sel-text); border:1px solid #B9C9F5; }
.box-plain{ background:#F7F8FA; color:var(--text-sub); border:1px solid var(--hairline-card); }

/* 문항 화면 하단 상시 경고 */
.standing-note{ margin-top:20px; font-size:11px; color:var(--text-muted); line-height:1.6; text-align:center; }

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

/* ── 버튼 — 최소 높이 48px, pill ──────────────────────── */
.btn{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:52px; border:0; border-radius:var(--pill);
  padding:12px 22px; font-size:16px; font-weight:600; text-align:center;
  text-decoration:none; line-height:1.3;
  transition:transform .14s cubic-bezier(.22,.61,.36,1), filter .14s cubic-bezier(.22,.61,.36,1);
}
.btn:active:not(:disabled){ transform:scale(.985); filter:brightness(.96); }
.btn + .btn{ margin-top:8px; }
.btn-cta{ background:var(--cta); color:#fff; box-shadow:0 6px 16px -6px rgba(31,79,216,.4); }
.btn-cta:disabled{ background:var(--canvas-deep); color:#9AA0B0; box-shadow:none; cursor:not-allowed; }
.btn-ghost{ background:#fff; color:var(--cta); border:1.5px 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:20px; }

/* ── 선택지 ───────────────────────────────────────────── */
.choice{
  display:block; width:100%; min-height:48px; text-align:left; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; font-size:16px; margin-bottom:8px; color:var(--text);
  transition:background .14s ease, border-color .14s ease;
}
.choice[aria-pressed="true"]{
  background:var(--sel-bg); border-color:#B9C9F5; color:var(--text); font-weight:600;
}
.choice .hint{ display:block; font-size:13px; color:var(--text-muted); margin-top:3px; font-weight:400; }
.choice[aria-pressed="true"] .hint{ color:var(--text-sub); }

/* ── 입력 — 평상시 1px 회색, 포커스 1.5px 보라 ────────── */
.field{
  width:100%; min-height:48px; border:1px solid var(--line); border-radius:var(--pill);
  padding:12px 16px; background:#fff; font-size:16px;
  box-shadow:inset 0 1px 2px rgba(25,31,40,.05);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.field:focus{ outline:none; border:1.5px solid var(--cta); box-shadow:var(--focus-ring); }
textarea.field{ min-height:calc(1.6em * 3 + 24px); border-radius:var(--radius); resize:none; }
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% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px;
}
.field-row{ display:flex; gap:8px; }
.field-row > *{ flex:1; min-width:0; }
/* 날짜 3칸 — 4 : 3 : 3. 430px에서 잘리지 않는다 */
.field-row.date{ display:grid; grid-template-columns:4fr 3fr 3fr; gap:8px; }
.field-row.date .field{ padding:12px 10px; text-align:center; }

/* 체크박스 — 20px 이상, 체크 시 보라 채움 */
.check{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; margin-bottom:10px; }
.check input{
  margin:2px 0 0; width:22px; height:22px; flex:none;
  accent-color:var(--cta); border-radius:5px; cursor:pointer;
}

/* ── 배지 — 라벨은 "업종 요건 충족 / 해당 없음 / 확인 필요" 세 가지 ── */
.badge{
  display:inline-block; border-radius:var(--pill); padding:4px 10px;
  font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap;
}
.badge-ok{ background:var(--positive-soft); color:var(--navy); border:1px solid var(--positive-line); }
.badge-warn{ background:var(--alert-bg); color:var(--alert-text); border:1px solid #F9BCA9; }
.badge-none{ background:var(--canvas-deep); color:var(--text-sub); border:1px solid var(--line); }

/* ── 조문 카드 — 흰 배경 통일, 좌측 막대로만 구분 ─────── */
.art{
  border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; width:100%;
  text-align:left; display:block;
  background:var(--card);
  border:1px solid var(--hairline-card); border-left:4px solid transparent;
  color:var(--text);
}
.art .art-label{ font-size:11px; line-height:15px; font-weight:600; }
.art .art-name{ font-family:var(--font-title); font-weight:600; font-size:14px; line-height:20px; margin-top:2px; color:var(--navy); }
.art .art-foot{ font-size:11px; line-height:16px; margin-top:4px; color:var(--text-sub); }
.art-6{  background:var(--art6-bg);  border-left-color:var(--art6-bar); }
.art-7{  background:var(--art7-bg);  border-left-color:var(--art7-bar); }
.art-29{ background:var(--art29-bg); border-left-color:var(--art29-bar); }
.art-6  .art-label{ color:var(--art6-text); }
.art-7  .art-label{ color:var(--art7-text); }
.art-29 .art-label{ color:var(--art29-text); }
.art-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }

/* ── 표 ───────────────────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; margin-top:10px; }
.tbl th,.tbl td{ border:1px solid var(--hairline-card); padding:8px 7px; text-align:center; word-break:keep-all; }
.tbl th{ background:#F7F8FA; color:var(--navy); font-weight:600; }
.tbl td{ font-variant-numeric:tabular-nums; }
.tbl td.rowhead{ background:#F7F8FA; text-align:left; color:var(--text-sub); font-weight:500; }
.tbl caption{ caption-side:top; text-align:left; font-size:13px; font-weight:600; color:var(--navy); padding-bottom:6px; }

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

/* ── 접이식 ───────────────────────────────────────────── */
details.fold{ border:1px solid var(--hairline-card); border-radius:var(--radius); background:#fff; margin-top:12px; }
details.fold > summary{ list-style:none; cursor:pointer; min-height:48px; display:flex; align-items:center; padding:12px 14px; font-size:15px; font-weight:600; color:var(--sel-text); }
details.fold > summary::-webkit-details-marker{ display:none; }
details.fold > summary::after{ content:' ▾'; margin-left:auto; }
details.fold[open] > summary::after{ content:' ▴'; }
details.fold .fold-body{ padding:0 14px 14px; font-size:13px; color:var(--text-sub); line-height:1.65; }

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

/* ── 로고·완료 ────────────────────────────────────────── */
.brand{ text-align:center; padding:8px 0 14px; }
.brand img{ height:46px; width:auto; }
.done-mark{
  width:56px; height:56px; margin:8px auto 14px; border-radius:50%;
  background:var(--positive-soft); color:var(--ok-text); display:flex; align-items:center;
  justify-content:center; font-size:26px; border:1px solid var(--positive-line);
}
.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:none; box-shadow:var(--focus-ring); }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

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

/* 법적 문서 링크 줄 */
.legal{ margin-top:24px; padding-top:14px; border-top:1px solid var(--hairline-card); text-align:center; font-size:11px; }
.legal a{ color:var(--text-muted); text-decoration:underline; }
.legal span{ color:var(--line); margin:0 6px; }

/* ── 종목 후보 칩 ─────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.chip{
  min-height:36px; border:1px solid var(--line); background:#fff; color:var(--text-sub);
  border-radius:var(--pill); padding:7px 14px; font-size:13px; line-height:1.4; font-weight:600;
}
.chip[aria-pressed="true"]{
  background:var(--sel-bg); border-color:#B9C9F5; color:var(--sel-text);
}

/* ── "잘 모르겠어요"를 골랐을 때의 진행 안내 ───────────── */
.go-on{
  margin:6px 0 10px; padding:12px 14px; border-radius:var(--radius);
  background:var(--sel-bg); border:1px solid #B9C9F5; color:var(--text);
  font-size:13px; line-height:1.6;
}
.go-on strong{ font-weight:700; color:var(--sel-text); }

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

/* ── 첫 화면 취지문 ───────────────────────────────────── */
.intro{
  background:#F7F8FA; border:1px solid var(--hairline-card);
  border-radius:var(--radius-card); padding:16px;
  margin:0 0 16px; font-size:14px; line-height:1.75; color:var(--text-sub);
}
.intro p{ margin:0; }
.intro p + p{ margin-top:8px; }

/* ── 상단바 로고 링크 ─────────────────────────────────── */
.topbar .brandlink{
  display:flex; align-items:center; text-decoration:none; color:inherit;
}
.topbar .brandlink:hover .name{ text-decoration:underline; }

/* ── 카카오톡 문의 전 붙여넣을 내용 ───────────────────── */
details.fold.kakao-fold{ margin-top:0; margin-bottom:10px; }
.asktext{
  white-space:pre-wrap; word-break:break-all; margin:10px 0;
  background:#F7F8FA; border:1px solid var(--hairline-card); border-radius:8px; padding:11px 12px;
  font-family:inherit; font-size:13px; line-height:1.65; color:var(--text);
}

/* ── 단위가 붙은 입력칸 ───────────────────────────────── */
.unit-field{ position:relative; }
.unit-field .field{ padding-right:56px; }
.unit-field .unit{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--text-sub); pointer-events:none;
}

/* ── 결과 화면 조문 카드의 상세 보기 ──────────────────── */
.art-main{ min-width:0; }
.art-right{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; }
.art-more{
  display:inline-block; border:1px solid var(--line); border-radius:var(--pill);
  padding:4px 10px; font-size:11px; font-weight:600; line-height:1.4;
  background:#fff; color:var(--sel-text); white-space:nowrap;
}

/* 본문 안에서 버튼 이름을 가리킬 때 */
.key{ color:var(--sel-text); font-weight:700; }

/* 카카오톡 보조버튼 */
.btn-sub{
  background:#fff; color:var(--text-sub); border:1px solid var(--line);
  font-weight:500; font-size:15px;
}

/* ── 저작권 표시 — 회색으로만. 빨강은 세무 경고 전용 ──── */
.copyfoot{
  margin:28px auto 0; padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hairline-card); text-align:center;
  font-size:11px; line-height:1.6; color:var(--text-muted);
}
.copyfoot span{ color:var(--line); margin:0 5px; }
.copyfoot a{ color:var(--text-muted); text-decoration:underline; }

.copynotice{
  margin-top:20px; padding:14px 16px;
  border:1px solid var(--hairline-card); border-radius:var(--radius); background:#F7F8FA;
}
.copynotice b{ display:block; font-size:13px; color:var(--text-sub); margin-bottom:6px; }
.copynotice ul{ margin:0; padding:0; }
.copynotice li{
  list-style:none; position:relative; padding-left:10px;
  font-size:11px; line-height:1.65; color:var(--text-muted);
}
.copynotice li + li{ margin-top:4px; }
.copynotice li:before{ content:'·'; position:absolute; left:0; color:var(--line); }

/* 결과 화면 머리 경고 */
.sim-caution{
  margin:0 0 12px; padding:12px 14px;
  border:1px solid #F9BCA9; border-left:3px solid var(--alert-strong); border-radius:var(--radius);
  background:var(--alert-bg); color:var(--alert-text);
  font-size:14px; font-weight:600; line-height:1.55;
}
.sim-caution strong{ color:var(--alert-strong); font-weight:700; }