@font-face {
  font-family: Pretendard;
  src: url("assets/assets/fonts/Pretendard-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Pretendard;
  src: url("assets/assets/fonts/Pretendard-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* 스펙 v3. */
:root {
  color-scheme: light;
  --surface: #FFFFFF;
  --surfaceSoft: #F5F6F8;
  --surfacePressed: #ECEEF1;
  --line: #E6E8EB;
  --ink: #191C21;
  --ink2: #4E5561;
  --ink3: #727780;
  --primary: #2F6FEB;
  --primaryPressed: #2459C4;
  --primarySoft: #EAF1FE;
  --primaryDisabled: #C9D9FA;
  --onPrimary: #FFFFFF;
  --success: #0B7F52;
  --successSoft: #E7F6EE;
  --warn: #9A5B00;
  --warnSoft: #FFF3DC;
  --error: #C9363B;
  --errorSoft: #FDECEC;
  --wood: #E6F5EC;
  --woodInk: #1D7A47;
  --fire: #FDE9EA;
  --fireInk: #C6363E;
  --earth: #FFF3D6;
  --earthInk: #94600A;
  --metal: #EEF0F3;
  --metalInk: #4F5966;
  --water: #E7EDFB;
  --waterInk: #2A4FA8;
  --sans: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --gutter: 20px;
  --radius-control: 14px;
  --radius-card: 20px;
  --radius-sheet: 24px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/26px var(--sans);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
::selection { background: var(--primary); color: var(--onPrimary); }
a { color: var(--primary); text-underline-offset: 4px; }
a:hover { color: var(--primaryPressed); }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, summary, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { overflow-wrap: break-word; word-break: keep-all; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 30px; line-height: 40px; margin: 0 0 16px; }
h2 { font-size: 24px; line-height: 32px; margin: 32px 0 12px; }
h3 { font-size: 20px; line-height: 28px; margin: 24px 0 8px; }
p { margin: 0 0 16px; }
li { margin-bottom: 8px; }
.tabular, .num, .price, .step-progress b { font-variant-numeric: tabular-nums; }

.shell, .studio-shell { width: min(calc(100% - var(--gutter) * 2), 1080px); margin-inline: auto; }
.flow { width: min(calc(100% - var(--gutter) * 2), 480px); margin-inline: auto; }
.prose, .article { width: min(calc(100% - var(--gutter) * 2), 680px); margin-inline: auto; }

.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.studio-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.studio-nav { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.studio-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font: 700 20px/28px var(--sans);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.studio-wordmark small { display: none; }
.studio-nav nav { display: flex; gap: 8px; align-items: center; }
.studio-nav nav a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}
.studio-nav nav a[aria-current="page"],
.studio-nav nav a:hover { color: var(--primary); }

.eyebrow, .num, .price-label, .kicker {
  color: var(--ink2);
  font: 700 13px/18px var(--sans);
  letter-spacing: 0;
  margin: 0 0 8px;
}
.lead { color: var(--ink2); font-size: 17px; line-height: 26px; max-width: 680px; }
.note, .fine, .refund-note, .disclaimer, .hint, .date { color: var(--ink2); font-size: 13px; line-height: 18px; }

.btn-primary,
.btn-secondary,
a.cta,
.cta-button,
button.pay,
button.copy,
a.home,
.actions a.secondary,
.transaction-page .actions a.secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-height: 56px;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-control);
  font: 700 17px/26px var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 100ms linear, background-color 100ms linear;
}
.btn-primary,
a.cta,
.cta-button,
button.pay,
button.copy,
a.home {
  background: var(--primary);
  color: var(--onPrimary);
}
.btn-secondary,
.actions a.secondary,
.transaction-page .actions a.secondary {
  background: var(--surfaceSoft);
  color: var(--ink);
}
.btn-primary:hover,
a.cta:hover,
.cta-button:hover,
button.pay:hover,
button.copy:hover,
a.home:hover { background: var(--primary); color: var(--onPrimary); }
.btn-primary:active,
a.cta:active,
.cta-button:active,
button.pay:active,
button.copy:active,
a.home:active,
.btn-secondary:active { transform: scale(0.98); }
.btn-primary:active,
a.cta:active,
button.pay:active,
button.copy:active,
a.home:active { background: var(--primaryPressed); }
.btn-primary:disabled,
button.pay:disabled,
button.copy:disabled,
a.cta[aria-disabled="true"] {
  background: var(--primaryDisabled);
  color: var(--ink2);
  opacity: 1;
  cursor: default;
  transform: none;
}
.btn-secondary:disabled { background: var(--surfacePressed); color: var(--ink3); cursor: default; }
.flow .btn-primary,
.flow .btn-secondary { width: 100%; }
.text-link {
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
a.secondary { color: var(--ink); }

.bottom-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
}
.bottom-cta .btn-primary,
.bottom-cta .btn-secondary { width: min(100%, 480px); margin-inline: auto; }
.has-bottom-cta { padding-bottom: 96px; }

.field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.field-label { font: 700 15px/22px var(--sans); color: var(--ink); }
.field input,
.field textarea,
.field select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surfaceSoft);
  color: var(--ink);
  font: 400 17px/26px var(--sans);
}
.field textarea { height: auto; min-height: 96px; padding: 16px; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--primary); }
.field-help { font: 400 13px/18px var(--sans); color: var(--ink2); }
.field-error { display: none; font: 400 13px/18px var(--sans); color: var(--error); }
.field.is-error input,
.field.is-error textarea { border-color: var(--error); }
.field.is-error .field-error { display: block; }

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surfaceSoft);
  color: var(--ink);
  font: 700 17px/26px var(--sans);
  text-align: left;
  cursor: pointer;
}
.option[aria-pressed="true"] {
  background: var(--primarySoft);
  border-color: var(--primary);
}
.option[aria-pressed="true"]::after {
  content: "";
  box-sizing: border-box;
  width: 7px;
  height: 12px;
  flex: none;
  margin-bottom: 3px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
}

.card,
.sample-card,
.price-card,
.transaction-page .card {
  background: var(--surfaceSoft);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-card);
  padding: 20px;
}
.grid > .card {
  display: block;
  background: var(--surfaceSoft);
  border-radius: var(--radius-card);
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
}
a.card:hover h3 { color: var(--primary); }
.card .num { margin-bottom: 12px; }
.card h3 { margin: 0 0 8px; }
.card p { color: var(--ink2); font-size: 15px; line-height: 22px; margin-bottom: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--successSoft);
  color: var(--success);
  font: 700 13px/18px var(--sans);
}
.badge.warn { background: var(--warnSoft); color: var(--warn); }
.badge.error { background: var(--errorSoft); color: var(--error); }

.el-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font: 700 18px/24px var(--sans);
}
.el-badge.small { width: 28px; height: 28px; font-size: 13px; line-height: 18px; }
.el-wood { background: var(--wood); color: var(--woodInk); }
.el-fire { background: var(--fire); color: var(--fireInk); }
.el-earth { background: var(--earth); color: var(--earthInk); }
.el-metal { background: var(--metal); color: var(--metalInk); }
.el-water { background: var(--water); color: var(--waterInk); }

.step-progress { display: flex; align-items: center; gap: 8px; }
.step-progress .bar {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surfaceSoft);
  overflow: hidden;
}
.step-progress .bar > span { display: block; height: 100%; background: var(--primary); }
.step-progress b { color: var(--ink2); font: 400 13px/18px var(--sans); font-weight: 400; }

.hero { padding-block: 40px 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 720px); }
.hero h1 .soft { color: var(--primary); }
.hero .note { margin-top: 12px; max-width: 560px; }
.hero-photo, .photo-row, .brand-mark { display: none; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }
.pill { color: var(--ink2); font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.block { border-top: 1px solid var(--line); padding-block: 56px; }
.block > .shell > p, .block h2 { max-width: 680px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.sample-layout, .price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.sample-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.sample-label, .sample-hanja, .sample-note { color: var(--ink2); }
.sample-badge { color: var(--ink3); }
.sample-name { font: 700 30px/40px var(--sans); letter-spacing: -0.02em; margin-top: 16px; }
.sample-rows { list-style: none; padding: 0; margin: 16px 0 0; }
.sample-rows li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-block: 12px; font-size: 15px; }
.price { font: 700 30px/40px var(--sans); letter-spacing: -0.02em; margin-bottom: 8px; }
.price-sub { font-size: 13px; color: var(--ink2); }
.price-list { padding: 0; list-style: none; margin: 16px 0 0; }
.price-list li { display: flex; gap: 12px; font-size: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.ok, .status.ok { color: var(--success); }
.err, .code, .status.bad { color: var(--error); font-size: 15px; overflow-wrap: anywhere; }

.faq-item, details.faq { border-top: 1px solid var(--line); }
.faq-item:last-of-type, details.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq-item summary, details.faq summary {
  cursor: pointer;
  padding: 16px 32px 16px 0;
  position: relative;
  list-style: none;
  font: 700 17px/26px var(--sans);
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker, details.faq summary::-webkit-details-marker { display: none; }
.faq-item summary::after, details.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink2);
  border-bottom: 2px solid var(--ink2);
  transform: rotate(45deg);
}
.faq-item[open] summary::after, details.faq[open] summary::after { transform: rotate(225deg); top: 26px; }
.faq-item p, details.faq p { color: var(--ink2); font-size: 17px; line-height: 26px; padding-bottom: 8px; max-width: 680px; }

footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-block: 24px 40px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
footer .links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
footer .links a { color: var(--ink2); min-height: 44px; display: inline-flex; align-items: center; }
.trust-footer { margin-top: 0; }

.article-page > main, .prose { width: min(calc(100% - var(--gutter) * 2), 680px); margin: 0 auto; padding-top: 32px; }
.article-page main > h2 { margin: 40px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.article-page main > p, .article-page main > ul, .article-page main > ol { color: var(--ink2); }
.article-page main a { display: inline-flex; align-items: center; min-height: 44px; }
.article-page .box, .cross-banner, div.cta {
  padding: 20px;
  background: var(--surfaceSoft);
  border: 0;
  border-radius: var(--radius-card);
  margin-block: 24px;
}
.box p:last-child, .cross-banner p:last-child, div.cta p:last-child { margin-bottom: 0; }
.article-page .cta-button { margin-top: 12px; }

.service-page > main { width: min(calc(100% - var(--gutter) * 2), 1080px); padding-top: 0; }
.service-content { max-width: 680px; margin-inline: auto; border-top: 1px solid var(--line); padding-top: 24px; }
.service-content > h2 { margin: 40px 0 12px; }
.service-content > p, .service-content > ul { color: var(--ink2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tags span { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surfaceSoft); font: 700 13px/18px var(--sans); color: var(--ink2); }

table, .compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; margin-block: 16px; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--ink2); font-weight: 700; background: transparent; }
.table-wrap { overflow-x: auto; }

.transaction-page .wrap { width: min(calc(100% - var(--gutter) * 2), 480px); margin: 32px auto 56px; }
.transaction-page .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font: 700 20px/28px var(--sans); }
.transaction-page h1 { font-size: 24px; line-height: 32px; margin-bottom: 8px; }
.transaction-page h2 { font-size: 20px; line-height: 28px; margin-top: 24px; }
.transaction-page .sub { font-size: 15px; line-height: 22px; color: var(--ink2); margin-bottom: 16px; }
.row { display: flex; justify-content: space-between; gap: 16px; padding-block: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.row span { color: var(--ink2); flex-shrink: 0; }
.row b { text-align: right; font-weight: 700; }
.row.price { align-items: baseline; }
.row.price b { font-size: 24px; line-height: 32px; color: var(--ink); font-variant-numeric: tabular-nums; }
.methods { display: flex; gap: 8px; margin-top: 16px; }
.method {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}
.method input { accent-color: var(--primary); margin: 0; }
.method.active { border-color: var(--primary); background: var(--primarySoft); }
button.pay, button.copy { width: 100%; margin-top: 16px; }
.transaction-page .note, .legal { color: var(--ink2); font-size: 13px; line-height: 18px; margin-top: 12px; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; color: var(--ink2); font-size: 15px; }
.icon { font-size: 24px; margin-block: 16px; }
.spin { color: var(--ink2); }
.linkbox { padding: 16px; margin-top: 16px; background: var(--surfaceSoft); color: var(--ink2); overflow-wrap: anywhere; font-size: 13px; border-radius: var(--radius-control); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pillar { text-align: center; padding: 16px 4px; background: var(--surfaceSoft); border-radius: var(--radius-control); }
.pillar b { display: block; font-size: 20px; }
.candidate { padding-block: 16px; border-top: 1px solid var(--line); }
.candidate h2 { margin-bottom: 8px; }
.result { color: var(--ink2); white-space: pre-wrap; }
.transaction-page .home { margin-top: 16px; }
.transaction-page .actions .home { margin-top: 0; }
a.kakao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  color: var(--ink);
  background: var(--surfaceSoft);
  border-radius: var(--radius-control);
  margin-top: 12px;
  text-decoration: none;
  font-weight: 700;
}

html:not(.cheotireum-app) flt-glass-pane,
html:not(.cheotireum-app) flutter-view { display: none !important; }
html.cheotireum-app .studio-header,
html.cheotireum-app .skip-link { display: none; }
.boot-note { display: none; }

@media (min-width: 900px) {
  :root { --gutter: 32px; }
  h1 { font-size: 44px; line-height: 56px; }
  .card, .sample-card, .price-card, .transaction-page .card,
  .article-page .box, .cross-banner, div.cta { padding: 24px; }
  .transaction-page h1 { font-size: 30px; line-height: 40px; }
}
@media (max-width: 760px) {
  .studio-nav { gap: 8px; }
  .hero-grid, .sample-layout, .price-wrap, .grid { grid-template-columns: 1fr; }
  .block { padding-block: 40px; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .studio-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    min-height: 64px;
    height: auto;
    padding-block: 8px;
  }
  .studio-nav nav { flex-wrap: wrap; max-width: 100%; }
}
@media (max-width: 370px) {
  .transaction-page .actions { flex-direction: column; align-items: stretch; }
}
/* 첫 화면은 landing.css 몫이다. 공용 크기가 그 버튼을 덮지 않게 되돌린다. */
body.home-page { font: 16px/1.5 var(--sans); }
body.home-page .btn-primary,
body.home-page .btn-secondary { height: auto; transition: none; }
body.home-page .btn-primary:active,
body.home-page .btn-secondary:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary, .btn-secondary, a.cta, .cta-button, button.pay, button.copy, a.home,
  .actions a.secondary, .transaction-page .actions a.secondary { transition: none; }
  .btn-primary:active, .btn-secondary:active, a.cta:active, button.pay:active,
  button.copy:active, a.home:active { transform: none; }
}