/* Ephata — '열려라'. 바탕은 종이빛, 앱 구간만 그 앱의 색을 빌린다.
   크기·여백은 아래 토큰만 쓴다. 숫자를 직접 적지 말 것 — 27종이던 글자 크기를 7단계로 줄였다(2026-10-03). */
:root {
  --ground: #F7F5F0;
  --ink: #161513;
  --ink-2: #4A4842;
  --muted: #8A877E;
  --line: #E3DFD5;
  --glow: #F3E9D2;

  /* 글꼴 역할: 영문 표제·숫자 = Cormorant / 26px 이상 한글 제목 = 고운바탕(보통 굵기만) / 나머지 전부 = Pretendard.
     고운바탕은 굵게 하면 획이 뭉치고, 작게 쓰면 흐려진다. */
  --serif-ko: "Gowun Batang", serif;
  --serif-en: "Cormorant Garamond", serif;   /* Instrument Serif 이탤릭은 사용자가 「별로」라 해서 바꿨다 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;

  /* 글자 크기 7단계 (약 1.25배씩) */
  --fs-cap: 13px;                                   /* 사업자 정보, 꼬리표 */
  --fs-sm: 15px;                                    /* 링크, 영문 부제, 요약 설명 */
  --fs-body: 17px;                                  /* 본문 */
  --fs-lead: 20px;                                  /* 소개 문단, 부제 */
  --fs-h3: clamp(22px, 1.4vw + 12px, 26px);         /* 장면·기능 제목 */
  --fs-h2: clamp(30px, 2.6vw + 14px, 48px);         /* 회사 소개, 문서 제목 */
  --fs-display: clamp(60px, 8vw, 120px);            /* ORB · Nopooroblem */
  --fs-display-xl: clamp(72px, 12vw, 168px);        /* 첫 화면 Ephata 하나만 */

  /* 줄간격 3종 */
  --lh-tight: 1.05;
  --lh-head: 1.35;
  --lh-body: 1.75;

  /* 한글 제목은 자간을 살짝 좁힌다 — 고운바탕을 크게 쓰면 글자 사이가 벌어져 보인다 */
  --track-ko: -0.02em;

  /* 간격: 이 값만 쓴다 (4·8 단위) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  /* 구간 위아래 여백 — vh가 아니라 폭 기준. vh는 큰 모니터에서 휑하고 눕힌 폰에서 붙는다 */
  --section: clamp(96px, 10vw + 32px, 176px);

  /* 본문 폭 하나 + 좌우 여백 하나. 끝까지 칠하는 구간도 글은 이 선에서 시작한다 */
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 72px);
  --inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #121110; --ink: #EEEBE4; --ink-2: #BDB9AF; --muted: #858178; --line: #2A2825; }
  .show { --tint: var(--tint-d) !important; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans);
       font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-x: hidden; }
a { color: inherit; }
/* 제목은 마지막 줄에 한 단어만 남지 않게, 문단은 끝줄이 너무 짧지 않게 */
h1, h2, h3, .lede, .ko-mark { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ── 들어올 때: 문이 열린다 ── */
.lids { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.lid { position: absolute; left: 0; right: 0; height: 50%; background: #0E0D0C;
       animation: open 1.5s cubic-bezier(.75,0,.15,1) .55s forwards; }
.lid.top { top: 0; --to: -101%; }
.lid.bottom { bottom: 0; --to: 101%; }
.seam { position: absolute; top: 50%; left: 50%; width: 0; height: 2px; translate: -50% -50%;
        background: var(--glow); box-shadow: 0 0 24px 4px rgba(243,233,210,.55);
        animation: seam .55s ease-out forwards, fade .5s ease .9s forwards; }
@keyframes open { to { transform: translateY(var(--to)); } }
@keyframes seam { to { width: 100vw; } }
@keyframes fade { to { opacity: 0; } }

/* ── 첫 화면 ── */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
        padding: var(--s9) var(--inline); position: relative; }
.hero > * { animation: rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hero > :nth-child(1) { animation-delay: .95s; }
.hero > :nth-child(2) { animation-delay: 1.05s; }
.hero > :nth-child(3) { animation-delay: 1.3s; }
.hero > :nth-child(4) { animation-delay: 1.45s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } }
.eyebrow { font-size: var(--fs-cap); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s5); }
h1 { margin: 0 0 var(--s6); font-weight: 400; line-height: var(--lh-tight); }
.mark { display: block; font-family: var(--serif-en); font-weight: 500; font-size: var(--fs-display-xl);
        letter-spacing: -.02em; line-height: .9; }
.ko-mark { display: block; font-family: var(--serif-ko); font-size: var(--fs-h2); letter-spacing: var(--track-ko);
           line-height: var(--lh-head); margin-top: clamp(var(--s6), 3vw, var(--s7)); }
.lede { font-size: var(--fs-lead); color: var(--ink-2); line-height: var(--lh-body); margin: 0 0 var(--s3); max-width: 32em; }
.en { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.cue { position: absolute; bottom: var(--s6); left: 50%; width: 1px; height: var(--s7); background: var(--muted);
       transform-origin: top; animation: cue 2.2s ease-in-out 2.4s infinite both; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ── 회사 소개: 스크롤하면 차례로 떠오른다 ── */
.about { padding: var(--section) var(--inline); }
.reveal { opacity: calc(.08 + var(--o, 0) * .92); transform: translateY(calc((1 - var(--o, 0)) * 24px)); }
.about h2 { font-family: var(--serif-ko); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-head);
            letter-spacing: var(--track-ko); margin: 0 0 var(--s5); max-width: 22em; }
.about-lede { font-size: var(--fs-lead); color: var(--ink-2); max-width: 32em; margin: 0 0 var(--s3); }
.pillars { list-style: none; padding: 0; margin: var(--s8) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.pillars li { border-top: 1px solid var(--line); padding-top: var(--s4); }
.pillars span { font-size: var(--fs-cap); letter-spacing: .08em; color: var(--muted); }
.pillars b { display: block; font-family: var(--serif-ko); font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--track-ko);
             line-height: var(--lh-head); margin: var(--s2) 0; }
.pillars b a { text-decoration: none; }
.pillars b a:hover { text-decoration: underline; text-underline-offset: 5px; }
.pillars p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* ── 앱 소개: 화면에 붙어 있는 무대 위에서 장면이 넘어간다 ── */
.show { height: 400vh; position: relative; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden;
         display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(var(--s6), 4vw, var(--s8));
         padding: 0 var(--inline); background: var(--tint); }
.bigicon { position: absolute; left: 50%; top: 50%; width: min(42vw, 300px); border-radius: 22%;
           translate: -50% -50%; z-index: 3; pointer-events: none;
           transform: scale(calc(1.4 - var(--intro, 0) * .9)) rotate(calc(var(--intro, 0) * -12deg));
           opacity: calc(1 - var(--intro, 0) * 1.4); box-shadow: 0 30px 80px rgba(0,0,0,.18); }
.copy, .device { opacity: calc(var(--intro, 0) * 1.6 - .5); }
.copy { transform: translateY(calc((1 - var(--intro, 0)) * 40px)); max-width: 30em; }
/* 제목 묶음: 가까운 것은 가깝게(테마→이름 8, 영문→한글 12, 한글→부제 16, 부제→영문 4), 장면과는 멀게(48) */
.theme { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; color: var(--accent); margin: 0 0 var(--s2); }
.copy h2 { font-family: var(--serif-en); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); margin: 0; letter-spacing: -.015em; }
/* 한글 이름은 테마 옆에 붙인다 — 한 줄을 아껴 폰에서도 영문 부제가 들어갈 자리를 낸다 */
.theme .ko-name { color: var(--ink-2); font-weight: 500; }
.theme .ko-name::before { content: "·"; margin: 0 var(--s2); color: var(--muted); }
.sub { color: var(--ink-2); font-size: var(--fs-body); margin: var(--s4) 0 0; }
.en-sub { color: var(--muted); font-size: var(--fs-sm); margin: var(--s1) 0 var(--s7); }
.steps { display: grid; }
.step { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.step h3 { font-family: var(--serif-ko); font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--track-ko);
           line-height: var(--lh-head); margin: 0 0 var(--s2); }
.step p { margin: 0; color: var(--ink-2); }
[data-step="0"] .step:nth-child(1), [data-step="1"] .step:nth-child(2), [data-step="2"] .step:nth-child(3) { opacity: 1; transform: none; }
.cta { margin-top: var(--s6); display: flex; align-items: center; gap: var(--s3) var(--s5); font-size: var(--fs-sm); }
.cta .links { display: flex; gap: var(--s4); white-space: nowrap; }
.cta a { color: var(--ink-2); }
.cta .btn { background: var(--accent); color: #fff; text-decoration: none; padding: var(--s3) var(--s5); border-radius: 99px; font-weight: 600; line-height: 1.2; }
.cta .btn.soon { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.note { font-size: var(--fs-cap); color: var(--muted); margin: var(--s4) 0 0; }

.device { display: flex; justify-content: center;
          transform: translateY(calc((1 - var(--intro, 0)) * 30vh)) scale(calc(.86 + var(--intro, 0) * .14)); }
.phone { position: relative; height: min(78svh, 720px); aspect-ratio: 640 / 1391; border-radius: 13% / 6.2%;
         background: #0B0B0B; padding: 2.2%; box-shadow: 0 40px 90px -20px rgba(0,0,0,.35), inset 0 0 0 1.5px #2a2a2a;
         rotate: calc((1 - var(--intro, 0)) * 8deg); }
.phone img { position: absolute; inset: 2.2%; width: 95.6%; height: 95.6%; object-fit: cover; border-radius: 11% / 5.2%;
             opacity: 0; transform: scale(1.03); transition: opacity .7s, transform .9s; }
[data-step="0"] .phone img:nth-child(1), [data-step="1"] .phone img:nth-child(2), [data-step="2"] .phone img:nth-child(3) { opacity: 1; transform: none; }

/* ── 마무리 ── */
.closing { padding: var(--section) var(--inline); text-align: center; }
.ko-mark.small { margin: 0 0 var(--s4); }
.closing .lede { margin: 0 auto var(--s5); }
.mail { font-size: var(--fs-lead); font-weight: 600; text-underline-offset: 5px; }
footer { padding: var(--s6) var(--inline) var(--s8); border-top: 1px solid var(--line); font-size: var(--fs-cap); color: var(--muted); line-height: var(--lh-body); }

/* ── 폰: 글 위, 화면 아래 ── */
@media (max-width: 760px) {
  .stage { grid-template-columns: 1fr; align-content: center; gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s5); }
  .copy { max-width: none; }
  /* 폰에서는 글 묶음과 폰 화면이 한 화면(100svh)에 같이 들어가야 한다 — 부제를 한 단계씩 내린다 */
  .sub { font-size: var(--fs-sm); margin-top: var(--s3); }
  .en-sub { font-size: var(--fs-cap); margin-bottom: var(--s5); }
  .step p { font-size: var(--fs-sm); }
  /* 링크를 버튼 아래 줄로 내린다 — 한 줄에 두면 「개인정보 처리방침」이 중간에서 끊겼다 */
  .cta { margin-top: var(--s4); flex-direction: column; align-items: flex-start; }
  .note { margin-top: var(--s3); }
  .phone { height: 40svh; }
  br.wide { display: none; }
  .pillars { grid-template-columns: 1fr; gap: var(--s5); }
}
/* 작은 폰: 폰 화면을 줄이고 안내문만 뺀다. 영문 부제는 어떤 크기에서도 숨기지 않는다(사용자 결정) */
@media (max-width: 760px) and (max-height: 700px) { .phone { height: 30svh; } .note { display: none; } }

/* ── 움직임 줄이기를 켠 분께는 연출 없이 ── */
@media (prefers-reduced-motion: reduce) {
  .lids, .cue, .bigicon { display: none; }
  .hero > *, .step, .phone img { animation: none !important; transition: none !important; }
  .copy, .device, .reveal { opacity: 1 !important; transform: none !important; }
  .phone { rotate: none; }
}

/* ══ 앱 상세 페이지 (/orb, /nopooroblem) — 첫 화면과 같은 재료로 ══ */
.detail { background: var(--ground); }
@media (prefers-color-scheme: dark) { .detail { --tint: var(--tint-d); } }
.topbar { position: sticky; top: 0; z-index: 10; padding: var(--s3) var(--inline);
          background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* Cormorant는 x높이가 낮아 같은 크기의 고딕보다 작아 보인다 — 한 단계 위(26)로 */
.topbar a { display: inline-flex; align-items: center; text-decoration: none;
            font-family: var(--serif-en); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }

.app-hero { text-align: center; padding: var(--s7) var(--inline) 0; background: linear-gradient(var(--ground), var(--tint) 55%); overflow: hidden; }
.app-hero > * { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.app-hero > :nth-child(2) { animation-delay: .08s; } .app-hero > :nth-child(3) { animation-delay: .16s; }
.app-hero > :nth-child(4) { animation-delay: .24s; } .app-hero > :nth-child(5) { animation-delay: .3s; }
.app-hero > :nth-child(6) { animation-delay: .36s; }
.app-icon { width: clamp(64px, 7vw, 84px); height: auto; border-radius: 22.5%; box-shadow: 0 18px 40px -12px rgba(0,0,0,.28); }
.app-hero .theme { margin: var(--s5) 0 var(--s2); }
.app-hero h1 { font-family: var(--serif-en); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); margin: 0; letter-spacing: -.015em; }
.app-hero h1 span { display: block; font-family: var(--sans); font-size: var(--fs-lead); font-weight: 500; color: var(--ink-2);
                    margin-top: var(--s3); letter-spacing: 0; line-height: var(--lh-head); }
.app-hero .en-sub { margin-bottom: 0; }
.app-hero .cta { justify-content: center; margin-top: var(--s6); }

/* 폰 세 대가 부채꼴로 떠오른다 */
.fan { display: flex; justify-content: center; align-items: flex-end; margin-top: var(--s8); height: min(60vh, 580px); }
.fan .phone { height: 100%; flex: none; animation: fan 1.4s cubic-bezier(.2,.7,.2,1) both; }
.fan .phone img { opacity: 1; transform: none; }
.fan .phone:nth-child(1) { --r: -9deg; --x: 34%; height: 86%; animation-delay: .45s; z-index: 1; }
.fan .phone:nth-child(2) { --r: 0deg; --x: 0; z-index: 2; animation-delay: .3s; }
.fan .phone:nth-child(3) { --r: 9deg; --x: -34%; height: 86%; animation-delay: .45s; z-index: 1; }
.fan .phone { rotate: var(--r); translate: var(--x) 8%; transform-origin: 50% 100%; }
@keyframes fan { from { opacity: 0; rotate: 0deg; translate: 0 30%; } }

.feats { padding: var(--section) var(--inline) var(--s8); display: grid; gap: var(--section); }
.feat { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(var(--s6), 5vw, var(--s9)); }
.feat.flip .feat-copy { order: 2; }
.num { font-family: var(--serif-en); font-weight: 600; font-size: var(--fs-lead); color: var(--accent); }
.feat h2 { font-family: var(--serif-ko); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-head);
           letter-spacing: var(--track-ko); margin: var(--s2) 0 var(--s4); }
.feat p { color: var(--ink-2); margin: 0; max-width: 30em; }
.feat-phone { display: flex; justify-content: center; }
.feat-phone .phone { height: min(72vh, 640px); rotate: none; }
.feat-phone .phone img { opacity: 1; transform: none; }

.facts { padding: var(--s9) var(--inline) 0; }
.facts ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.facts li { border-top: 1px solid var(--line); padding-top: var(--s4); }
.facts b { display: block; font-family: var(--serif-ko); font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--track-ko);
           line-height: var(--lh-head); color: var(--accent); margin-bottom: var(--s1); }
.facts span { color: var(--ink-2); font-size: var(--fs-sm); }
.facts .note { margin-top: var(--s6); }
.app-closing .cta { justify-content: center; margin-top: 0; }
.app-closing .links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-sm); margin-top: var(--s5); }
.app-closing .links a { color: var(--ink-2); }

@media (max-width: 760px) {
  .app-hero .cta { flex-direction: row; justify-content: center; }
  /* 폰 공통 .cta는 왼쪽 정렬 세로 배치라(앱 장면용) 맨 아래 버튼은 가운데로 되돌린다 */
  .app-closing .cta { align-items: center; }
  .fan { height: 52vh; margin-top: var(--s7); }
  .feat, .feat.flip { grid-template-columns: 1fr; gap: var(--s6); }
  .feat.flip .feat-copy { order: 0; }
  .feat-phone .phone { height: 62vh; }
  .facts ul { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  .app-hero > *, .fan .phone { animation: none !important; }
}

/* ══ 문서 (처리방침·약관·문의) — 읽기 폭 720, 같은 글꼴 ══ */
.topbar .crumb { font-family: var(--sans); font-weight: 500; font-size: var(--fs-sm); color: var(--muted); margin-left: var(--s3); }
.topbar .crumb::before { content: "/"; margin-right: var(--s3); color: var(--line); }
.doc { max-width: calc(720px + 2 * var(--gutter)); margin: 0 auto; padding: var(--s8) var(--gutter) var(--s10); }
.doc h1 { font-family: var(--serif-ko); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-head);
          letter-spacing: var(--track-ko); margin: 0 0 var(--s3); }
.doc h2 { font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.01em; line-height: var(--lh-head);
          margin: var(--s8) 0 var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line); }
.doc h3 { font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-head); margin: var(--s6) 0 var(--s2); }
.doc p, .doc li { color: var(--ink-2); }
.doc p { margin: var(--s3) 0; }
.doc strong { color: var(--ink); }
.doc ul { padding-left: 1.2em; margin: var(--s3) 0; }
.doc li { margin: var(--s2) 0; }
.doc a { color: var(--accent); text-underline-offset: 3px; }
/* 원문의 시행일 줄 (노푸라블럼은 .meta, 오브는 h1 바로 다음 문단) */
.doc .meta, .doc h1 + p { color: var(--muted); font-size: var(--fs-sm); }
.doc .lede { font-size: var(--fs-lead); }
.doc .callout { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent);
                padding: var(--s4) var(--s5); border-radius: 0 var(--s3) var(--s3) 0; margin: var(--s5) 0; }
.doc .callout p { margin: 0; }
.doc .tablewrap { overflow-x: auto; margin: var(--s4) 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.6; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: var(--s3); border-bottom: 1px solid var(--line); }
.doc th { font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.doc td { color: var(--ink-2); }
.doc .contact { margin: var(--s5) 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--s4); }
.doc .mail { font-size: var(--fs-lead); color: var(--ink); }
.doc hr { display: none; }