/* Chaque Jour 10h — 랜딩 및 법적 페이지 공통 스타일.
   빌드 단계가 없다. 이 파일과 HTML 이 그대로 배포된다. */

:root {
  color-scheme: light;
  --bg: #faf8f5;
  --surface: #ffffff;
  --ink: #1c1917;
  --muted: #6b6560;
  --line: #e7e2db;
  --accent: #1c1917;
  --accent-ink: #ffffff;
  --highlight: #f3efe7;
  --brand: #ee8f3c;          /* 로고 고양이의 주황 */
  --korean: #2f6f5e;
  --dark-bg: #17150f;
  --dark-ink: #f7f2e8;
  --dark-muted: #b5ada0;
  --dark-line: #322d24;

  /* 반경은 세 단계만 쓴다. 값이 늘어날수록 요소끼리 미묘하게 어긋나 보인다. */
  --r-sm: 10px;
  --r-md: 14px;
  --r-pill: 999px;
  --radius: var(--r-md);
  --max: 62rem;

  /* 표제는 성격이 있는 얼굴로, 본문은 조용한 얼굴로 나눈다.
     한국어는 반드시 지정한다 — 놔두면 윈도우는 맑은고딕, 맥은 애플고딕으로
     제각각 떨어진다. 한국어 강의를 파는 페이지에서 한국어 글자가 통제되지
     않는 건 장식 문제가 아니라 상품 문제다.
     본문 스택에 Noto Sans KR 을 뒤에 두면 라틴 문자는 Instrument Sans 가,
     한글은 Noto Sans KR 이 맡는다 (폴백은 글자 단위로 일어난다). */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ko: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 "Instrument Sans", -apple-system, "Segoe UI", Roboto,
        "Noto Sans KR", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 44rem; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 0.5em;
  text-wrap: balance;   /* 표제가 한 단어만 다음 줄로 떨어지는 걸 막는다 */
}
h1 { font-size: clamp(2.2rem, 6.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 4vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
a { color: var(--ink); }

/* ---------- 헤더 ---------- */

header.site {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 30;
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; text-decoration: none; letter-spacing: -0.02em;
}
.brand span { color: var(--muted); font-weight: 400; }
.brand img, .mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: #fff; border: 1px solid var(--line);
}
.hero .mark { width: 84px; height: 84px; border-radius: 21px; margin-bottom: 20px; }

/* ---------- 공통 ---------- */

/* 주요 동작은 사이트·메일 모두 브랜드 주황 하나로 통일한다.
   글자를 검정으로 두는 이유: 흰 글자는 이 주황 위에서 대비가 2.3:1 로
   WCAG 최소치(4.5:1)에 한참 못 미친다. 검정이면 8:1 이 나온다. */
.btn {
  display: inline-block;
  background: var(--brand); color: #1c1917;
  text-decoration: none; font-weight: 700;
  padding: 14px 28px; border-radius: var(--r-sm);
  border: 0; font-size: 1rem; line-height: 1.35; cursor: pointer;
  text-align: center;
}
/* "2,99 €/mois" 같은 값은 중간에서 끊기면 안 된다 */
.btn .nb { white-space: nowrap; }
.btn:hover { filter: brightness(1.06); }
.btn.secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); font-weight: 600;
}
.btn.secondary:hover { border-color: var(--ink); filter: none; }

/* 키보드 사용자에게 지금 어디에 있는지 보여준다. 마우스 클릭 때는 안 뜬다. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px; border-radius: 4px;
}
/* 보조 텍스트 3단계.
   같은 회색 작은 글씨를 여러 개 쌓으면 전부 한 덩어리로 보여 아무것도 안 읽힌다.
   중요도에 따라 크기와 밝기를 벌려 둔다.
     .note        일반 안내 — 읽어도 되고 안 읽어도 되는 것
     .hint        입력칸 설명 — 그 칸을 채울 때 필요한 것
     .legal-note  법적 고지 — 있어야 하지만 시선을 뺏으면 안 되는 것 */
.note { font-size: .9rem; line-height: 1.6; color: var(--muted); }
.legal-note {
  font-size: .78rem; line-height: 1.7;
  color: color-mix(in srgb, var(--muted) 72%, var(--bg));
}
.legal-note a { color: inherit; }
.eyebrow {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--brand); font-weight: 700; margin-bottom: 12px;
}

section { padding: 76px 0; }
section + section { border-top: 1px solid var(--line); }
.section-head { text-align: center; margin-bottom: 46px; }
.section-head p { color: var(--muted); max-width: 36rem; margin: 0 auto; }

.grid { display: grid; gap: 24px; }
@media (min-width: 760px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.card h3 { margin-bottom: .35em; }
.card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- 레슨 구성 목록 ----------
   여섯 항목을 전부 테두리 상자로 만들면 페이지가 상자로 도배되고,
   정작 강조해야 할 레슨 샘플 카드가 묻힌다. 테두리 대신 얇은 구분선만 쓴다. */
.feature-list { display: grid; gap: 0; }
@media (min-width: 760px) { .feature-list { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.feature-list > div { padding: 22px 0; border-top: 1px solid var(--line); }
/* 데스크톱에서 각 열의 첫 항목은 위 선을 지운다 (열마다 1·2번째 항목) */
@media (min-width: 760px) {
  .feature-list > div:nth-child(1),
  .feature-list > div:nth-child(2) { border-top: 0; padding-top: 0; }
}
@media (max-width: 759px) {
  .feature-list > div:first-child { border-top: 0; padding-top: 0; }
}
.feature-list h3 { margin-bottom: .35em; }
.feature-list p { margin: 0; color: var(--muted); font-size: .95rem; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #1c1917; font-size: .85rem; font-weight: 700;
  margin-bottom: 12px;
}

/* ---------- 히어로 ---------- */

.hero { padding: 56px 0 68px; }
.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr 330px; } }
.hero-copy { text-align: left; }
.hero p.lead {
  font-size: 1.2rem; color: var(--muted); max-width: 30rem; margin: 0 0 2rem;
}
.hero .mark { width: 76px; height: 76px; border-radius: 19px; margin-bottom: 22px; }
/* 히어로 안에서는 폰이 그림이 아니라 본문이다. 그림자를 줄여 붕 뜨지 않게. */
.hero .phone { box-shadow: 0 22px 50px rgba(28,25,23,.16); }

/* ---------- 어두운 구간 ---------- */

.dark { background: var(--dark-bg); color: var(--dark-ink); border-top: 0 !important; }
.dark + section { border-top: 0; }
.dark h2, .dark h3 { color: var(--dark-ink); }
.dark p, .dark .section-head p { color: var(--dark-muted); }
.dark .card { background: #211d16; border-color: var(--dark-line); }
.dark .card p { color: var(--dark-muted); }
.dark .note { color: var(--dark-muted); }

.statement {
  text-align: center; max-width: 42rem; margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.8vw, 2.2rem); font-weight: 700;
  line-height: 1.4; letter-spacing: -.02em;
}
/* 문장마다 블록으로 두고 각각 균형을 잡는다. 한 덩어리로 두면 좁은 화면에서
   첫 문장이 "…pas la / motivation." 처럼 어색하게 끊긴다. */
.statement > span { display: block; text-wrap: balance; }
.statement > span + span { margin-top: .3em; }
.statement em { color: var(--brand); font-style: normal; }
.dark .grid h3 { margin-bottom: .4em; }
.dark .grid p { margin: 0; font-size: .97rem; }

/* ---------- 왓츠앱 폰 목업 ---------- */

.phone-row { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .phone-row { grid-template-columns: 1fr 330px; } }

.phone {
  width: 316px; margin: 0 auto;
  background: #0d0d0d; border-radius: 44px; padding: 11px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
}
.phone-screen {
  border-radius: 34px; overflow: hidden; background: #0b141a;
  display: flex; flex-direction: column; min-height: 600px;
}

/* 상태바 — 시계는 10:00. 이 서비스가 약속하는 바로 그 시각이다. */
.status-bar {
  background: #1f2c33; color: #e9edef;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 20px 5px; font-size: .72rem; font-weight: 600;
}
.status-bar .icons { display: flex; gap: 4px; align-items: flex-end; opacity: .9; }
.status-bar .bar { display: inline-block; width: 3px; background: #e9edef; border-radius: 1px; }
.status-bar .b1 { height: 4px; } .status-bar .b2 { height: 6px; }
.status-bar .b3 { height: 9px; } .status-bar .b4 { height: 11px; }
.status-bar .batt {
  width: 20px; height: 10px; border: 1px solid #e9edef; border-radius: 3px;
  position: relative; margin-left: 4px;
}
.status-bar .batt::after {
  content: ""; position: absolute; inset: 2px; right: 6px; background: #e9edef; border-radius: 1px;
}

.wa-head {
  background: #1f2c33; color: #e9edef;
  display: flex; align-items: center; gap: 11px; padding: 8px 14px 12px;
}
.wa-head .back { font-size: 1.05rem; opacity: .8; }
.wa-head img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.wa-head b { font-size: .82rem; display: block; line-height: 1.25; font-weight: 600; }
.wa-head small { font-size: .67rem; color: #8696a0; }

.wa-body {
  flex: 1; padding: 14px 10px 10px;
  background-color: #0b141a;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 0 3px, transparent 4px),
    radial-gradient(circle at 63% 47%, rgba(255,255,255,.02) 0 4px, transparent 5px),
    radial-gradient(circle at 32% 77%, rgba(255,255,255,.02) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 88%, rgba(255,255,255,.02) 0 2px, transparent 3px);
  background-size: 128px 128px;
}
.wa-date { text-align: center; margin: 0 0 12px; }
.wa-date span {
  background: #182229; color: #8696a0; font-size: .63rem;
  padding: 4px 11px; border-radius: 7px; letter-spacing: .02em;
}

.bubble {
  background: #1f2c33; color: #e9edef;
  border-radius: 2px 9px 9px 9px;
  padding: 9px 11px 6px; font-size: .76rem; line-height: 1.5;
  max-width: 95%;
}
/* 왓츠앱에는 가운데 정렬이 없다. 전부 왼쪽 한 줄에 맞춘다 —
   더 정직한 재현이고, 눈으로 읽기도 훨씬 편하다. */
.bubble > * { margin-left: 0; margin-right: 0; }
.bubble .sender { color: var(--brand); font-weight: 700; font-size: .69rem; margin: 0 0 6px; }
.bubble .fr { color: #a8b4bb; margin: 0 0 2px; }
.bubble .ko {
  font-family: var(--font-ko);
  font-weight: 700; color: #7fd6b6; margin: 0; font-size: .84rem; line-height: 1.5;
}
.bubble .rom { color: #7d8b93; font-size: .67rem; margin: 1px 0 6px; }
.bubble .sep {
  color: var(--brand); font-size: .62rem; letter-spacing: .07em;
  font-weight: 700; text-align: left;
  margin: 12px 0 8px; padding-top: 11px;
  border-top: 1px solid rgba(233,237,239,.09);
}
/* 불릿 마커를 본문 왼쪽 끝에 맞춘다. 기본 padding 을 쓰면 목록만 안쪽으로 밀린다. */
.bubble ul { list-style: none; margin: 0 0 4px; padding: 0; color: #93a2aa; font-size: .68rem; }
.bubble li { position: relative; padding-left: 11px; }
.bubble li::before { content: "·"; position: absolute; left: 1px; color: #6d7c84; }
.bubble .time { text-align: right; color: #7d8b93; font-size: .61rem; margin: 7px 0 0; }

/* 잠긴 입력창. "조용한 방" 이라는 약속을 문장이 아니라 그림으로 증명한다. */
.wa-input {
  background: #1f2c33; padding: 12px 14px; text-align: center;
  color: #8696a0; font-size: .67rem; line-height: 1.4;
}

/* ---------- 비교표 ---------- */

.compare { max-width: 46rem; margin: 0 auto; overflow-x: auto; }
.compare table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem; }
.compare th, .compare td { padding: 15px 16px; text-align: left; }
.compare tbody tr { border-top: 1px solid var(--line); }
.dark .compare tbody tr { border-color: var(--dark-line); }
.compare thead th {
  font-size: .73rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; padding-bottom: 10px;
}
.dark .compare thead th { color: var(--dark-muted); }
.compare tbody th { font-weight: 500; color: var(--muted); width: 32%; }
.dark .compare tbody th { color: var(--dark-muted); }
.compare .us { background: var(--highlight); font-weight: 600; }
.dark .compare .us { background: #24291e; color: var(--dark-ink); }
.compare thead .us { color: var(--brand); background: transparent; }

/* ---------- 레벨표 ---------- */

.levels { overflow-x: auto; }
.levels table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: .95rem; }
.levels th, .levels td { padding: 15px 14px; text-align: center; }
.levels tbody tr { border-top: 1px solid var(--line); }
.levels thead th { font-weight: 700; font-size: 1rem; }
.levels tbody th { text-align: left; font-weight: 500; color: var(--muted); }
.levels .yes { color: var(--brand); font-weight: 700; }
.levels .no { color: #cdc6bb; }

/* ---------- 샘플 레슨 ---------- */

.lesson {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; height: 100%;
}
.lesson h3 { font-size: 1rem; margin-bottom: 4px; }
.lesson .who { color: var(--muted); font-size: .84rem; margin: 0 0 18px; }
/* 한 카드에 항목이 4~5개씩 들어가므로, 구분선이 있어야 눈이 섹션 단위로 끊어 읽는다. */
.lesson .label {
  font-size: .67rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--brand); font-weight: 700;
  margin: 20px 0 9px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.lesson .fr { color: var(--muted); margin: 0 0 4px; font-size: .92rem; }
.lesson .ko {
  font-family: var(--font-ko);
  font-size: 1.05rem; font-weight: 700; line-height: 1.5;
  margin: 0; color: var(--korean);
}
.lesson .romaji { font-size: .79rem; color: var(--muted); margin: 2px 0 7px; }
.lesson ul { margin: 0; padding-left: 1.1em; font-size: .83rem; color: var(--muted); }

/* ---------- 가격 ---------- */

.price {
  background: var(--surface); border: 2px solid var(--brand);
  border-radius: var(--radius); padding: 32px; position: relative;
  max-width: 26rem; margin: 0 auto; text-align: center;
}
.tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #1c1917; white-space: nowrap;
  font-size: .75rem; font-weight: 700; padding: 5px 14px; border-radius: 999px;
}
.price .amount {
  font-family: var(--font-display);
  font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price .per { color: var(--muted); font-size: .98rem; margin-top: 6px; }
.price .later {
  color: var(--muted); font-size: .86rem; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.price ul { list-style: none; padding: 0; margin: 20px 0 0; font-size: .95rem; text-align: left; }
.price li { padding: 7px 0 7px 24px; position: relative; color: var(--muted); }
.price li::before { content: "·"; position: absolute; left: 8px; color: var(--brand); font-weight: 700; }

/* ---------- 폼 ---------- */

.form { max-width: 30rem; margin: 36px auto 0; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field .hint { font-size: .875rem; line-height: 1.7; color: var(--muted); margin: 8px 0 0; }

/* 결제 직전 주의문구. 인라인 style 로 두면 눈에 안 띄고 고치기도 어렵다.
   작은 글씨를 상자에 넣으면 사방 여백이 줄어 보여서, 상자 안 행간은
   바깥 본문보다 더 벌려야 같은 밀도로 읽힌다. */
.callout {
  font-size: .9rem;
  line-height: 1.8;
  color: var(--ink);
  background: var(--highlight);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 20px;
  margin: 0 0 22px;
}
.callout > p { margin: 0; }
/* 문장 사이를 한 칸 띄운다. 한 덩어리로 붙어 있으면 두 번째 문장(진짜 하고 싶은
   말)이 첫 문장에 묻힌다. */
.callout > p + p { margin-top: .85em; }
.callout strong { font-weight: 700; }
.field input, .field select {
  width: 100%; padding: 12px 14px; font: inherit;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

/* ---------- FAQ ---------- */

.faq { max-width: 44rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin: 12px 0 0; color: var(--muted); }

/* ---------- 푸터 ---------- */

footer.site {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 40px 0; font-size: .9rem; color: var(--muted);
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; }
footer.site a { color: var(--muted); }

/* ---------- 법적 페이지 ---------- */

article.legal { padding: 56px 0 72px; }
article.legal h2 { font-size: 1.25rem; margin-top: 2em; }
article.legal ul { color: var(--ink); }
article.legal .updated { color: var(--muted); font-size: .9rem; }
article.legal table { border-collapse: collapse; width: 100%; font-size: .95rem; }
article.legal th, article.legal td {
  border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top;
}
article.legal th { background: var(--highlight); font-weight: 600; }

/* 미기입 항목. 배포 전에 페이지에 하나도 남아 있으면 안 된다 —
   Paddle 심사에서 미완성 사이트로 판단한다. */
.todo { background: #ffe680; color: #6b4e00; padding: 1px 7px; border-radius: 5px; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #16140f;
    --surface: #201d18;
    --ink: #f5f1ea;
    --muted: #a39c92;
    --line: #35302a;
    --accent: #f5f1ea;
    --accent-ink: #16140f;
    --highlight: #2a251f;
    --korean: #7fc7ae;
    --dark-bg: #0d0c08;
  }
  :root:not([data-theme="light"]) .todo { background: #7a5c00; color: #ffe680; }
  :root:not([data-theme="light"]) .levels .no { color: #55504a; }
}

/* 움직임에 민감한 사용자를 위해. 스피너 하나뿐이지만 규칙은 규칙이다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- 좁은 화면 ----------
   폭이 줄면 헤더가 제일 먼저 깨진다. 브랜드명이 두 줄로 접히고 버튼이 눌린다.
   글자를 줄이기 전에 덜 중요한 것부터 뺀다 — 부제(· Coréen)가 먼저다. */

.brand { white-space: nowrap; flex: 0 0 auto; }
header.site .btn.secondary { flex: 0 0 auto; }

@media (max-width: 780px) {
  .brand span { display: none; }              /* 부제부터 접는다 */
}

@media (max-width: 560px) {
  .brand { font-size: .95rem; gap: 8px; }
  .brand img { width: 30px; height: 30px; }
  header.site .btn.secondary { padding: 10px 16px; font-size: .9rem; }
  header.site .wrap { height: 58px; padding: 0 16px; }

  .wrap { padding: 0 18px; }
  section { padding: 56px 0; }
  .hero { padding: 40px 0 52px; }

  /* 폰 목업이 화면보다 넓어지면 가로 스크롤이 생긴다. 폭에 맞춰 줄인다. */
  .phone { width: 100%; max-width: 316px; }

  .lesson, .card { padding: 20px; }
  .price { padding: 26px 22px; }
}

/* 아주 좁은 화면에서 표는 잘리지 않고 옆으로 스크롤된다 (.levels/.compare 는
   이미 overflow-x:auto). 스크롤이 가능하다는 걸 눈에 보이게 해준다. */
.levels, .compare { -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  .levels table, .compare table { font-size: .9rem; }
}