/* Hallmark · shape: material bands, each field one winter material of the tree · genre: editorial · theme: custom · job: book · idea: "the tree's winter materials set the page: snow-white shopping-bag ground, conifer-green ink, one velvet-ribbon red on the buttons, blue-ice lines and a frost band, bulb-gold underlines" · vibe: "clean snow white, conifer green, one red ribbon"
 * paper: oklch(98.4% 0.004 106.5) · accent: oklch(46.9% 0.166 21.4) · display: Pretendard 500 · body: Pretendard 400 · wordmark: Maru Buri SemiBold drawn as outlines · hero: the 3:4 tree photograph bleeds off the top and right edge of a snow-white first screen, headline and price sit low beside it, the wordmark signs the bottom-left corner · nav: four in-page text links at the top of the hero's text column on desktop, a fixed red bottom bar on phones · footer: wordmark with the place line and three channel links, then the privacy link · imagery: the client's own photographs and its reel, brightened and balanced to the shopping-bag white, square corners · signature: the tree glowing against the wood wall, set on snow white · copy: verbatim
 * axes: light/grotesk-sans/warm · posture: full-palette (snow ground, frost bands, one conifer band; velvet seal on buttons; ice rules; gold underlines) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the brief fixes copy and section order, so the argument is carried by colour: every field is one named winter material of the tree */
/* Hallmark · finish-review: in-thread · fix · owner said the olive ground felt murky: ground moved to snow white, ink to conifer green, red kept for buttons alone, photographs brightened to the bag white, one conifer band kept for the care lines · render tier: headless Chrome cannot launch in this sandbox, so 1280, 1440, 1920 and the 390 phone were checked by hand in the browser */
@import url("./tokens.css");
@import url("./base.css");

/* 기본 */
html { color-scheme: light; }
body {
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  padding-bottom: var(--bar-height);
}
h1, h2, h3 { font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.22; }
h2 { font-size: var(--text-section); max-width: 18em; }
h3 { font-size: var(--text-lead); letter-spacing: -0.02em; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
a { text-decoration-color: var(--color-gold); text-underline-offset: 0.24em; }
a:hover { text-decoration-thickness: 2px; }
.section { padding-block: var(--section-gap) 0; }
.grid12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }

/* 사진 */
.ph { position: relative; background: var(--color-frost); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--34 { aspect-ratio: 3 / 4; }
.ph--45 { aspect-ratio: 4 / 5; }
.ph--53 { aspect-ratio: 5 / 3; }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--space-xl);
  border: 1px solid transparent; border-radius: 0;
  font: 500 var(--text-md)/1 var(--font-body); letter-spacing: 0;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn--primary { background: var(--color-velvet); color: var(--color-snow); }
.btn--primary:hover { background: var(--color-velvet-deep); }
.btn--quiet { background: transparent; color: var(--color-pine); border-color: var(--color-pine); }
.btn--quiet:hover { background: var(--color-frost); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

.linkbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: inherit;
  font: 400 var(--text-sm)/1.4 var(--font-body);
  text-decoration: underline; text-decoration-color: var(--color-gold); text-underline-offset: 0.3em;
  cursor: pointer;
}
.linkbtn:hover { text-decoration-thickness: 2px; }
.linkbtn:active { transform: translateY(1px); }
.linkbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.linkbtn:disabled { opacity: 0.55; cursor: not-allowed; }

/* 빈칸 표시: 확정 전 사실 */

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-pine); color: var(--color-snow); }
.skip:focus-visible { top: var(--space-md); }

.wordmark { display: block; width: 100%; height: auto; fill: currentColor; }
.nw { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 1. 첫 화면 */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.hero__photo { order: -1; }
.hero__text {
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg);
  padding: var(--space-xl) var(--gutter);
}
.hero__nav { display: none; }
.hero h1 { font-size: var(--text-display); max-width: none; }
.hero__sub { font-size: var(--text-lead); max-width: 34em; }
.br-wide { display: none; }
.hero__mark { display: block; width: 4.25rem; margin-top: var(--space-md); color: var(--color-pine); }
.hero__mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* 2. 들고 가는 결과 */
.result__text { display: grid; gap: var(--space-md); align-content: start; }
.result__text p { font-size: var(--text-lead); }
.facts { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 0; }
.facts div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.facts dd { margin: 0; }

/* 3. 재료 */
.materials__lists { display: grid; gap: var(--space-lg); align-content: start; }
.materials__lists h2 { margin-bottom: var(--space-md); }
.names { list-style: none; display: flex; flex-wrap: wrap; column-gap: 0.55em; row-gap: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.2; }
.names--live { font-size: var(--text-names); }
.names--kit { font-size: var(--text-title); }
.materials__note { max-width: 32em; margin-bottom: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); }

/* 4. 과정 */
.process__video video { width: 100%; height: 100%; object-fit: cover; }
.process__steps { display: grid; gap: var(--space-lg); align-content: end; }
.steps { list-style: none; display: grid; gap: var(--space-2xs); font-size: var(--text-title); font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; }
.process__steps p { max-width: 26em; }
.video-ctrl { display: flex; justify-content: flex-start; margin-top: var(--space-xs); }

/* 5. 가격, 서리 띠 */
.band { padding-block: var(--section-gap-s); }
.band--frost { margin-top: var(--section-gap); background: var(--color-frost); color: var(--color-pine); }
.prices { display: grid; gap: var(--space-md); margin: 0; }
.prices__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-md); }
.prices dt { font-size: var(--text-lead); }
.prices dd { margin: 0; font-size: var(--text-lead); white-space: nowrap; text-align: right; }
.fig { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: var(--text-section); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-right: var(--space-3xs); }
.sum { display: block; margin-top: var(--space-2xs); font-size: var(--text-md); color: var(--color-ink-2); }
.price__notes { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); max-width: 40em; }

/* 6. 단체·기업 */
.group__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.group__text { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.group__body { display: grid; gap: var(--space-sm); align-content: start; justify-items: start; }
.group__body .btn { margin-top: var(--space-md); }

/* 7. 오래 보는 법, 침엽수 띠 */
.band--pine { margin-top: var(--section-gap); background: var(--color-pine); color: var(--color-snow); --color-focus: var(--color-gold); }
.care__list { list-style: none; display: grid; gap: var(--space-sm); font-size: var(--text-title); font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; }

/* 8. 자주 묻는 질문 */
.faq__list { border-top: 1px solid var(--color-rule); }
.faq__list details { border-bottom: 1px solid var(--color-rule); }
.faq__list summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  min-height: 64px; padding: var(--space-md) 0;
  font-size: var(--text-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.4;
  cursor: pointer; list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 14px; height: 14px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: currentColor; }
.pm::after { transform: rotate(90deg); }
.faq__list details[open] .pm::after { transform: none; }
.faq__list summary:hover { text-decoration: underline; text-decoration-color: var(--color-gold); text-underline-offset: 0.3em; }
.faq__list summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq__list details > div { display: grid; gap: var(--space-xs); padding: 0 0 var(--space-lg); max-width: 40em; }

/* 9. 문의 폼, 서리 띠 (가격 띠와 같은 바탕) */
.inquiry__head { display: grid; gap: var(--space-md); align-content: start; }
.inquiry__head p { font-size: var(--text-lead); max-width: 22em; }
.form { display: grid; gap: var(--space-lg); }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend, .field > label { display: block; margin-bottom: var(--space-xs); padding: 0; font-size: var(--text-sm); font-weight: 500; }
.opt { margin-left: var(--space-2xs); font-weight: 400; color: var(--color-muted); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"], .field textarea {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 0 var(--space-md);
  border: 1px solid var(--color-ice-deep); border-radius: 0;
  background: var(--color-field); color: var(--color-pine);
  font-size: var(--text-md); line-height: 1.4;
  outline: 2px solid transparent; outline-offset: -3px;
}
.field textarea { min-height: 128px; padding-block: var(--space-sm); resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input:hover, .field textarea:hover { border-color: var(--color-pine); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.hint { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.err { min-height: 1lh; margin-top: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-error); }
.err:empty { min-height: 0; margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md);
  border: 1px solid var(--color-ice-deep); background: var(--color-field); color: var(--color-pine);
  font-size: var(--text-md); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.chip label:hover { border-color: var(--color-pine); }
.chip input:checked + label { background: var(--color-pine); color: var(--color-snow); border-color: var(--color-pine); }
.chip input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip input:active + label { transform: translateY(1px); }
.chip input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.chips[aria-invalid="true"] .chip label { border-color: var(--color-error); }

.form .groupset { display: grid; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-snow); }

.consent { display: grid; gap: var(--space-sm); }
.terms { display: grid; gap: var(--space-2xs); margin: 0; font-size: var(--text-sm); }
.terms div { display: flex; gap: var(--space-sm); }
.terms dt { flex: none; width: 5em; color: var(--color-muted); }
.terms dd { margin: 0; }
.consent > p { font-size: var(--text-sm); }
.check { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; font-weight: 500; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-pine); cursor: pointer; }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.check input:disabled { opacity: 0.55; cursor: not-allowed; }
.form__send { display: grid; gap: var(--space-sm); justify-items: start; }
.form__status { font-size: var(--text-sm); }
.form__status a { color: inherit; }
.done { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-xl) 0; }
.done:focus { outline: none; }
.done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.done__head { font-size: var(--text-title); font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; }

/* 10. 푸터 */
.foot { padding-block: var(--space-3xl) var(--space-2xl); }
.foot__grid { display: grid; gap: var(--space-xl); }
.foot__brand { display: grid; gap: var(--space-md); align-content: start; }
.foot__mark { display: block; width: 6.5rem; color: var(--color-pine); }
.foot__mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.foot__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--color-gold); }
.foot__links a:focus-visible, .foot__meta a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.foot__meta { display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-sm); color: var(--color-ink-2); }

/* 모바일 하단 고정 바 */
.bar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: center;
  min-height: var(--bar-height); padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-velvet); color: var(--color-snow);
  font-size: var(--text-md); font-weight: 500; text-decoration: none;
}
.bar:hover, .bar:active { background: var(--color-velvet-deep); }
.bar:focus-visible { outline: 2px solid var(--color-snow); outline-offset: -5px; }
.bar.is-off { visibility: hidden; }

/* 넓은 화면 */
@media (min-width: 40rem) {
  .br-wide { display: inline; }
  .prices { gap: var(--space-xs); }
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prices__row { grid-template-columns: 11em auto; justify-content: start; }
  .prices dd { text-align: left; }
  .sum { display: inline; margin: 0 0 0 var(--space-xs); }
  .group__photos { gap: var(--gap-columns); }
}

@media (min-width: 60rem) {
  body { padding-bottom: 0; }
  .bar { display: none; }
  .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }

  .hero { --hero-h: max(37.5rem, min(100svh, 62.5rem)); grid-template-columns: minmax(0, 1fr) calc(var(--hero-h) * 0.75); grid-template-rows: var(--hero-h); height: var(--hero-h); }
  .hero__photo { order: 0; width: 100%; height: var(--hero-h); aspect-ratio: auto; }
  .hero__text {
    justify-content: flex-end;
    padding: var(--space-xl) var(--space-2xl) var(--space-xl) max(var(--gutter), calc((100cqi - var(--container)) / 2 + var(--gutter)));
  }
  .hero__nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-bottom: auto; font-size: var(--text-sm); }
  .hero__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
  .hero__nav a:hover { text-decoration: underline; text-decoration-color: var(--color-gold); }
  .hero__nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .hero__mark { width: 4.75rem; margin-top: var(--space-lg); }

  .result__text { grid-column: 8 / 13; grid-row: 1; }
  .result__a { grid-column: 1 / 7; grid-row: 1 / 3; }
  .result__b { grid-column: 8 / 13; grid-row: 2; align-self: end; }

  .materials__lists { grid-column: 1 / 9; grid-row: 1; }
  .materials__photo { grid-column: 9 / 13; grid-row: 1; }

  .process h2 { grid-column: 1 / 13; grid-row: 1; }
  .process__video { grid-column: 1 / 6; grid-row: 2; }
  .process__steps { grid-column: 7 / 13; grid-row: 2; align-self: center; }
  .steps { font-size: var(--text-section); gap: var(--space-xs); }

  .price h2 { grid-column: 1 / 5; }
  .price__body { grid-column: 5 / 13; display: grid; grid-template-columns: auto minmax(0, 19em); justify-content: space-between; align-items: end; column-gap: var(--space-2xl); }
  .price__notes { margin-top: 0; }

  .group__text { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-2xl); }
  .group__text h2 { grid-column: 1 / 7; }
  .group__body { grid-column: 7 / 13; }

  .care h2 { grid-column: 1 / 5; }
  .care__list { grid-column: 5 / 13; }

  .faq h2 { grid-column: 1 / 5; }
  .faq__list { grid-column: 5 / 13; }

  .inquiry__head { grid-column: 1 / 5; }
  .inquiry__main { grid-column: 6 / 13; }

  .foot__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .foot__brand { grid-column: 1 / 7; }
  .foot__meta { grid-column: 8 / 13; }
}

@media (max-width: 40rem) {
  :root { --gutter: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .chip label { transition: background-color var(--dur-short) linear; }
  .btn:active, .linkbtn:active, .chip input:active + label { transform: none; }
}