/* Premier Tax Guide × 원티드 디자인 시스템, DESIGN.md 1~4장 구현
   각 페이지 인라인 <style> 뒤에 링크해서 기존 변수를 다시 매핑한다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 한국어 줄바꿈 (정본 규칙: Claude_Mac/클로드웹_대화지침.md 7장)
   어절 중간에서 끊기는 것(「처/리」, 「서비/스」)을 허용하지 않는다.
   2026-09-20 추가. 일본어판에도 같이 적용된다(일본어는 원래 어디서나 끊기므로 영향 없음). */
body, body *{word-break:keep-all;overflow-wrap:break-word}

:root{
  /* 원티드 토큰 */
  --wds-primary:#0072BC;
  --wds-primary-strong:#005A96;
  --wds-primary-weak:rgba(0,114,188,.08);
  --wds-label-strong:#000;
  --wds-label-normal:#171719;
  --wds-label-neutral:rgba(46,47,51,.88);
  --wds-label-alternative:rgba(55,56,60,.61);
  --wds-label-assistive:rgba(55,56,60,.28);
  --wds-label-disable:rgba(55,56,60,.16);
  --wds-bg:#fff;
  --wds-bg-alt:#F7F7F8;
  --wds-fill-normal:rgba(112,115,124,.08);
  --wds-fill-alternative:rgba(112,115,124,.05);
  --wds-line-normal:rgba(112,115,124,.16);
  --wds-line-alternative:rgba(112,115,124,.08);
  --wds-interaction-disable:#F4F4F5;
  --wds-negative:#FF4242;
  --wds-positive:#00BF40;
  --wds-shadow-xs:0 1px 2px -1px rgba(23,23,23,.10);
  --wds-shadow-md:0 2px 4px -2px rgba(23,23,23,.06),0 4px 6px -1px rgba(23,23,23,.06);
  --wds-font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  /* 기존 페이지 변수 → 원티드 토큰 */
  --primary:var(--wds-primary);
  --primary-dark:var(--wds-primary-strong);
  --primary-light:var(--wds-primary-weak);
  --bg:var(--wds-bg-alt);
  --bg-light:var(--wds-bg-alt);
  --bg-blue:var(--wds-bg-alt);
  --bg-warm:var(--wds-bg-alt);
  --surface:var(--wds-bg);
  --surface-2:var(--wds-bg-alt);
  --white:var(--wds-bg);
  --text:var(--wds-label-normal);
  --text-primary:var(--wds-label-normal);
  --text-secondary:var(--wds-label-alternative);
  --text-tertiary:var(--wds-label-assistive);
  --text-light:var(--wds-label-assistive);
  --border:var(--wds-line-normal);
  --shadow:none;
  --shadow-sm:none;
  --shadow-md:var(--wds-shadow-xs);
  --shadow-lg:var(--wds-shadow-md);
  --shadow-xl:var(--wds-shadow-md);
  --radius:16px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --font:var(--wds-font);
}

/* Typography */
html body, body button, body input, body select, body textarea{
  font-family:var(--wds-font);
  letter-spacing:.0057em;
}
body{color:var(--wds-label-normal);-webkit-font-smoothing:antialiased}
body h1, body h2, body h3{letter-spacing:-.012em}

/* Form, TextField */
body input[type="text"], body input[type="number"], body input[type="tel"],
body input[type="email"], body input:not([type]), body select, body textarea{
  border:1px solid var(--wds-line-normal);
  border-radius:12px;
  background:#fff;
  color:var(--wds-label-normal);
}
body input::placeholder, body textarea::placeholder{color:var(--wds-label-assistive)}
body input:focus, body select:focus, body textarea:focus{
  outline:none;
  border-color:rgba(0,114,188,.43);
  box-shadow:0 0 0 1px rgba(0,114,188,.43), var(--wds-shadow-xs);
}

/* ===== Landing (index.html), DESIGN.md 5장 ===== */
.lang-toggle{box-shadow:none;border:1px solid var(--wds-line-normal);border-radius:10px;font-weight:600}
.hero-overlay{animation:none;background:rgba(23,23,25,.78)}
.hero-inner{animation:none;opacity:1}
.hero h1{font-weight:700;letter-spacing:-.027em}
.hero-badge{background:transparent;backdrop-filter:none;border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:6px 12px;font-size:14px;font-weight:500;letter-spacing:.0145em}
.intro-bar{background:var(--wds-bg);border-bottom:1px solid var(--wds-line-alternative)}
.intro-bar strong{color:var(--wds-label-normal);font-weight:600}
.section-title h2{font-size:28px;font-weight:700;letter-spacing:-.0236em}

.cards{gap:16px}
.card{border:1px solid var(--wds-line-alternative);border-radius:16px;opacity:1;transform:none;animation:none}
.card:hover{transform:none;box-shadow:none;border-color:var(--wds-line-normal);background:var(--wds-bg-alt)}
.card .card-icon-bar, .card .card-icon{display:none}
.card-body{padding:24px}
.card-body h3{font-size:17px;font-weight:600;line-height:1.412;letter-spacing:0;margin-bottom:6px}
.card-body p{font-size:14px;line-height:1.571;color:var(--wds-label-alternative)}
.card .card-tag{background:var(--wds-fill-normal);color:var(--wds-label-alternative);border-radius:6px;padding:2px 6px;font-size:12px;font-weight:500;margin-top:16px}
.card-arrow{background:transparent;color:var(--wds-label-assistive);width:24px;height:24px;top:22px;right:20px}
.card:hover .card-arrow{background:transparent;color:var(--wds-primary)}

.info-section{background:var(--wds-bg);border-top:1px solid var(--wds-line-alternative)}
.info-icon{background:var(--wds-fill-alternative);border-radius:10px;filter:grayscale(1);font-size:18px}
.info-item h4{color:var(--wds-label-alternative)}
.info-item p{font-weight:500}

.social-bar{gap:8px}
.social-btn, .social-btn--kakao, .social-btn--youtube, .social-btn--blog, .social-btn--web{
  background:var(--wds-bg);color:var(--wds-label-normal);
  border:1px solid var(--wds-line-normal);border-radius:10px;padding:9px 20px;font-size:15px;font-weight:600;
}
.social-btn:hover{transform:none;box-shadow:none;background:var(--wds-bg-alt)}
.social-btn svg{fill:var(--wds-label-alternative)}
.footer{background:var(--wds-label-normal)}

/* ===== Subpages 공통, DESIGN.md 5장 ===== */
/* Hero: 그라데이션 → 단색 primary, 제목은 흰색 유지 */
body .hero:not(:has(.hero-video)), body .page-hero{background:var(--wds-primary) !important;background-image:none !important}
body .hero-bg-grid{display:none}
body .hero h1, body .page-hero h1{font-weight:700;letter-spacing:-.027em}

/* Header / nav */
body .site-header{box-shadow:none;border-bottom:1px solid var(--wds-line-alternative)}
body .lang-pill, body .nav-pill{border-radius:10px}

/* Badges: 알약 → Content Badge */
body .hero-badge, body .hero-title-badge, body .notice-badge, body .hero-eyebrow{
  background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.28);border-radius:8px !important;font-weight:500;backdrop-filter:none}
body .specialty-tag, body .field-tag, body .badge-corp, body .badge-ind, body .acc-badge, body .step-badge,
body .recommended-badge, body .result-type-badge, body .dl-badge, body .dl-tag, body .milestone-badge,
body .cycle-badge, body .task-count-badge, body .badge-tag, body .badge-tag-new{
  border-radius:6px !important;font-weight:500;box-shadow:none}

/* Cards: 그림자 → 선 */
body .service-card, body .promise-card, body .bank-card, body .party-card, body .calc-card, body .plan-card,
body .result-card, body .dl-card, body .step-card, body .checklist-card, body .greeting-card,
body .section-card, body .summary-card, body .tips-cards > *{
  box-shadow:none !important;border:1px solid var(--wds-line-alternative);border-radius:16px}
body .type-btn{box-shadow:none !important;border:1px solid var(--wds-line-normal);border-radius:12px}
body .type-btn:hover, body .type-btn.active, body .type-btn.selected{border-color:var(--wds-primary);background:var(--wds-primary-weak)}

/* Buttons */
body .cta-btn, body .btn-cta, body .btn-primary, body .hero-cta, body .pdf-btn, body .sig-btn{
  border-radius:12px !important;box-shadow:none !important;background-image:none;font-weight:600}
body .filter-btn, body .quick-btn, body .sub-btn, body .summary-btn, body .reset-btn{border-radius:10px !important;box-shadow:none !important}

/* SNS: 원색 알약 → Outlined */
body .social-btn, body .sns-btn, body .sns-icon, body .social-icon, body .btn-kakao{
  background:var(--wds-bg) !important;color:var(--wds-label-normal) !important;
  border:1px solid var(--wds-line-normal) !important;border-radius:10px !important;box-shadow:none !important;font-weight:600}
body .social-btn svg, body .sns-btn svg, body .sns-icon svg, body .social-icon svg{fill:var(--wds-label-alternative)}

/* Footer: 남색 → Label Normal */
body .site-footer, body .sns-footer, body .footer{background:var(--wds-label-normal) !important;background-image:none !important}

/* ===== Landing hero, 밝은 첫 화면 (대표 결정 2026-09-13) ===== */
.hero:has(.hero-video){background:var(--wds-bg);color:var(--wds-label-normal);min-height:440px;border-bottom:1px solid var(--wds-line-alternative)}
.hero .hero-video, .hero .hero-overlay{display:none}
.hero:has(.hero-video) h1{color:var(--wds-label-normal)}
.hero:has(.hero-video) h1 span{color:var(--wds-label-alternative);opacity:1}
.hero:has(.hero-video) .hero-badge{border-color:var(--wds-line-normal);color:var(--wds-primary);background:var(--wds-primary-weak)}
.hero:has(.hero-video) .hero-slogan{color:var(--wds-label-alternative);opacity:1}

/* ===== 페이지별 보정 (2026-09-13) ===== */
/* incorporation: 광택·페이드·금색 글자 제거, 수수료 카드 중립화, 타임라인 단색 */
body .hero::before, body .hero::after{display:none}
body .hero-eyebrow{text-transform:none;letter-spacing:.0145em}
body .hero-eyebrow .dot{display:none}
body .hero h1 .gold{background:none;-webkit-text-fill-color:currentColor;color:#fff;opacity:.72}
/* ⚠️ .fee-box 는 incorporation 과 fee-calculator 두 곳에 있다. 이 규칙은 incorporation 용이다.
   계산기의 .fee-box 는 파란 결과 카드 안의 반투명 박스라 흰 바탕을 씌우면 흰 글자가 사라진다.
   실제로 2026-09-25 배포 후 대표가 「계산 툴이 아무것도 안 보인다」로 지적했다. 바로 아래에서 되돌린다. */
body .fee-box{background:var(--wds-bg);border:1px solid var(--wds-line-normal);box-shadow:none;margin-top:32px}
body .fee-box-head{color:var(--wds-label-normal);font-weight:700}
body .fee-box-head .icon{display:none}
/* 계산기 결과 카드 안쪽은 원래대로 되돌린다 (파란 바탕 위 반투명 흰 박스) */
/* 2026-10-08 계산기 결과 카드가 표(.dual-table)로 바뀌어 .fee-box 가 없어졌다. 아래 규칙은 지금 아무것도 덮지 않는다 */
body .result-card .fee-box{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);margin-top:0}
body .fee-table th, body .fee-table td{border-bottom-color:var(--wds-line-alternative)}
body .fee-table td.amount{color:var(--wds-label-normal);font-weight:700}
body .fee-highlight{background:var(--wds-bg-alt);border:1px solid var(--wds-line-normal);border-left-width:1px;box-shadow:none}
body .fee-highlight .label{background:var(--wds-primary-weak);color:var(--wds-primary);border-radius:6px;text-transform:none}
body .fee-highlight strong{color:var(--wds-label-normal)}
body .section-title-eyebrow{background:var(--wds-fill-normal);color:var(--wds-label-alternative);border-radius:6px;text-transform:none;letter-spacing:.02em;font-weight:600}
body .section-title h2{font-weight:700}
body .section-title h2 .accent{background:none;-webkit-text-fill-color:currentColor;color:var(--wds-primary)}
body .timeline::before{background:var(--wds-line-normal);opacity:1;width:2px}
body .step-num, body .step.step--legal .step-num, body .step.step--bank .step-num, body .step.step--client .step-num{
  border:2px solid var(--wds-line-normal);color:var(--wds-label-normal);box-shadow:none;font-weight:700}
body .step:hover .step-num, body .step.step--legal:hover .step-num, body .step.step--bank:hover .step-num, body .step.step--client:hover .step-num{
  background:var(--wds-primary);border-color:var(--wds-primary);color:#fff;transform:none;box-shadow:none}
body .step:hover .step-card{transform:none;box-shadow:none;border-color:var(--wds-line-normal)}
body .step-card::before{display:none}

/* contract: 문의 박스·진행바 단색, 카카오 노란 버튼 → 흰 Solid */
body .cta-section{background:var(--wds-label-normal);background-image:none;border-radius:16px}
body .cta-section .cta-btn{background:var(--wds-bg) !important;color:var(--wds-label-normal) !important;border-radius:12px !important;padding:12px 28px}
body .progress-bar-fill{background:var(--wds-primary)}
body .progress-bar-bg{border-radius:6px;height:6px}

/* fee-calculator: 컬러 이모지 → 단색 */
body .type-icon{filter:grayscale(1);opacity:.7}

/* 보수표 계산기: 시작가 안내 (대표 지시 2026-09-24)
   조건을 본문과 같은 크기로 적는다. 작게 흐리게 적으면 기만이 된다. */
.fee-start{
  max-width:720px;margin:24px auto 0;padding:20px 24px;
  background:var(--wds-bg);border:1px solid var(--wds-line-normal);border-radius:16px;
}
.fee-start__head{
  font-size:15px;font-weight:500;color:var(--wds-label-alternative);margin:0 0 10px;
}
.fee-start__rows{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:14px}
.fee-start__row{display:flex;align-items:baseline;gap:8px}
.fee-start__who{font-size:15px;color:var(--wds-label-alternative)}
.fee-start__amt{
  font-size:28px;font-weight:700;letter-spacing:-.02em;
  color:var(--wds-primary);font-variant-numeric:tabular-nums;
}
.fee-start__unit{font-size:15px;font-weight:500;color:var(--wds-label-normal)}
.fee-start__cond{
  font-size:15px;line-height:1.7;color:var(--wds-label-normal);
  margin:0;padding-top:14px;border-top:1px solid var(--wds-line-alternative);
}
.fee-start__cond a{color:var(--wds-primary);text-decoration:underline}
@media(max-width:600px){
  .fee-start{margin:16px 16px 0;padding:16px 18px}
  .fee-start__rows{gap:20px}
  .fee-start__amt{font-size:24px}
}

/* 법인설립: 왼쪽 세로 띠 제거 (대표 지시 2026-09-23)
   DESIGN.md 「Primary 외 원색 띠 금지 / 그림자 대신 선」에 맞춘다.
   구분은 띠가 아니라 본문 첫 낱말(Tip, 주의 등)과 굵기가 맡는다. */
body .step-note, body .step-faq, body .ref-warn{
  background:var(--wds-bg-alt);
  border:1px solid var(--wds-line-normal);
  color:var(--wds-label-normal);
}
body .step-note strong, body .ref-warn strong{color:var(--wds-label-normal);font-weight:600}
body .step-faq strong{color:var(--wds-primary);font-weight:600}

/* 계산기 유의사항 박스: 왼쪽 주황 띠 제거 (CONCEPT.md Visual behavior) */
body .notes-box{
  background:var(--wds-bg-alt);
  border:1px solid var(--wds-line-normal);
  border-radius:12px;
}
body .notes-box h4{color:var(--wds-label-normal)}

/* 강조 박스의 왼쪽 세로 띠 제거 (대표 지시 2026-09-24)
   제목 구실을 하는 .section-title 과 .acc-summary 는 남긴다. */
body .transition-box,
body .expense-item.bank-only,
body .expense-item.bank-recommend,
body .notice-inner,
body .greeting-signature{
  border-left:1px solid var(--wds-line-normal) !important;
  border:1px solid var(--wds-line-normal) !important;
  background:var(--wds-bg-alt) !important;
  border-radius:12px;
}

/* 일본어판 토글 내리기 (대표 지시 2026-09-25)
   파일(ja/ 8페이지)은 남겨 두고 들어가는 길만 막는다. 되돌리려면 이 블록을 지우면 된다.
   왜: 일본어판을 지금 보는 거래처가 없고, 한국어판만 컨셉이 적용돼 있어
       두 판의 격차가 벌어진 상태로 두는 것보다 입구를 닫는 편이 낫다. */
.lang-toggle, .lang-pill{display:none !important}

/* ===== 주황 글자 대비 올리기 (대표 결정 2026-09-26) =====
   #f57c00 이 연한 주황 배경 #fff3e0 위에서 2.5:1 로 렌더됐다(브라우저 실측, 26곳).
   기준은 4.5:1 이고, 이 사이트를 보는 분들은 사장님이라 노안에 흐릿했다.
   #bf360c 는 #fff3e0 위 5.11 / #f7f7f8 위 5.23 / 흰 배경 5.60 으로 세 곳 다 통과한다.
   주황 계열의 성격은 유지되고, 법인설립 페이지 그라데이션에 이미 쓰이던 색이다.
   배경으로 쓰인 자리(.category-header.extra-header 등)는 흰 글자가 얹혀 있어
   어두워지면 대비가 오히려 2.70 에서 5.60 으로 좋아진다. */
body{--warning:#bf360c; --warn:#bf360c}

/* 변수를 안 쓰고 색을 직접 적은 자리들 */
body .badge-ind{color:#bf360c}                        /* bank-info 구분 배지 */
body .notes-box h4{color:#bf360c}                     /* fee-calculator 참고 박스 제목 */
body .notes-box ul li::before{color:#bf360c}          /* 같은 박스의 ◇ 기호 */
body .notice-inner strong{color:#bf360c}              /* scope-guide 안내문 강조 */
body .cycle-request{color:#bf360c}                    /* scope-guide 요청 표시 */
body .card--onboarding .card-icon,
body .card--onboarding .card-tag{color:#bf360c}       /* 랜딩 원본 카드(숨김 상태) */
/* 범례 점은 인라인 style 이라 !important 가 필요하다 */
body .legend-dot[style*="F57C00"],
body .legend-dot[style*="f57c00"]{background:#bf360c !important}

/* ===== 줄바꿈 다듬기 (2026-09-26 대표 지적) =====
   짧은 설명문에서 마지막 낱말만 다음 줄에 혼자 남는 일이 있었다.
   (「…배경에 들어갑니다. 수임계약을 맺으시면 사무소가 직접 작성해 / 드립니다.」)
   정본 규칙: 제목은 text-wrap:balance, 문단은 text-wrap:pretty.
   문장마다 <br> 을 넣는 방식은 본문을 딱딱하게 만들어 쓰지 않는다. */
body p, body li, body dd, body dt, body td, body figcaption{text-wrap:pretty}
body h1, body h2, body h3, body h4, body h5, body h6,
body .hero-sub, body .summary-desc, body .section-title p,
body .guide-body .g-note, body .modal-title{text-wrap:balance}