/* Site-wide typography and usability layer loaded through Cloudflare Pages middleware. */

:root{
  --font-sans:"Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:var(--weight-regular);
  line-height:1.68;
  letter-spacing:-.01em;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

button,input,select,textarea{
  font-family:inherit;
  font-synthesis:none;
}

h1,h2,h3,h4,h5,h6,strong,b,.brand,.button,.calculate-button,.copy-button,.calculator-tab{
  font-family:inherit;
  font-style:normal;
  font-synthesis:none;
}

h1,h2,h3,h4,h5,h6{
  margin-block-start:0;
  color:var(--text);
  font-weight:var(--weight-bold);
  letter-spacing:-.025em;
  word-break:keep-all;
  overflow-wrap:break-word;
}

.app-hero h1,.hero h1{
  max-width:18ch;
  margin:18px 0 20px;
  font-size:clamp(38px,5.2vw,58px);
  font-weight:var(--weight-bold);
  line-height:1.18;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.hero-line{display:block}
.app-hero h1 em,.hero h1 em,
.app-hero h1 i,.hero h1 i,
.app-hero h1 .hero-accent,.hero h1 .hero-accent{
  color:var(--accent);
  font:inherit;
  font-style:normal;
  letter-spacing:inherit;
}

.article-card h1,.legal-card h1{
  font-size:clamp(34px,5vw,50px);
  font-weight:var(--weight-bold);
  line-height:1.22;
  letter-spacing:-.03em;
}

.workspace-header h2,.section-heading h2,.faq-title h2,.compact-faq h2,
.guide-hub h2,.quick-next-card h3,.calculator-head h2,.article-card h2,.legal-card h2{
  font-weight:var(--weight-bold);
  line-height:1.3;
  letter-spacing:-.025em;
}

p,li,summary,label,small{font-style:normal}

.hero-description,.app-hero .hero-description,.legal-meta,
.calculator-head p,.quick-next-card p,.guide-link-card span{
  letter-spacing:-.008em;
}

.brand{
  font-size:18px;
  font-weight:var(--weight-bold);
  letter-spacing:-.02em;
}

.brand-mark{
  font-weight:var(--weight-bold);
  letter-spacing:0;
}

.main-nav{
  font-weight:var(--weight-medium);
  letter-spacing:-.005em;
}

.eyebrow,.section-kicker,.calculator-label,.result-eyebrow,.tool-number{
  font-weight:var(--weight-bold);
  letter-spacing:.035em;
  text-transform:none;
}

.button,.calculate-button,.calculator-tab,.directory-filter{
  font-weight:var(--weight-semibold);
  letter-spacing:-.01em;
}

.field,.input-section legend,.advanced-options summary,.currency-bar label{
  font-weight:var(--weight-semibold);
}

.input-wrap input,.currency-bar select{
  font-weight:var(--weight-semibold);
  letter-spacing:0;
}

.result-main strong,.preview-profit,
.metric-grid b,.preview-metrics b,.audit-summary b,.audit-table,
input,select,textarea,.cost-breakdown{
  font-variant-numeric:tabular-nums lining-nums;
}

.result-main strong,.preview-profit{
  font-weight:var(--weight-bold);
  line-height:1.12;
  letter-spacing:-.02em;
  word-break:normal;
  overflow-wrap:anywhere;
}

.status-pill,.result-badge,.diagnosis span,.calculator-icon{
  font-weight:var(--weight-bold);
}

.button,.calculate-button,.copy-button,.row-remove,.main-nav a{touch-action:manipulation}
.result-panel{scroll-margin-top:96px}

/* 기존 카드 내부 가상 말풍선을 끄고 body에 고정 배치되는 접근성 툴팁을 사용합니다. */
.tip{position:relative;flex:0 0 19px;z-index:1}
.tip::before,.tip::after{display:none!important;content:none!important}
.floating-tooltip{
  position:fixed;
  z-index:1000;
  width:max-content;
  max-width:min(300px,calc(100vw - 24px));
  padding:11px 13px;
  border:1px solid #2f3d45;
  border-radius:10px;
  background:#172126;
  color:#fff;
  font-size:12px;
  font-weight:var(--weight-medium);
  line-height:1.55;
  letter-spacing:-.005em;
  text-align:left;
  white-space:normal;
  pointer-events:none;
  box-shadow:0 12px 32px rgba(23,33,38,.24);
}
.floating-tooltip[hidden]{display:none}

.currency-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 16px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
}
.currency-bar label{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
.currency-bar select{
  min-height:40px;
  max-width:230px;
  padding:0 34px 0 11px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:var(--input);
  color:var(--text);
  cursor:pointer;
}
.currency-bar p{margin:0;color:var(--muted);font-size:12px;line-height:1.55;text-align:right}

@media(max-width:720px){
  .app-hero h1,.hero h1{font-size:clamp(34px,10.5vw,44px);line-height:1.22;letter-spacing:-.024em}
  .article-card h1,.legal-card h1{font-size:clamp(31px,8.5vw,40px);line-height:1.26}
  .site-header{overflow:visible}
  .nav-wrap{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    min-height:auto;
    padding:10px 0;
  }
  .brand{justify-self:start}
  .main-nav{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    width:100%;
    max-width:none;
    gap:6px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .main-nav a,
  .main-nav a:not(.nav-cta),
  .main-nav .nav-cta{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 9px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--card);
    white-space:nowrap;
    font-size:12px;
    text-align:center;
  }
  .main-nav .nav-cta{border-color:var(--accent);background:var(--accent);color:#fff}
  .main-nav a:focus-visible{border-color:var(--accent)}
  .legal-card .hero-actions{display:grid}
  .legal-card .hero-actions .button{width:100%}
  .result-panel{scroll-margin-top:170px}
  .currency-bar{display:block;margin-bottom:13px}
  .currency-bar label{justify-content:space-between;white-space:normal}
  .currency-bar select{max-width:62%;min-width:0}
  .currency-bar p{margin-top:8px;text-align:left}
}

@media(max-width:420px){
  .brand{font-size:17px}
  .main-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .currency-bar label{display:grid;gap:7px}
  .currency-bar select{width:100%;max-width:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}