@font-face {
  font-family: "OnglyphPDH";
  src: url("/assets/assets/fonts/Ownglyph_ParkDaHyun.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/assets/fonts/Pretendard-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/assets/fonts/Pretendard-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/assets/fonts/Pretendard-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/assets/fonts/Pretendard-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #faf7f1;
  --paper-deep: #f2ede3;
  --surface: #ffffff;
  --ink: #23232a;
  --muted: #6b7280;
  --line: #e6e0d5;
  --green: #57a64c;
  --green-light: #c1e59f;
  --green-soft: #e8f4dc;
  --yellow: #ffe08a;
  --shadow: 0 24px 70px rgba(35, 35, 42, .12);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.visually-hidden {
  width: 1px; height: 1px; padding: 0; margin: -1px;
  position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  word-break: keep-all;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: "OnglyphPDH", Pretendard, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}
.button {
  font-family: "OnglyphPDH", Pretendard, sans-serif;
  font-size: 1.08rem;
}
.section-kicker, .eyebrow, nav, .header-cta {
  font-family: Pretendard, sans-serif;
}
h2 { font-size: clamp(2.15rem, 4vw, 3.5rem); line-height: 1.3; }
h3 { line-height: 1.4; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  color: white;
  background: var(--ink);
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

#app-loading { display: none; }
.app-mode #site, .app-mode .noscript { display: none; }
.app-mode body { min-height: 100vh; background: var(--paper); }
.app-mode #app-loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  z-index: -1;
  color: var(--muted);
  text-align: center;
}
.app-mode #app-loading[hidden] { display: none; }
.app-mode #app-loading img { animation: breathe 1.8s ease-in-out infinite; }
.app-mode #app-loading p { margin: 0; }
.app-mode #app-loading a { font-size: .85rem; }
@keyframes breathe { 50% { transform: scale(1.07) rotate(-2deg); } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(230, 224, 213, .8);
  background: rgba(250, 247, 241, .9);
  backdrop-filter: blur(18px);
}
.header-inner {
  width: min(1180px, calc(100% - 40px));
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand { margin-right: auto; }
.brand img { width: 132px; height: auto; }
nav { display: flex; gap: 28px; font-size: .92rem; font-weight: 800; }
nav a, .footer-links a { text-decoration: none; }
nav a:hover, .footer-links a:hover { color: var(--green); }
.header-cta {
  padding: 11px 18px;
  border-radius: 999px;
  color: white;
  background: var(--ink);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
}

main > section, footer {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}
.hero {
  min-height: min(820px, calc(100vh - 78px));
  padding: 82px 0 90px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 68px;
}
.eyebrow, .section-kicker {
  color: var(--green);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .13em;
}
.eyebrow { display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.eyebrow span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(87, 166, 76, .13);
}
.hero h1 {
  margin-bottom: 26px;
  font-size: clamp(3.15rem, 6.6vw, 6.1rem);
  line-height: 1.08;
}
.hero h1 em { color: var(--green); font-style: normal; }
.hero-summary { max-width: 560px; color: #51515b; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button {
  min-height: 54px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35, 35, 42, .12); }
.button.primary { color: white; background: var(--ink); }
.button.primary span { color: var(--green-light); font-size: 1.25rem; }
.button.secondary { background: transparent; }
.hero-note { margin: 15px 0 0 6px; color: var(--muted); font-size: .83rem; }

.hero-visual { position: relative; isolation: isolate; min-height: 680px; display: grid; place-items: center; }
.hero-visual::before {
  content: "";
  position: absolute;
  width: 530px;
  height: 530px;
  border-radius: 46% 54% 58% 42% / 46% 44% 56% 54%;
  background: linear-gradient(145deg, var(--green-light), #e6f2be);
  z-index: -1;
  transform: rotate(-8deg);
}
.device {
  position: relative;
  z-index: 2;
  width: min(346px, 83vw);
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 46px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.hero-device {
  min-height: 636px;
}
.device-status, .mini-status {
  height: 28px; padding: 8px 17px 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  font: 700 .58rem Pretendard, sans-serif;
}
.device-status i, .mini-status i {
  width: 74px; height: 20px; position: absolute; left: 50%; top: 0;
  border-radius: 0 0 14px 14px; background: var(--ink); transform: translateX(-50%);
}
.app-bar { height: 52px; padding: 6px 13px; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; border-bottom: 1px solid var(--line); }
.app-bar img { width: 27px; }
.app-bar strong { overflow: hidden; font-family: "OnglyphPDH"; font-size: 1rem; font-weight: 400; text-align: center; white-space: nowrap; }
.round-action { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: rgba(87,166,76,.1); font-size: .42rem; letter-spacing: 1px; }
.reveal-notice { min-height: 34px; padding: 8px 10px; display: flex; justify-content: space-between; color: #3f8a38; background: #edf5cf; font-size: .57rem; }
.reveal-notice b { color: var(--green); }
.glance-grid { height: 430px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; background: white; }
.log-tile { position: relative; min-width: 0; overflow: hidden; color: white; background: #cfd4cb; }
.log-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 38%, rgba(0,0,0,.6)); }
.log-tile img { width: 100%; height: 100%; object-fit: cover; }
.log-tile .user-chip { position: absolute; z-index: 1; left: 7px; top: 7px; padding: 3px 7px; border-radius: 99px; background: rgba(18,18,24,.6); font: 600 .48rem Pretendard; }
.log-tile .user-chip::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: var(--green-light); }
.log-tile .user-chip.female::before { background: #ff9ec4; }
.log-tile .user-chip.male::before { background: #8fb4ff; }
.log-tile strong { position: absolute; z-index: 1; left: 0; right: 0; top: 49%; font-size: .8rem; text-align: center; text-shadow: 0 1px 6px #000; }
.log-tile small { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 7px; overflow: hidden; font-size: .48rem; white-space: nowrap; text-overflow: ellipsis; }
.log-tile i { position: absolute; z-index: 1; right: 7px; bottom: 7px; padding: 2px 5px; border-radius: 9px; background: rgba(18,18,24,.55); font: normal .44rem Pretendard; }
.hour-wheel { height: 48px; padding: 0 19px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); background: white; font-size: .61rem; }
.hour-wheel span { color: var(--muted); opacity: .55; }
.hour-wheel b { min-width: 42px; padding: 6px 10px; border: 1px solid rgba(87,166,76,.25); border-radius: 14px; color: var(--green); background: rgba(87,166,76,.08); font-size: .8rem; text-align: center; }
.app-tabs { height: 44px; padding: 5px 22px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); background: white; }
.app-tabs span { display: grid; justify-items: center; color: #a2a2aa; font-size: .72rem; line-height: 1; }
.app-tabs span.active { color: var(--green); }
.app-tabs small { margin-top: 3px; font: 500 .38rem Pretendard; }
.hero-clover { position: absolute; z-index: 3; left: 2%; top: 10%; transform: rotate(-14deg); filter: drop-shadow(0 8px 16px rgba(35,35,42,.14)); }
.screen-caption { position: absolute; z-index: 4; right: -1%; bottom: 7%; padding: 10px 14px; border: 1px solid var(--ink); border-radius: 12px; background: white; box-shadow: 4px 4px 0 var(--yellow); font: 600 .72rem Pretendard; transform: rotate(-2deg); }

.definition {
  padding: 105px clamp(20px, 8vw, 110px);
  border: 2px solid var(--ink);
  border-radius: 42px;
  background: white;
  box-shadow: 9px 10px 0 var(--green-light);
  text-align: center;
}
.definition h2 { margin-bottom: 26px; }
.answer-first { max-width: 850px; margin: 0 auto; color: #51515b; font-size: clamp(1.05rem, 2vw, 1.28rem); }
.answer-first strong { color: var(--ink); }
.definition-facts { max-width: 720px; margin: 42px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; }
.definition-facts li { padding: 17px 13px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.definition-facts b { color: var(--green); font-family: "OnglyphPDH"; font-size: 1.35rem; font-weight: 400; }
.definition-facts span { color: var(--muted); font-size: .76rem; }

.product-preview, .how, .features, .faq { padding-top: 140px; }
.section-heading { margin-bottom: 48px; text-align: center; }
.section-heading h2 { margin-bottom: 10px; }
.section-heading > p:last-child { color: var(--muted); }
.preview-heading > p:last-child { max-width: 620px; margin-inline: auto; }
.preview-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.preview-item { min-width: 0; display: flex; flex-direction: column; }
.mini-device {
  width: min(100%, 328px); aspect-ratio: 328 / 650; margin: 0 auto;
  position: relative; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 39px;
  background: var(--surface); box-shadow: 0 18px 50px rgba(35,35,42,.12);
}
.preview-item:nth-child(2) .mini-device { box-shadow: 0 18px 50px rgba(87,166,76,.22), 0 0 0 7px rgba(163,215,138,.28); }
.mini-status { height: 27px; }
.mini-status i { width: 68px; height: 18px; }
.browse-head { height: 49px; padding: 4px 16px; display: flex; align-items: center; }
.browse-head h3 { margin: 0; font-size: 1.35rem; }
.bell { width: 30px; height: 30px; margin-left: auto; position: relative; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); font: 400 1.1rem "OnglyphPDH"; }
.bell b { position: absolute; right: -3px; top: -3px; min-width: 14px; height: 14px; padding: 0 3px; display: grid; place-items: center; border: 2px solid white; border-radius: 9px; color: white; background: var(--green); font: 700 .42rem Pretendard; }
.search-box { height: 38px; margin: 3px 15px 7px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: #9ca3af; font-size: .61rem; }
.filter-chips { padding: 0 15px 9px; display: flex; gap: 5px; }
.filter-chips span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .5rem; }
.filter-chips .selected { border-color: var(--green); color: white; background: var(--green); }
.room-grid { height: 464px; padding: 4px 15px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.room-card { position: relative; overflow: hidden; border-radius: 14px; color: white; background: #8b9b85; }
.room-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(0,0,0,.75)); }
.room-card img { width: 100%; height: 100%; object-fit: cover; }
.room-card em { position: absolute; z-index: 1; right: 6px; top: 6px; padding: 3px 5px; border-radius: 10px; background: rgba(0,0,0,.48); font: normal .4rem Pretendard; }
.room-card strong { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 22px; font-size: .62rem; line-height: 1.25; }
.room-card small { position: absolute; z-index: 1; left: 8px; bottom: 8px; color: rgba(255,255,255,.78); font-size: .43rem; }
.mini-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 43px; padding: 8px 38px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); background: white; color: #aaaab2; }
.mini-tabs b { font-size: .75rem; }
.mini-tabs .on { color: var(--green); }
.mini-app-bar { height: 48px; padding: 5px 13px; display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; border-bottom: 1px solid var(--line); }
.mini-app-bar img { width: 25px; }
.mini-app-bar strong { overflow: hidden; font-family: "OnglyphPDH"; font-size: .88rem; font-weight: 400; text-align: center; white-space: nowrap; }
.mini-app-bar span { color: var(--green); font-size: .42rem; letter-spacing: 1px; }
.mini-notice { height: 31px; padding: 8px 10px; color: #3f8a38; background: #edf5cf; font-size: .52rem; text-align: center; }
.mini-glance { height: 475px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 1px; }
.mini-glance > div { position: relative; overflow: hidden; color: white; }
.mini-glance > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 42%, rgba(0,0,0,.52)); }
.mini-glance img { width: 100%; height: 100%; object-fit: cover; }
.mini-glance span { position: absolute; z-index: 1; left: 7px; top: 7px; padding: 2px 6px; border-radius: 9px; background: rgba(0,0,0,.5); font-size: .45rem; }
.mini-glance b { position: absolute; z-index: 1; left: 0; right: 0; top: 48%; font-size: .7rem; text-align: center; text-shadow: 0 1px 5px #000; }
.mini-wheel { position: absolute; left: 0; right: 0; bottom: 43px; height: 38px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: white; font-size: .49rem; }
.mini-wheel span { color: #aaa; }
.mini-wheel b { min-width: 34px; padding: 4px 7px; border: 1px solid rgba(87,166,76,.25); border-radius: 11px; color: var(--green); background: rgba(87,166,76,.08); text-align: center; }
.profile-bar { height: 49px; padding: 2px 14px; display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; border-bottom: 1px solid var(--line); }
.profile-bar span { font-size: 1.5rem; }
.profile-bar strong { font-family: "OnglyphPDH"; font-size: 1rem; font-weight: 400; text-align: center; }
.profile-photo { height: 304px; margin: 10px 16px 0; position: relative; overflow: hidden; border-radius: 18px; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo span { position: absolute; right: 9px; bottom: 9px; padding: 3px 7px; border-radius: 9px; color: white; background: rgba(0,0,0,.48); font-size: .48rem; }
.profile-name { margin: 10px 17px 5px; display: flex; align-items: center; gap: 6px; }
.profile-name h3 { margin: 0; font-size: 1.25rem; }
.profile-name span { padding: 2px 6px; border-radius: 6px; color: var(--green); background: rgba(87,166,76,.12); font-size: .48rem; }
.schedule-hint { margin: 0 16px 7px; padding: 7px 8px; border-radius: 8px; color: #3f8a38; background: var(--green-soft); font-size: .49rem; text-align: center; }
.reveal-rows { margin: 0 16px; border-top: 1px solid var(--line); }
.reveal-rows div { min-height: 35px; display: grid; grid-template-columns: 58px 1fr; align-items: center; border-bottom: 1px solid #f1eee6; font-size: .52rem; }
.reveal-rows dt { color: var(--muted); }
.reveal-rows dd { margin: 0; text-align: right; }
.preview-copy { width: min(100%, 328px); margin: 0 auto; padding: 26px 4px 0; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 4px; align-items: start; text-align: left; }
.preview-copy > span { width: 30px; height: 30px; grid-row: 1 / span 2; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font: 700 .65rem Pretendard; }
.preview-copy h3 { min-height: 2.8em; margin: 0; font-size: 1.35rem; }
.preview-copy p { grid-column: 2; margin: 0; color: var(--muted); font-size: .84rem; }
.step-grid {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  list-style: none;
}
.step-grid li {
  position: relative;
  min-height: 330px;
  padding: 28px 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}
.step-grid li { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.step-grid li:hover { transform: translateY(-5px); border-color: rgba(87,166,76,.45); box-shadow: 0 16px 34px rgba(35,35,42,.08); }
.step-number { position: absolute; right: 20px; top: 13px; color: #e6e1d9; font: 900 3rem Pretendard, sans-serif; }
.step-icon {
  width: 72px; height: 72px; margin: 28px 0 26px;
  display: grid; place-items: center;
  border: 2px solid var(--ink);
  border-radius: 24px 19px 25px 20px;
  color: var(--ink); background: var(--green-light);
  font: 700 .82rem Pretendard, sans-serif;
  letter-spacing: .06em;
  transform: rotate(-3deg);
}
.step-grid li:nth-child(2) .step-icon { background: var(--yellow); transform: rotate(3deg); }
.step-grid li:nth-child(3) .step-icon { background: #d8d1ff; }
.step-grid li:nth-child(4) .step-icon { background: #ffd5df; transform: rotate(4deg); }
.step-grid h3 { margin-bottom: 12px; font-size: 1.22rem; }
.step-grid p { margin: 0; color: var(--muted); font-size: .91rem; }

.feature-story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.story-card {
  min-width: 0; min-height: 650px; padding: 36px;
  display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid var(--line); border-radius: 34px;
  background: white;
}
.moment-story { background: var(--green-light); border-color: transparent; }
.continue-story { color: white; background: var(--ink); border-color: var(--ink); }
.feature-tag { display: block; margin-bottom: 28px; font: 700 .68rem Pretendard, sans-serif; letter-spacing: .11em; opacity: .68; }
.story-card h3 { margin-bottom: 14px; font-size: clamp(1.8rem, 2.7vw, 2.45rem); }
.story-card p { color: inherit; opacity: .74; font-size: .92rem; }
.capture-preview {
  min-height: 345px; margin-top: auto; position: relative; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 26px; color: white; background: #708568;
  box-shadow: 7px 8px 0 rgba(35,35,42,.14);
}
.capture-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 40%, rgba(0,0,0,.7)); }
.capture-preview > img { width: 100%; height: 345px; object-fit: cover; }
.capture-user, .capture-duration, .capture-time, .capture-caption { position: absolute; z-index: 1; }
.capture-user { left: 13px; top: 13px; padding: 5px 9px; border-radius: 99px; background: rgba(18,18,24,.56); font: 600 .63rem Pretendard; }
.capture-user::first-letter { color: var(--green-light); }
.capture-duration { right: 13px; top: 13px; padding: 5px 8px; border-radius: 99px; background: rgba(18,18,24,.56); font: 600 .62rem Pretendard; }
.capture-time { left: 0; right: 0; top: 43%; font: 700 1.45rem Pretendard; text-align: center; text-shadow: 0 2px 8px #000; }
.capture-caption { left: 14px; right: 14px; bottom: 13px; display: flex; justify-content: space-between; align-items: end; gap: 8px; font: 600 .68rem Pretendard; }
.capture-caption span { flex: none; padding: 5px 7px; border-radius: 10px; background: rgba(18,18,24,.56); font-size: .58rem; }
.day-reveal { margin: auto 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.day-reveal li { min-height: 57px; padding: 10px 12px; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.day-reveal li:first-child { border-color: rgba(87,166,76,.32); background: var(--green-soft); }
.day-reveal b { color: var(--green); font: 700 .61rem Pretendard; }
.day-reveal span { font-size: .72rem; font-weight: 600; }
.day-reveal i { padding: 4px 7px; border-radius: 8px; color: #397135; background: white; font: normal 600 .53rem Pretendard; }
.continue-preview { margin-top: auto; padding: 18px; border: 1px solid #44444e; border-radius: 24px; background: #2d2d36; }
.continue-preview > p { margin-bottom: 13px; color: white; font-weight: 600; opacity: 1; }
.choice-row { margin-top: 8px; padding: 10px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; border-radius: 13px; background: #383842; }
.choice-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #d8d1ff; font-size: .68rem; font-weight: 700; }
.choice-avatar.a2 { background: #c8e8ff; }
.choice-row div { min-width: 0; display: grid; }
.choice-row b { font-size: .69rem; }
.choice-row small { overflow: hidden; color: #aaaab5; font-size: .53rem; white-space: nowrap; text-overflow: ellipsis; }
.choice-row em { padding: 6px 8px; border-radius: 9px; color: #d6f3c8; background: rgba(87,166,76,.22); font: normal 600 .52rem Pretendard; }
.connection-line { margin: 18px 3px 13px; display: flex; align-items: center; gap: 7px; }
.connection-line span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--green-light); font-size: .55rem; }
.connection-line i { flex: 1; height: 1px; background: #555560; }
.connection-line b { color: var(--green-light); font-size: .58rem; white-space: nowrap; }
.next-room { padding: 13px; display: grid; gap: 2px; border-radius: 13px; color: var(--ink); background: var(--green-light); }
.next-room strong { font-size: .7rem; }
.next-room small { color: #4f6648; font-size: .55rem; }

.faq { max-width: 1180px; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(40px, 8vw, 110px); align-items: start; }
.faq .section-heading { position: sticky; top: 118px; margin: 0; text-align: left; }
.faq-heading h2 { font-size: clamp(2.3rem, 4vw, 3.6rem); }
.faq-heading > p:last-child { max-width: 300px; margin-top: 18px; }
.faq-list { display: grid; gap: 10px; }
details { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; transition: border-color .2s ease, box-shadow .2s ease; }
details[open] { border-color: rgba(87,166,76,.38); box-shadow: 0 12px 28px rgba(35,35,42,.06); }
summary { padding: 22px 52px 22px 20px; cursor: pointer; font-weight: 700; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 19px; top: 15px; color: var(--green); font: 400 1.8rem sans-serif; transition: transform .25s ease; }
details[open] summary::after { transform: rotate(45deg); }
.faq-answer { overflow: hidden; }
details p { margin: -2px 48px 24px 20px; color: var(--muted); font-size: .92rem; }
details p a { color: var(--green); font-weight: 700; }

.download {
  margin-top: 140px;
  padding: 62px 76px;
  display: flex;
  align-items: center;
  gap: 52px;
  border-radius: 42px;
  color: white;
  background: var(--ink);
}
.download-character { flex: none; position: relative; }
.download-character img { filter: drop-shadow(0 12px 25px rgba(0,0,0,.25)); }
.download-character span { position: absolute; left: 50%; bottom: -10px; padding: 5px 9px; border: 1px solid #52525d; border-radius: 8px; color: var(--green-light); background: #2d2d36; font: 700 .55rem Pretendard; letter-spacing: .08em; white-space: nowrap; transform: translateX(-50%); }
.download-copy { flex: 1; }
.download h2 { margin-bottom: 10px; font-size: clamp(2rem, 4vw, 3.2rem); }
.download p:not(.section-kicker) { color: #b9b9c2; }
.store-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.store-links a { min-width: 132px; padding: 10px 16px; display: grid; gap: 1px; border: 1px solid #4b4b56; border-radius: 13px; color: white; background: #2e2e37; font-family: Pretendard, sans-serif; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.store-links a:hover { transform: translateY(-2px); border-color: var(--green-light); background: #353540; }
.store-links small { color: #9999a5; font-size: .58rem; font-weight: 500; }
.store-links b { font-size: .79rem; }
.download-note { margin: 14px 0 0; font-size: .69rem; }

footer {
  padding: 80px 0 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 28px;
}
.footer-brand img { width: 118px; height: auto; margin-bottom: 9px; }
.footer-brand p, .copyright { margin: 0; color: var(--muted); font-size: .78rem; }
.footer-links { display: flex; gap: 20px; font-size: .8rem; }
.copyright { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); }
.noscript { padding: 12px; color: white; background: var(--ink); text-align: center; }

.legal {
  width: min(820px, calc(100% - 40px));
  margin: 0 auto;
  padding: 80px 0 120px;
}
.legal-header { padding: 24px 0; border-bottom: 1px solid var(--line); }
.legal-header img { width: 120px; }
.legal h1 { margin: 62px 0 12px; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.1; }
.legal .updated { color: var(--muted); font-size: .85rem; }
.legal article { margin-top: 50px; padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.legal h2 { margin-top: 42px; font-size: 1.35rem; }
.legal h2:first-child { margin-top: 0; }
.legal li { margin-bottom: 7px; }
.legal .back { display: inline-block; margin-top: 30px; color: var(--green); font-weight: 800; }

@media (max-width: 900px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 58px; text-align: center; }
  .hero-copy { display: grid; justify-items: center; }
  .hero-visual { min-height: 690px; }
  .preview-row { grid-template-columns: 1fr 1fr; gap: 60px 18px; }
  .preview-item:last-child { grid-column: 1 / -1; width: min(100%, 420px); justify-self: center; }
  .step-grid { grid-template-columns: 1fr 1fr; }
  .feature-story { grid-template-columns: 1fr 1fr; }
  .continue-story { grid-column: 1 / -1; min-height: 560px; }
  .faq { grid-template-columns: 1fr; gap: 40px; }
  .faq .section-heading { position: static; text-align: center; }
  .faq-heading > p:last-child { margin-inline: auto; }
}

@media (max-width: 580px) {
  .header-inner, main > section, footer { width: calc(100% - 28px); max-width: 1180px; }
  .header-inner { height: 68px; gap: 12px; }
  .brand { flex: none; }
  .brand img { width: 112px; }
  .header-cta { margin-left: auto; padding: 9px 12px; font-size: .72rem; white-space: nowrap; }
  .hero { padding-top: 46px; gap: 30px; }
  .hero-copy { width: 100%; min-width: 0; }
  .hero h1 { font-size: clamp(2.25rem, 10.5vw, 3.2rem); }
  .hero-summary { max-width: 100%; font-size: 1rem; overflow-wrap: anywhere; }
  .hero-actions { width: 100%; }
  .button { width: 100%; }
  .hero-visual { min-height: 620px; margin-inline: -14px; }
  .hero-visual::before { width: 92vw; height: 92vw; }
  .hero-device { width: 296px; min-height: 560px; border-radius: 40px; }
  .glance-grid { height: 376px; }
  .hero-clover { width: 68px; left: 0; top: 8%; }
  .screen-caption { right: 0; bottom: 1%; font-size: .62rem; }
  .definition { padding: 70px 24px; border-radius: 30px; }
  .definition-facts { grid-template-columns: 1fr; margin-top: 32px; }
  .definition-facts li { grid-template-columns: 58px 1fr; align-items: center; text-align: left; }
  .product-preview, .how, .features, .faq { padding-top: 100px; }
  .preview-row { grid-template-columns: 1fr; gap: 62px; }
  .preview-item:last-child { grid-column: auto; width: 100%; }
  .mini-device { width: min(100%, 315px); }
  .step-grid { grid-template-columns: 1fr; }
  .step-grid li { min-height: 290px; }
  .feature-story { grid-template-columns: 1fr; }
  .story-card, .continue-story { grid-column: auto; min-height: 590px; padding: 28px; border-radius: 28px; }
  .feature-tag { margin-bottom: 22px; }
  .capture-preview, .capture-preview > img { min-height: 315px; height: 315px; }
  .faq { gap: 30px; }
  summary { padding-left: 17px; }
  details p { margin-left: 17px; margin-right: 38px; }
  .download { margin-top: 100px; padding: 46px 26px; flex-direction: column; align-items: flex-start; gap: 28px; }
  .download-character img { width: 100px; }
  .store-links { width: 100%; }
  .store-links a { flex: 1 1 120px; }
  footer { grid-template-columns: 1fr; }
  .copyright { grid-column: auto; }
  .footer-links { flex-wrap: wrap; }
  .legal article { padding: 28px 22px; }
}

html.motion-ready .hero-copy { animation: enter-up .72s cubic-bezier(.22, 1, .36, 1) both; }
html.motion-ready .hero-device { animation: enter-device .82s .12s cubic-bezier(.22, 1, .36, 1) both; }
html.motion-ready .hero-clover { animation: enter-clover .62s .38s cubic-bezier(.22, 1, .36, 1) both; }
html.motion-ready .screen-caption { animation: enter-caption .56s .52s cubic-bezier(.22, 1, .36, 1) both; }
html.motion-ready .log-tile { animation: tile-in .44s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.28s + var(--tile-index, 0) * 45ms); }
html.motion-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .68s cubic-bezier(.22, 1, .36, 1), transform .68s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes enter-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes enter-device {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes enter-clover {
  from { opacity: 0; transform: rotate(-22deg) scale(.7); }
  to { opacity: 1; transform: rotate(-14deg) scale(1); }
}
@keyframes enter-caption {
  from { opacity: 0; transform: translateY(12px) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) rotate(-2deg); }
}
@keyframes tile-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .step-grid li:hover { transform: none; }
  html.motion-ready .reveal { opacity: 1; transform: none; }
}

/* Firebase 전화 인증(웹)의 invisible reCAPTCHA 배지 숨김.
   ⚠️ 불변조건: 구글 정책상 배지를 숨기려면 고지 문구를 인증 플로우에 노출해야
   한다 — 전화번호 입력 화면 하단에 표기됨 (phone_input_view.dart, kIsWeb 분기).
   이 규칙과 그 고지는 한 쌍이다. 한쪽만 지우지 말 것. */
.grecaptcha-badge { visibility: hidden !important; }