/* 패리티 비전 홈페이지
   레이아웃·컴포넌트 디자인은 SaasCN 템플릿(shadcn-saas-landing)을 따름:
   점선 테두리 격자, 섹션 모서리의 + 표시, 빗금 구분 띠, 무채색 팔레트, Geist 글꼴(한글은 Pretendard), 밝은/어두운 화면.
   SaasCN: Copyright (c) 2025 Anirudh (techwithanirudh), MIT License.
   https://github.com/techwithanirudh/shadcn-saas-landing
   첫 화면의 #3B70DA 번짐과 결(grain)만 패리티 비전 고유 디자인. */

:root {
  /* SaasCN(fumadocs neutral) 색. 보조 글자색만 대비 4.5:1 을 넘기도록 조금 진하게 */
  --background: hsl(0 0% 96%);
  --foreground: hsl(0 0% 3.9%);
  --card: hsl(0 0% 93%);
  --muted-fg: hsl(0 0% 38%);
  --border: hsl(0 0% 80%);
  --primary: hsl(0 0% 9%);
  --primary-fg: hsl(0 0% 98%);
  --accent: hsl(0 0% 88%);
  --hatch: hsl(0 0% 84%);
  --plus: hsl(0 0% 72%);
  /* 제품 화면 안에서만 쓰는 패리티 비전 색 */
  --navy: #0E2A3B;
  /* 다른 곳 표시: 히어로·카드 번짐과 같은 파랑(#3B70DA) 한 가지만 */
  --blue: #3B70DA;
  --mark-bg: rgba(59, 112, 218, .12);
  --mark-line: rgba(59, 112, 218, .45);
  --mark-fg: #1f4fae;
  --text-blue: #3B70DA; /* 제목 강조 파랑 (히어로 번짐과 같은 색) */
  --ph-bg: #fff4d6;
  --ph-fg: #7a4b00;
  --ph-line: #d9a441;

  --font-sans: "Geist", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-ko: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --radius: .5rem;
  --header-h: 57px; /* main.js 가 실제 높이로 덮어씀 */
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
.dark {
  --background: hsl(0 0% 7%);
  --foreground: hsl(0 0% 92%);
  --card: hsl(0 0% 11%);
  --muted-fg: hsl(0 0% 64%);
  --border: hsl(0 0% 20%);
  --primary: hsl(0 0% 98%);
  --primary-fg: hsl(0 0% 9%);
  --accent: hsl(0 0% 18%);
  --hatch: hsl(0 0% 17%);
  --plus: hsl(0 0% 30%);
  --mark-bg: rgba(59, 112, 218, .2);
  --mark-line: rgba(110, 152, 236, .55);
  --mark-fg: #a9c3f5;
  --text-blue: #5B8DEF; /* 어두운 화면에서 같은 파랑을 조금 밝게 */
  --ph-bg: rgba(255, 228, 160, .1);
  --ph-fg: #ffd98a;
  --ph-line: rgba(255, 217, 138, .5);
  color-scheme: dark;
}

/* 기본 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; accent-color: var(--primary); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 400 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
::selection { background: var(--accent); color: var(--foreground); }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
button { font: inherit; color: inherit; cursor: pointer; }
section[id], #main { scroll-margin-top: calc(var(--header-h) + 8px); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--foreground) 45%, transparent); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--primary); color: var(--primary-fg); border-radius: var(--radius); transform: translateY(-200%); }
.skip:focus { transform: none; }
.muted { color: var(--muted-fg); }
.small { font-size: 14px; }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-dark { display: none; }
.dark .logo-light { display: none; }
.dark .logo-dark { display: block; }
[hidden] { display: none !important; }

/* Tailwind container 와 같은 폭 */
.container { width: 100%; margin-inline: auto; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1400px; } }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* 섹션 틀: 위아래 점선은 화면 끝까지, 양옆 점선은 컨테이너, 아래 모서리에 + 표시 */
.sec, .separator { border-top: 1px dashed var(--border); }
.frame { position: relative; }
@media (min-width: 640px) {
  .frame { border-inline: 1px dashed var(--border); }
  .frame::before, .frame::after {
    content: ""; position: absolute; bottom: -12px; z-index: 2; width: 24px; height: 24px; pointer-events: none;
    background:
      linear-gradient(var(--plus), var(--plus)) center / 14px 1.5px no-repeat,
      linear-gradient(var(--plus), var(--plus)) center / 1.5px 14px no-repeat;
  }
  .frame::before { left: -12px; }
  .frame::after { right: -12px; }
}
.hatch {
  height: 32px;
  background-image: linear-gradient(45deg, var(--hatch) 12.5%, transparent 12.5%, transparent 50%, var(--hatch) 50%, var(--hatch) 62.5%, transparent 62.5%, transparent 100%);
  background-size: 4px 4px;
}
.pt-10 { padding-top: 40px; }

/* 제목 */
h2 { font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: -.05em; max-width: 36rem; }
:root:not([data-lang="en"]) h2 { letter-spacing: -.03em; }
@media (min-width: 768px) { h2 { font-size: 48px; line-height: 1.1; } }
h3 { font-weight: 400; font-size: 20px; line-height: 1.4; letter-spacing: -.025em; }
.lead { font-size: 18px; line-height: 1.625; letter-spacing: -.025em; max-width: 36rem; }
@media (min-width: 1024px) { .lead { max-width: 32rem; } }
.sec-head { display: flex; flex-direction: column; gap: 8px; padding: 0 24px; }

/* 버튼 (shadcn) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  height: 36px; padding: 0 16px; border-radius: calc(var(--radius) - 2px); border: 1px solid transparent;
  font-size: 14px; font-weight: 500; transition: background-color .15s, color .15s;
}
.btn .i { transition: transform .2s; }
.btn:hover .i { transform: rotate(-12deg); }
.btn-sm { height: 32px; padding: 0 12px; }
.btn-lg { height: 40px; padding: 0 24px; }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--accent); }
.inline-link { font-weight: 500; color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.inline-link:hover { text-decoration-color: var(--foreground); }

/* 1. 헤더 */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--background) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px dashed var(--border); }
.nav-row { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 16px; }
@media (min-width: 640px) { .nav-row { border-inline: 1px dashed var(--border); } }
@media (min-width: 1024px) { .nav-row { padding: 0 24px; } }
.brand img { width: 132px; height: auto; }
.site-nav { display: none; align-items: center; gap: 8px; padding: 0 12px; }
.site-nav a { padding: 8px; font-size: 14px; color: var(--muted-fg); transition: color .15s; }
.site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--foreground); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font-size: 13px; font-weight: 500; color: var(--muted-fg); }
.lang-btn:hover { color: var(--foreground); background: var(--accent); }
.nav-cta { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; }
.icon-btn:hover { background: var(--accent); }
.icon-btn .i { width: 22px; height: 22px; }
.mobile-nav { border-top: 1px dashed var(--border); }
.mobile-nav .container { display: flex; flex-direction: column; padding: 8px 16px 16px; }
.mobile-nav a:not(.btn) { padding: 12px 4px; font-size: 15px; color: var(--muted-fg); border-bottom: 1px dashed var(--border); }
.mobile-nav .btn { margin-top: 12px; }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .menu-btn { display: none; }
  .mobile-nav { display: none !important; }
}

/* 2. 첫 화면 (SaasCN Hero): 빗금 바탕 사이로 오른쪽 아래 #3B70DA 번짐이 비친다 */
.hero { position: relative; overflow: hidden; padding: 64px 16px; background-image: linear-gradient(45deg, var(--hatch) 12.5%, transparent 12.5%, transparent 50%, var(--hatch) 50%, var(--hatch) 62.5%, transparent 62.5%, transparent 100%); background-size: 4px 4px; }
@media (min-width: 640px) { .hero { padding: 96px 64px; } }
@media (min-width: 768px) { .hero { padding-block: 128px; } }
/* 원본의 보라·하늘색 번짐 이미지(1004x900, 오른쪽 아래 모서리에 반쯤 걸침)를 같은 자리·크기의 #3B70DA 번짐으로 */
.hero-glow {
  position: absolute; right: 0; bottom: 0; z-index: -1; width: 1004px; height: 900px; max-width: none;
  transform: translate(50%, 50%); pointer-events: none; opacity: .8; filter: blur(28px);
  /* 원본 이미지처럼 가운데가 진하고 가장자리로 갈수록 옅어지는 덩어리. 가운데만 같은 파랑의 밝은 톤 */
  background:
    radial-gradient(ellipse 24% 22% at 56% 57%, rgba(110, 150, 232, 1), transparent 75%),
    radial-gradient(ellipse 46% 42% at 50% 52%, rgba(59, 112, 218, 1), rgba(59, 112, 218, .55) 45%, transparent 75%),
    radial-gradient(ellipse 36% 32% at 30% 60%, rgba(59, 112, 218, .85), transparent 75%),
    radial-gradient(ellipse 34% 26% at 52% 28%, rgba(59, 112, 218, .6), transparent 72%);
  animation: glow-in .4s ease-out both;
}
.dark .hero-glow { opacity: 1; }
/* 원본 이미지의 자글자글한 점 질감: 번짐과 같은 자리에 잔 노이즈를 깔고, 번짐 모양으로만 보이게 가림 */
.hero-grain {
  position: absolute; right: 0; bottom: 0; z-index: -1; width: 1004px; height: 900px; max-width: none;
  transform: translate(50%, 50%); pointer-events: none; opacity: .9; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 52%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 58% 54% at 50% 52%, #000 40%, transparent 85%);
}
.dark .hero-grain { opacity: .6; }
@keyframes glow-in { from { opacity: 0; } }
.hero-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; margin-inline: auto; }
.hero-text { display: flex; flex-direction: column; gap: 16px; }
.hero h1 { max-width: 42rem; text-align: center; font-weight: 400; font-size: 48px; line-height: 1.05; letter-spacing: -.05em; }
:root:not([data-lang="en"]) .hero h1 { letter-spacing: -.035em; line-height: 1.15; }
@media (min-width: 768px) { .hero h1 { font-size: 72px; } }
.hero-text p { max-width: 42rem; text-align: center; font-size: 18px; line-height: 1.625; letter-spacing: -.025em; }
@media (min-width: 768px) { .hero-text p { font-size: 20px; } }
/* 빗금 줄 위에서도 대비 4.5:1 이상이 되도록 밝은 화면에서만 조금 진하게 */
:root:not(.dark) .hero-text p { color: hsl(0 0% 32%); }
.ghost-fill, .pill-btn { background: color-mix(in srgb, var(--card) 70%, transparent); }
.ghost-fill:hover, .pill-btn:hover { background: var(--accent); }
.pill-btn { gap: 16px; height: auto; min-height: 32px; padding-block: 6px; white-space: normal; text-align: center; }
.btn-row.center { justify-content: center; }

/* 찾는 차이 줄 (SaasCN 고객 로고 줄 배치) */
.strip { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 24px; }
.strip > p { text-align: center; }
@media (min-width: 640px) { .strip { flex-direction: row; gap: 64px; } .strip > p { max-width: 20rem; text-align: left; } }
@media (min-width: 768px) { .strip { padding-block: 40px; } .marquee { width: 50%; } }
.marquee { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 32px; animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--foreground); opacity: .75; }
@keyframes marquee { to { transform: translateX(calc(-50% - 16px)); } }

/* 3. 기능 격자 (SaasCN Features) */
.feature-grid { display: grid; grid-template-columns: 1fr; margin-top: 40px; border-top: 1px dashed var(--border); padding-bottom: 16px; }
/* 오른쪽 끝 칸의 점선이 틀 점선과 겹치게 (휴대폰은 틀 점선이 없어 칸 점선도 뺌) */
.feature, .step { border-right: 0; }
@media (min-width: 640px) { .feature-grid, .steps { margin-right: -1px; } .feature, .step { border-right: 1px dashed var(--border); } }
.feature {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 24px;
  border-bottom: 1px dashed var(--border); transition: background-color .15s;
}
.feature:hover { background: var(--card); }
.feature p { max-width: 20rem; font-size: 16px; margin-top: 2px; }

/* '왜 필요한가요' 네 칸: 히어로와 같은 번짐을 칸마다 다른 파랑 계열·다른 자리에.
   칸 전체를 덮는 타원 그라디언트라 경계선이 생기지 않고, 위쪽에서 시작해 글자가 있는 아래쪽에 닿기 전에 사라진다 */
/* 같은 번짐을 뉴스룸 목록, 진행 단계, 자주 묻는 질문에도.
   글자가 위쪽에 있는 줄(뉴스룸, 질문)은 번짐을 옅게(--ga) 해서 가독성을 지킨다 */
:is(#service .feature, .step, .news-item, .accordion details) { position: relative; isolation: isolate; }
:is(#service .feature, .step, .news-item, .accordion details)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse var(--gw, 60%) var(--gh, 70%) at var(--gx, 70%) 0%,
    color-mix(in srgb, var(--glow) var(--ga, 42%), transparent) 0%,
    color-mix(in srgb, var(--glow) calc(var(--ga, 42%) / 2), transparent) 40%,
    transparent 100%);
  transition: opacity .3s;
}
:is(#service .feature, .step, .news-item, .accordion details):hover::before { opacity: .8; }
.dark :is(#service .feature, .step) { --ga: 48%; }
:is(.news-item, .accordion details) { --ga: 26%; }
.dark :is(.news-item, .accordion details) { --ga: 34%; }
/* 네 가지 파랑 계열을 칸 순서대로 돌려 씀 (뉴스룸은 li 에서 물려받음) */
:is(.feature, .step, .accordion details, .news-list > li):nth-child(4n+1) { --glow: #3B70DA; --gx: 62%; --gw: 55%; --gh: 72%; }  /* 히어로와 같은 파랑 */
:is(.feature, .step, .accordion details, .news-list > li):nth-child(4n+2) { --glow: #4FA3E0; --gx: 100%; --gw: 85%; --gh: 72%; } /* 하늘빛, 오른쪽 위 */
:is(.feature, .step, .accordion details, .news-list > li):nth-child(4n+3) { --glow: #2E9BA6; --gx: 0%; --gw: 85%; --gh: 70%; }   /* 청록, 왼쪽 위 */
:is(.feature, .step, .accordion details, .news-list > li):nth-child(4n+4) { --glow: #5B83E6; --gx: 82%; --gw: 55%; --gh: 72%; }  /* 밝은 파랑, 오른쪽 위 */
.i-feature { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.i-feature:hover { transform: rotate(12deg) scale(1.25); }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .feature { gap: 88px; } }
@media (min-width: 768px) { .feature { gap: 136px; } }
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .feature { gap: 184px; }
  .feature.lg { grid-column: span 2; }
}
.feature-grid.two { grid-template-columns: 1fr; }
@media (min-width: 640px) { .feature-grid.two { grid-template-columns: repeat(2, 1fr); } .feature-grid.two .feature { gap: 72px; } }

/* 4. 예시 */
.example-grid { display: grid; grid-template-columns: 1fr; margin-top: 40px; border-top: 1px dashed var(--border); }
.example-grid > * { min-width: 0; }
@media (min-width: 1024px) { .example-grid { grid-template-columns: 1fr 1fr; } .pairs { border-left: 1px dashed var(--border); } }
.sheet { margin: 24px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px 0; }
.sheet-title { font-weight: 600; }
.sheet-doc { padding: 2px 20px 14px; border-bottom: 1px dashed var(--border); }
.diff { padding: 14px 20px; border-bottom: 1px dashed var(--border); }
.diff-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.loc { font-size: 13px; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.diff-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.val { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.side-key { flex: none; font-size: 12px; font-weight: 500; color: var(--muted-fg); }
.sheet-foot { padding: 12px 20px 16px; }
.test-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 20px; border-bottom: 1px dashed var(--border); }
.test-stats dt { font-size: 15px; }
.test-stats dd { font-size: 36px; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.test-stats dd span { font-size: 16px; letter-spacing: 0; margin-left: 2px; color: var(--muted-fg); }
.test-stats dd.hl { color: var(--mark-fg); }
.test-stats dd.dd-text { font-size: 24px; letter-spacing: -.02em; }
.pairs { display: flex; flex-direction: column; }
.pair { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-bottom: 1px dashed var(--border); transition: background-color .15s; }
.pair:last-child { border-bottom: 0; }
.pair:hover { background: var(--card); }
.pair .tag { align-self: flex-start; }
.pair-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.side { min-width: 0; }
.side .side-key { display: block; margin-bottom: 2px; }
.side p { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* '…의심' 표시: SaasCN 테두리 버튼처럼 얇은 테두리 알약 + 파란 점 */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--foreground); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(59, 112, 218, .18); }
/* 다른 숫자: 옅은 파랑 바탕 + 얇은 파랑 테두리. 없는 것(단위 표기 없음)은 점선 테두리로 */
mark { background: var(--mark-bg); color: var(--mark-fg); font-weight: 600; padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--mark-line); font-variant-numeric: tabular-nums; }
mark.gap { background: transparent; box-shadow: none; outline: 1px dashed var(--mark-line); outline-offset: -1px; font-size: .9em; font-weight: 500; white-space: nowrap; }
.after-note { padding: 20px 24px 24px; border-top: 1px dashed var(--border); font-size: 15px; }
@media (max-width: 600px) { .sheet { margin: 16px; } .diff-vals, .pair-body { grid-template-columns: 1fr; gap: 4px; } }

/* 5. 진행 방식 (SaasCN 후기 카드 줄 배치) */
.steps { display: grid; grid-template-columns: 1fr; margin-top: 40px; border-top: 1px dashed var(--border); }
.step { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 220px; padding: 24px; border-bottom: 1px dashed var(--border); transition: background-color .15s; }
.step:hover { background: var(--card); }
.step-num { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; font-variant-numeric: tabular-nums; }
.step p { font-size: 16px; max-width: 20rem; margin-top: 2px; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } .step { min-height: 280px; } }
.turnaround { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 24px; }
.turnaround dt { font-weight: 500; }

/* 상품 안내 (Ink Orbit Pricing 배치: 가운데 제목, 카드 두 장, 강조 카드는 반전색 + 모서리 꺾쇠) */
.plans { padding: 48px 16px 0; }
@media (min-width: 768px) { .plans { padding: 64px 48px 0; } }
.plans-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 40px; }
.plans-head h2 { max-width: none; }
.plans-head p { max-width: 36rem; font-size: 16px; line-height: 1.6; }
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 880px; margin-inline: auto; padding-bottom: 40px; }
@media (min-width: 768px) { .plan-grid { grid-template-columns: 1fr 1fr; } }
.plan, .plan-frame { display: flex; }
.plan-frame { position: relative; }
.plan { flex: 1; flex-direction: column; gap: 14px; padding: 26px 24px 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.18); }
.plan-hot { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.plan-c { position: absolute; width: 12px; height: 12px; border: 0 solid var(--plus); pointer-events: none; }
.plan-c.tl { top: -6px; left: -6px; border-width: 1.5px 0 0 1.5px; }
.plan-c.tr { top: -6px; right: -6px; border-width: 1.5px 1.5px 0 0; }
.plan-c.bl { bottom: -6px; left: -6px; border-width: 0 0 1.5px 1.5px; }
.plan-c.br { bottom: -6px; right: -6px; border-width: 0 1.5px 1.5px 0; }
.text-blue { color: var(--text-blue); }
.tag-plain { border-radius: 6px; padding-inline: 10px; }
.tag-plain::before { content: none; }
/* 로고 글꼴 'Parity' + 상품 이름. 글자 높이를 대문자 높이에 맞추고 기준선을 맞춤 */
.plan-title { display: inline-flex; align-items: baseline; gap: .32em; font-size: 17px; }
.wm { height: .913em; width: auto; aspect-ratio: 400 / 150; vertical-align: -.2em; align-self: baseline; transform: translateY(.2em); }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; }
.plan-badge { padding: 2px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 11.5px; font-weight: 500; opacity: .85; }
.plan-desc { font-size: 14px; line-height: 1.55; min-height: 3.1em; }
.plan-hot .plan-desc, .plan-hot .plan-cut { color: color-mix(in srgb, var(--background) 68%, var(--foreground)); }
.plan-time { font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan-cut { margin-top: -6px; font-size: 13px; }
.plan-feats { display: grid; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--border); font-size: 14px; }
.plan-hot .plan-feats { border-top-color: color-mix(in srgb, var(--background) 30%, transparent); }
.plan-feats li { display: flex; align-items: flex-start; gap: 9px; }
.plan-feats .i { width: 14px; height: 14px; margin-top: 3px; }
.plan-btn { margin-top: auto; width: 100%; }
.plan-btn-hot { background: var(--background); color: var(--foreground); }
.plan-btn-hot:hover { background: color-mix(in srgb, var(--background) 88%, var(--foreground)); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal[data-in] { opacity: 1; transform: none; }

/* 확인 범위: 하는 것 / 하지 않는 것 두 칸 */
.scope-grid { display: grid; grid-template-columns: 1fr; margin-top: 40px; border-top: 1px dashed var(--border); }
@media (min-width: 768px) { .scope-grid { grid-template-columns: 1fr 1fr; } .scope-col + .scope-col { border-left: 1px dashed var(--border); } }
.scope-col { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-bottom: 1px dashed var(--border); }
@media (min-width: 768px) { .scope-col { border-bottom: 0; } }
.scope-list { display: grid; gap: 12px; font-size: 15px; line-height: 1.6; }
.scope-list li { display: flex; gap: 10px; align-items: flex-start; }
.scope-list .i { margin-top: 4px; }
.scope-col:first-child .scope-list .i { color: var(--text-blue); }
.scope-col:last-child .scope-list .i { color: var(--muted-fg); }
.scope-note { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border); line-height: 1.6; }
.scope-grid + .after-note strong { color: var(--foreground); font-weight: 500; }

/* 번역 회사 협력: 자주 묻는 질문과 같은 두 칸 배치, 오른쪽은 번호 목록 */
.faq-head .tag { align-self: flex-start; }
.faq-head .btn-row { margin-top: 8px; }
.partner-list li { display: flex; gap: 16px; padding: 20px 24px; border-bottom: 1px dashed var(--border); }
.partner-list li:last-child { border-bottom: 0; }
.partner-list h3 { font-size: 17px; }
.partner-list p { margin-top: 4px; font-size: 15px; line-height: 1.6; }

/* 6. 자주 묻는 질문 배치 (SaasCN FAQ) */
.faq { display: grid; grid-template-columns: 1fr; }
.faq-head { display: flex; flex-direction: column; gap: 8px; padding: 40px 24px; border-bottom: 1px dashed var(--border); }
@media (min-width: 768px) { .faq-head { padding-block: 56px; } }
@media (min-width: 1024px) { .faq { grid-template-columns: 1fr 1fr; } .faq-head { border-bottom: 0; border-right: 1px dashed var(--border); } }
.accordion details { border-bottom: 1px dashed var(--border); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; cursor: pointer;
  font-size: 14px; font-weight: 500; list-style: none; transition: background-color .15s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover, .accordion details[open] summary { background: color-mix(in srgb, var(--card) 55%, transparent); }
.accordion summary .i { margin-top: 2px; color: var(--muted-fg); transition: transform .2s; }
.accordion details[open] summary .i { transform: rotate(180deg); }
.accordion details > p { padding: 16px; font-size: 14px; line-height: 1.6; }

/* 8. 문의 (SaasCN CTA) */
.cta { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 40px 16px; }
@media (min-width: 640px) { .cta { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .cta { padding-block: 56px; } }
@media (min-width: 1024px) { .cta { padding: 64px 24px; } }
.cta-body { display: flex; flex-direction: column; gap: 16px; max-width: 36rem; align-self: center; }
.cta-body > p:first-child { font-size: 16px; }
.send-list { display: grid; gap: 6px; font-size: 15px; }
.send-list li { position: relative; padding-left: 16px; }
.send-list li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-fg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.copy-status { color: var(--foreground); }
.email { color: var(--foreground); font-weight: 500; }

/* [ ] 나중에 채울 칸 */
.ph { background: var(--ph-bg); color: var(--ph-fg); padding: 1px 6px; border-radius: 4px; border: 1px dashed var(--ph-line); font-weight: 500; }

/* 9. 푸터 (SaasCN Footer) */
.site-footer { border-top: 1px dashed var(--border); }
.site-footer .container { padding-inline: 32px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 64px; font-size: 14px; color: var(--muted-fg); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(5, 1fr); } .span-2 { grid-column: span 2; } }
.footer-col { display: flex; flex-direction: column; gap: 24px; }
.footer-title { font-weight: 500; color: var(--foreground); }
.footer-col ul, .biz { display: flex; flex-direction: column; gap: 12px; }
.footer-col a:hover, .link-btn:hover { color: var(--foreground); }
.biz div { display: flex; gap: 8px; flex-wrap: wrap; }
.biz dd { color: var(--foreground); }
.link-btn { padding: 0; border: 0; background: none; font-size: 14px; color: var(--muted-fg); text-align: left; }
.link-btn[aria-pressed="true"] { color: var(--foreground); font-weight: 500; }
/* 아래 정리 줄: 점선 하나 아래 왼쪽은 안내문과 저작권, 오른쪽은 밝기와 맨 위로 */
.copyright { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 32px; margin-top: 48px; padding-block: 24px 64px; border-top: 1px dashed var(--border); }
.footer-legal { display: flex; flex-direction: column; gap: 10px; max-width: 52rem; }
.disclaimer { line-height: 1.6; text-wrap: pretty; }
/* 한국어 안내문은 한 줄에 들어가도록 폭을 조금 넓힘 (영어는 그대로) */
:root:not([data-lang="en"]) .footer-legal { max-width: 60rem; }
.copyright-end { display: flex; align-items: center; gap: 20px; }
.to-top { display: inline-flex; align-items: center; gap: 6px; }
.to-top .i { width: 14px; height: 14px; transform: rotate(-45deg); transition: transform .2s; }
.to-top:hover .i { transform: rotate(-45deg) translateY(-2px); }

.theme-switch { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; justify-self: start; }
.theme-switch button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-fg); }
.theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--foreground); }

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

/* 뉴스레터: 홈 목록(#news)과 기사 페이지(news-1.html) */
.news-list { margin-top: 40px; border-top: 1px dashed var(--border); }
.news-item { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 24px; border-bottom: 1px dashed var(--border); transition: background-color .15s; }
.news-item:hover { background: var(--card); }
@media (min-width: 768px) { .news-item { grid-template-columns: 9rem 1fr auto; gap: 32px; align-items: start; } }
.news-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .news-item .news-meta { flex-direction: column; align-items: flex-start; gap: 8px; } }
.news-body { display: flex; flex-direction: column; gap: 6px; max-width: 44rem; }
.news-title { font-size: 20px; line-height: 1.4; letter-spacing: -.025em; }
.news-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.news-item:hover .news-go .i { transform: rotate(-12deg); }
.news-go .i { transition: transform .2s; }
#news .after-note { border-top: 0; }

.en-only { display: none; }
[data-lang="en"] .en-only { display: inline; }
.back-link { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.back-link:hover { color: var(--foreground); }
.back-link .i { transform: rotate(90deg); }
.post-head { display: flex; flex-direction: column; gap: 20px; padding: 40px 24px 48px; }
@media (min-width: 768px) { .post-head { padding: 56px 48px 64px; } }
.post-head h1 { max-width: 48rem; font-weight: 400; font-size: 34px; line-height: 1.25; letter-spacing: -.035em; }
@media (min-width: 768px) { .post-head h1 { font-size: 48px; line-height: 1.15; } }
.post-summary { display: grid; gap: 8px; max-width: 44rem; font-size: 17px; line-height: 1.6; color: var(--muted-fg); }
.post-summary li { position: relative; padding-left: 18px; }
.post-summary li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.post-body { display: flex; flex-direction: column; gap: 20px; padding: 40px 24px 56px; }
@media (min-width: 768px) { .post-body { padding: 56px 48px 72px; } }
.post-body > * { max-width: 44rem; }
.post-body > p:not(.small) { font-size: 17px; line-height: 1.8; }
.post-h2 { margin-top: 28px; font-size: 24px; }
@media (min-width: 768px) { .post-h2 { font-size: 30px; } }
.post-body > .table-wrap { max-width: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.post-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.post-table th, .post-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--border); }
.post-table thead th { font-weight: 500; color: var(--muted-fg); background: var(--card); border-bottom: 1px solid var(--border); white-space: nowrap; }
.post-table tbody th { font-weight: 500; white-space: nowrap; }
.post-table tbody tr:last-child > * { border-bottom: 0; }
.post-table tr.hl { background: var(--mark-bg); }
.post-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.post-sources { display: grid; gap: 10px; line-height: 1.6; }
.post-note { padding-top: 20px; border-top: 1px dashed var(--border); line-height: 1.6; }
.post-cta { display: flex; flex-direction: column; gap: 24px; padding: 40px 24px; }
@media (min-width: 768px) { .post-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 56px 48px; } }
.post-cta-text { font-size: 22px; line-height: 1.4; letter-spacing: -.03em; max-width: 28rem; }
.news-list.flush { margin-top: 0; }
.post-head > .lead { max-width: 40rem; }
.post-label { align-self: flex-start; padding: 4px 10px; border: 1px dashed var(--mark-line); border-radius: 6px; color: var(--mark-fg); }
.post-steps { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.post-steps li { display: flex; gap: 16px; padding: 16px 18px; border-bottom: 1px dashed var(--border); }
.post-steps li:last-child { border-bottom: 0; }
.post-steps strong { font-weight: 500; }
.post-steps p { margin-top: 2px; font-size: 15px; line-height: 1.6; }
.post-list { display: grid; gap: 8px; font-size: 16px; line-height: 1.7; }
.post-list li { position: relative; padding-left: 18px; }
.post-list li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-fg); }
.post-list strong { font-weight: 500; margin-right: 6px; }
.post-pair { border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); padding: 16px 18px; }

/* 샘플 리포트 (sample-report.html) */
.report-fiction { padding: 2px 10px; border: 1px dashed var(--mark-line); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--mark-fg); }
.report-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.report-meta div { display: flex; gap: 8px; }
.report-meta dt { color: var(--muted-fg); }
.report-meta dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.report-stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px dashed var(--border); }
.report-stats div { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-bottom: 1px dashed var(--border); }
.report-stats div:nth-child(odd) { border-right: 1px dashed var(--border); }
@media (min-width: 768px) { .report-stats { grid-template-columns: repeat(4, 1fr); } .report-stats div { border-bottom: 0; border-right: 1px dashed var(--border); padding: 24px 48px 28px; } .report-stats div:last-child { border-right: 0; } }
.report-stats strong { font-size: 36px; font-weight: 400; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.report-stats div:first-child strong { color: var(--mark-fg); }
.report-stats span { font-size: 14px; color: var(--muted-fg); }
.report-h2 { margin-top: 0; }
.report-docs { display: grid; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.report-docs li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px dashed var(--border); }
.report-docs li:last-child { border-bottom: 0; }
.report-docs li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-docs strong { font-weight: 500; }
.report-no { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-size: 13px; font-variant-numeric: tabular-nums; }
.report-count { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table td { font-variant-numeric: tabular-nums; }
.report-table .tag { white-space: nowrap; }
.report-table .check { color: var(--muted-fg); white-space: nowrap; letter-spacing: .02em; }

/* 영문공시 Q&A (faq.html): 질문 목차, 질문마다 굵은 첫 문장으로 바로 답, 용어 정리 */
.qa-toc { display: grid; gap: 6px; padding-left: 20px; list-style: decimal; color: var(--muted-fg); }
.qa-toc a { text-decoration-color: color-mix(in srgb, var(--foreground) 20%, transparent); }
.qa-q { scroll-margin-top: calc(var(--header-h) + 16px); }
.qa-a { display: flex; flex-direction: column; gap: 8px; }
.qa-a > p:not(.small) { font-size: 17px; line-height: 1.8; }
.qa-a strong { font-weight: 600; }
.terms { display: grid; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); max-width: none; }
.terms div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; border-bottom: 1px dashed var(--border); }
.terms div:last-child { border-bottom: 0; }
@media (min-width: 768px) { .terms div { grid-template-columns: 11rem 1fr; gap: 16px; } }
.terms dt { font-weight: 500; }
.terms dd { color: var(--muted-fg); line-height: 1.65; }
.post-head > .btn { align-self: flex-start; }
.post-table th[rowspan] { vertical-align: top; border-right: 1px dashed var(--border); }
.post-table.compact { min-width: 0; } /* 칸이 적은 표는 휴대폰 폭에 맞춤 */