/* 오터데이 AI — 밤에 말하면, 아침에 챙겨 줘요. 스크롤이 밤에서 아침으로 흘러요. */

@font-face { font-family: "Plex KR"; src: url("../fonts/plex-kr-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex KR"; src: url("../fonts/plex-kr-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gaegu"; src: url("../fonts/gaegu-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --night: #051a3c;
  --night-deep: #031634;
  --dusk: #1b2f5c;
  --dawn: #34416e;
  --morning: #dce7f1;
  --morning-light: #f2f6fa;
  --starlight: #ffe3a1;
  --honey: #e8be6a;
  --honey-wash: #33291b;
  --honey-ink: #f1d6a0;
  --fur: #2c2620;
  --fur-ink: #f2eadf;
  --mine: #3c5163;
  --on-mine: #f7f1e8;
  --action: #9db4c6;
  --on-action: #141d24;
  --ink: #1d2232;
  --ink-soft: #46506a;
  --on-night: #eef2fa;
  --on-night-soft: #b4c1dc;
  --rule: #c3d1e0;

  --sans: "Plex KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --hand: "Gaegu", "Plex KR", sans-serif;

  --gutter: max(1.25rem, env(safe-area-inset-left));
  --gutter-r: max(1.25rem, env(safe-area-inset-right));
  --measure: 34rem;
  --wide: 60rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--morning-light);
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus, #1d4f9a); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 0; padding: 0.75rem 1rem; background: var(--starlight); color: var(--ink); z-index: 10; }
.skip:focus { left: var(--gutter); top: 0.5rem; }

.wrap { width: 100%; max-width: calc(var(--wide) + 2.5rem); margin-inline: auto; padding-inline: var(--gutter) var(--gutter-r); }
.say { font-family: var(--hand); font-size: 1.375em; line-height: 1.3; letter-spacing: 0; }

/* ---------- 머리줄 ---------- */
.top {
  --focus: var(--starlight);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: max(0.875rem, env(safe-area-inset-top));
  padding-bottom: 0.875rem;
  color: var(--on-night);
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.125rem; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 36px; height: 36px; }
.top-link { font-size: 0.9375rem; color: var(--on-night-soft); padding: 0.5rem 0; }
.top-link:hover { color: var(--on-night); }

/* ---------- 밤 ---------- */
.night { --focus: var(--starlight); background: var(--night); color: var(--on-night); }

.hero { display: grid; gap: 1.5rem; padding-top: 1.5rem; }
.hero-copy { display: grid; gap: 1rem; justify-items: start; }
.hero h1 { font-size: clamp(2.375rem, 11vw, 3.875rem); line-height: 1.16; letter-spacing: -0.035em; }
.hero h1 span { display: block; }
.hero-sub { color: var(--on-night-soft); font-size: 1.0625rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.5rem; border-radius: 999px; border: 0;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
}
.button-star { background: var(--starlight); color: var(--night-deep); margin-top: 0.5rem; }
.button-star:hover { background: #fff0c8; }
.hero-note { font-size: 0.875rem; color: var(--on-night-soft); }

.sky { position: relative; margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); }
.sky img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
}
.sky svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky .new-line { stroke: #c9d6f0; stroke-width: 2.4; stroke-dasharray: 3 7; stroke-linecap: round; fill: none; opacity: 0.85; }
.sky .new-dot { fill: #9fb3dc; }
.sky .new-star { fill: var(--starlight); }
.sky .new-glow { fill: url(#glow); }
.memory-chip {
  position: absolute; left: 50%; top: 52%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem 0.45rem 0.65rem; border-radius: 999px;
  background: var(--honey-wash); color: var(--honey-ink);
  font-size: 0.875rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(232, 190, 106, 0.35), 0 8px 24px rgba(3, 22, 52, 0.6);
}
.memory-chip svg, .chip svg { position: static; width: 1em; height: 1em; flex: none; fill: var(--honey); }

/* 한 번뿐인 움직임: 새 별이 이어지고 켜진 뒤 "기억했어요"가 떠요. */
@media (prefers-reduced-motion: no-preference) {
  .sky .new-line { stroke-dashoffset: 0; animation: draw 1.4s 0.5s ease-out both; }
  .sky .new-star, .sky .new-glow { transform-box: fill-box; transform-origin: center; animation: light 0.6s 1.8s cubic-bezier(.2,.9,.3,1.4) both; }
  .memory-chip { animation: chip 0.5s 2.3s ease-out both; }
}
@keyframes draw { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 0.85; clip-path: inset(0 0 0 0); } }
@keyframes light { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes chip { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 한 장면: 말 한 줄 → 알림 카드 */
.scene { padding-block: 3.5rem 4rem; display: grid; gap: 2rem; }
.section-head { display: grid; gap: 0.625rem; max-width: var(--measure); }
.section-head h2 { font-size: clamp(1.625rem, 7vw, 2.25rem); }
.section-head p { color: var(--on-night-soft); }
.chat { display: grid; gap: 0.75rem; max-width: 26rem; width: 100%; }
.bubble { max-width: 82%; padding: 0.7rem 1rem; border-radius: 20px; }
.bubble-mine { justify-self: end; background: var(--mine); color: var(--on-mine); border-bottom-right-radius: 6px; }
.otter-row { display: flex; align-items: flex-end; gap: 0.5rem; }
.otter-row > img { width: 36px; height: 36px; flex: none; }
.bubble-otter { background: var(--fur); color: var(--fur-ink); border-bottom-left-radius: 6px; padding-block: 0.45rem 0.55rem; }
.remind {
  margin-left: 44px; background: var(--fur); color: var(--fur-ink);
  border-radius: 16px; padding: 1rem; display: grid; gap: 0.875rem;
}
.remind-head { display: flex; gap: 0.75rem; align-items: center; }
.remind-head img { width: 48px; height: 48px; flex: none; }
.remind-title { font-weight: 700; font-size: 1.0625rem; line-height: 1.4; }
.remind-time { font-size: 0.875rem; color: #c9bba9; }
.remind-actions { display: flex; gap: 0.5rem; }
.remind-actions button { min-height: 44px; padding: 0 1.125rem; border-radius: 999px; font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer; border: 0; }
.remind-actions .done { background: var(--action); color: var(--on-action); }
.remind-actions .later { background: transparent; color: var(--fur-ink); }
.remind-actions .later:hover { background: rgba(242, 234, 223, 0.08); }
.remind-result { display: flex; gap: 0.75rem; align-items: center; }
.remind-result img { width: 48px; height: 48px; }
.remind[data-state="done"] .remind-head, .remind[data-state="done"] .remind-actions,
.remind[data-state="later"] .remind-head, .remind[data-state="later"] .remind-actions { display: none; }
.remind-result[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .remind-result:not([hidden]) { animation: fold-in 0.25s ease-out; }
}
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 기억 = 별 (밤이 옅어지는 자리) */
.stars-sec { --focus: var(--starlight); background: linear-gradient(var(--night), var(--dusk)); color: var(--on-night); padding-block: 1rem 2.5rem; }
.stars-sec .wrap { display: grid; gap: 1.75rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem 0.5rem 0.75rem; border-radius: 999px; background: var(--honey-wash); color: var(--honey-ink); font-size: 0.9375rem; font-weight: 700; }
.chip:nth-child(2) { margin-left: 1.5rem; }
.chip:nth-child(3) { margin-left: 0.75rem; }
.stars-otter { display: flex; align-items: center; gap: 0.75rem; color: var(--on-night-soft); }
.stars-otter img { width: 64px; height: 64px; flex: none; }

/* 믿음 (새벽) */
.trust { --focus: var(--starlight); background: linear-gradient(var(--dusk), var(--dawn)); color: var(--on-night); padding-block: 3.5rem 2rem; }
.trust .wrap { display: grid; gap: 1.75rem; }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; max-width: var(--measure); }
.trust-list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; align-items: start; }
.trust-list li::before { content: ""; width: 0.5rem; height: 0.5rem; margin: 0.65em 0 0 0.35rem; border-radius: 50%; background: var(--starlight); box-shadow: 0 0 10px 2px rgba(255, 227, 161, 0.55); }
.trust-list strong { display: block; font-size: 1.0625rem; }
.trust-list span { color: #d0d9ec; font-size: 0.9375rem; }
.trust a { color: var(--starlight); font-weight: 700; }

/* 해 뜨는 띠: 글자 없는 경계 */
.sunrise { height: 9rem; background:
  radial-gradient(120% 90% at 50% 100%, rgba(255, 227, 161, 0.85) 0, rgba(255, 227, 161, 0) 55%),
  linear-gradient(var(--dawn), #8ea3c6 55%, var(--morning)); }

/* ---------- 아침 ---------- */
.morning { --focus: #1d4f9a; background: linear-gradient(var(--morning), var(--morning-light) 40%); color: var(--ink); }
.morning .section-head p { color: var(--ink-soft); }
.day { padding-block: 2.5rem 3.5rem; display: grid; gap: 1.75rem; }
.day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.day-list li { display: grid; grid-template-columns: 3.25rem 64px 1fr; gap: 0.75rem; align-items: center; }
.day-list time { font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.day-list img { width: 64px; height: 64px; }
.day-list .say { color: #5b3a24; font-size: 1.3125rem; }

.price { padding-block: 0 3.5rem; }
.price p { max-width: var(--measure); font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
.price p span { display: block; font-weight: 400; font-size: 0.9375rem; color: var(--ink-soft); margin-top: 0.375rem; }

.faq { padding-block: 0 3.5rem; display: grid; gap: 1.25rem; }
.faq-list { width: 100%; max-width: var(--measure); border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; font-weight: 700; min-height: 52px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq details p { padding: 0 0 1.125rem; color: var(--ink-soft); }

/* 출시 알림 */
.notify { padding-block: 0 4rem; }
.notify-panel { max-width: 30rem; background: #fff; border-radius: 28px; padding: 1.75rem 1.25rem; display: grid; gap: 1.25rem; box-shadow: 0 1px 0 rgba(29, 34, 50, 0.04), 0 20px 48px -24px rgba(27, 47, 92, 0.35); }
.notify-panel .say-row { display: flex; gap: 0.75rem; align-items: center; }
.notify-panel .say-row img { width: 56px; height: 56px; flex: none; }
.notify h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); }
.field { display: grid; gap: 0.375rem; }
.field label { font-weight: 700; font-size: 0.9375rem; }
.field input { width: 100%; min-height: 52px; padding: 0 1rem; border-radius: 14px; border: 1.5px solid #a9b8cb; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; }
.field input:focus-visible { outline: 3px solid #1d4f9a; outline-offset: 1px; border-color: #1d4f9a; }
.consent { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.875rem; font-size: 0.875rem; line-height: 1.55; background: var(--morning-light); border-radius: 14px; padding: 0.875rem 1rem; }
.consent dt { font-weight: 700; color: var(--ink); }
.consent dd { margin: 0; color: var(--ink-soft); }
.check { display: flex; gap: 0.75rem; align-items: center; font-weight: 700; font-size: 0.9375rem; cursor: pointer; min-height: 44px; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: #1b2f5c; flex: none; }
.button-night { background: var(--dusk); color: #fff; width: 100%; }
.button-night:hover { background: var(--night); }
.form-status { font-size: 0.9375rem; color: #1b2f5c; min-height: 1.5em; }
.form-status:empty { display: none; }

/* ---------- 바닥글 ---------- */
.foot { --focus: #1d4f9a; background: var(--morning-light); color: var(--ink-soft); font-size: 0.875rem; line-height: 1.65; padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
.foot .wrap { display: grid; gap: 1rem; border-top: 1px solid var(--rule); padding-top: 2rem; }
.foot-ai { color: var(--ink); font-weight: 700; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.foot-links a { display: inline-block; padding: 0.375rem 0; color: var(--ink); }
.biz { display: grid; gap: 0.125rem; }

/* ---------- 문서 페이지 ---------- */
.doc-top { background: var(--night); }
.doc { --focus: #1d4f9a; padding-block: 2.5rem 3.5rem; }
.doc article { max-width: 38rem; display: grid; gap: 1rem; font-size: 1rem; line-height: 1.75; }
.doc h1 { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.25; }
.doc .meta { color: var(--ink-soft); font-size: 0.875rem; }
.doc .lead { font-size: 1.0625rem; }
.doc h2 { font-size: 1.25rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.doc h3 { font-size: 1.0625rem; margin-top: 0.75rem; }
.doc ul, .doc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; }
.doc .summary { background: #fff; border-radius: 20px; padding: 1.125rem 1.25rem; display: grid; gap: 0.5rem; }
.doc .summary p { display: flex; gap: 0.625rem; }
.doc .summary p::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.7em; border-radius: 50%; background: #c99a3f; }
.doc .draft { background: #fff4d6; color: #5a430d; border-radius: 14px; padding: 0.75rem 1rem; font-size: 0.875rem; }
/* 확정 전 값: 배포 전에 모두 지워야 해요 (scripts/check.py --release가 막아요) */
mark.todo { background: #ffd84d; color: #2b1d00; font-weight: 700; font-size: 0.875em; border-radius: 4px; padding: 0.05em 0.3em; outline: 2px dashed #b4561f; outline-offset: 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.doc dl.rows { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.doc dl.rows > div { display: grid; gap: 0.125rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.doc dl.rows dt { font-weight: 700; }
.doc dl.rows dd { margin: 0; color: var(--ink-soft); }
.doc .contact { display: grid; gap: 0.5rem; background: #fff; border-radius: 20px; padding: 1.25rem; }
.doc .contact a { font-weight: 700; font-size: 1.0625rem; color: #1b2f5c; }
.doc .otter-say { display: flex; gap: 0.75rem; align-items: center; }
.doc .otter-say img { width: 56px; height: 56px; flex: none; }
.doc .otter-say .say { color: #5b3a24; }

/* ---------- 넓은 화면 (펼친 폴드·태블릿·PC) ---------- */
@media (min-width: 720px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 1rem; padding-top: 0.5rem; }
  .hero-copy { padding-bottom: 3rem; }
  .sky { margin-inline: 0 calc(-1 * var(--gutter-r)); }
  .sky img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-block: 3rem 5rem; }
  .stars-sec .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .chips { order: 2; }
  .trust .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .day-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .day-list li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.375rem; align-content: start; }
  .day-list img { width: 80px; height: 80px; order: -1; }
  .notify-panel { padding: 2.25rem 2rem; }
  .faq, .price, .notify { justify-items: start; }
}
@media (max-width: 374px) {
  body { font-size: 1rem; }
  .memory-chip { font-size: 0.8125rem; }
  .day-list li { grid-template-columns: 2.875rem 56px 1fr; gap: 0.625rem; }
  .day-list img { width: 56px; height: 56px; }
  .consent { grid-template-columns: 1fr; }
  .consent dd { margin-bottom: 0.375rem; }
}

.trust-more { margin-top: 1.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* /delete-account/ 로그인 삭제 칸 (PUBREG-HOOKS-1031) */
.doc .del-box { display: grid; gap: 0.75rem; background: #fff; border-radius: 20px; padding: 1.25rem; }
.doc .del-box[hidden], .doc .web-delete[hidden] { display: none; }
.doc .del-first { margin-top: 0; padding-top: 0; border-top: 0; }
.doc .del-check { display: flex; gap: 0.625rem; align-items: flex-start; cursor: pointer; }
.doc .del-check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.3em; }
.doc .del-btn { display: block; width: 100%; border: 0; font: inherit; font-weight: 700; text-align: center; padding: 0.875rem; border-radius: 12px; cursor: pointer; }
.doc .del-kakao { background: #fee500; color: #191919; }
.doc .del-naver { background: #03c75a; color: #fff; }
.doc .del-box:has(#del-ok:not(:checked)) .del-btn { opacity: 0.4; }