:root {
  --brand: #962842;
  --brand-rgb: 150, 40, 66;
  --ink: #1a1a2e;
  --text: #333;
  --muted: #6b6b6b;
  --paper: #fff;
  --mist: #f5f5f5;
  --line: #e0e0e0;
  --gilt: linear-gradient(135deg, #d4a853, #fff 50%, #f0d78c);

  --bar-h: 5rem;           
  --wrap: 75rem;           
  --gut: 1.5rem;           
  --pad-y: 3.75rem;        
  --head-gap: 3.5rem;      
  --pic-gap: 1.875rem;     
  --ko-size: 3rem;         
  --title-h: 7rem;         
  --en-size: .875rem;      
  --en-track: .375rem;     
  --en-rule: 2.5rem;       
  --r-field: .625rem;      
  --ease-out: cubic-bezier(0, 0, .58, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: 'Noto Sans KR', sans-serif; line-height: 1.7; overflow-x: hidden; }
img { display: block; max-inline-size: 100%; block-size: auto; }
h2, h3, p { margin: 0; }

.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-block-start: env(safe-area-inset-top, 0px);
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.topbar.is-stuck {
  background-color: rgb(var(--brand-rgb) / .9);
  -webkit-backdrop-filter: blur(.75rem) saturate(1.5);
  backdrop-filter: blur(.75rem) saturate(1.5);
  box-shadow: 0 .5rem 1.875rem rgb(0 0 0 / .22);
}
.topbar__row {
  display: flex; align-items: center; justify-content: space-between;
  block-size: var(--bar-h); max-inline-size: var(--wrap); margin-inline: auto; padding-inline: 1.5rem;
}
.topbar__brand { display: inline-flex; margin-inline-start: 1.875rem; }
.topbar__brand img { inline-size: auto; block-size: 3.4375rem; transition: block-size .25s ease; }
.topbar.is-stuck .topbar__brand img { block-size: 3.0625rem; }

.gnb { display: flex; align-items: center; gap: .25rem; margin-inline-end: 2.125rem; }
.gnb__item {
  padding: .5rem 1rem; border-radius: 62rem;
  color: rgb(255 255 255 / .95); text-decoration: none; white-space: nowrap;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.0125rem;
  text-shadow: 0 .0625rem .1875rem rgb(0 0 0 / .35);
  transition: background-color .22s ease, color .22s ease;
}
.gnb__item:hover { background-color: rgb(255 255 255 / .15); color: #fff; }
.topbar.is-stuck .gnb__item { color: #fff; text-shadow: none; }
.gnb__item--ask { padding: .625rem 1.5rem; background-color: var(--brand); color: #fff; text-shadow: none; transition: transform .22s ease, filter .22s ease; }
.gnb__item--ask:hover { background-color: var(--brand); transform: translateY(-.125rem); filter: brightness(110%); }
.topbar.is-stuck .gnb__item--ask { background-color: #fff; color: var(--brand); }
.topbar.is-stuck .gnb__item--ask:hover { background-color: #fff; filter: brightness(.95); }

.burger { display: none; flex-direction: column; gap: .3125rem; padding: .25rem; border: 0; background: none; cursor: pointer; }
.burger i { display: block; inline-size: 1.375rem; block-size: .125rem; border-radius: .125rem; background-color: #fff; transition: background-color 300ms; }  
.topbar.is-stuck .burger i { background-color: #fff; }

.keyvisual { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.keyvisual__pic { inline-size: 100%; }

.keyvisual::before { content: ''; display: block; block-size: var(--bar-h); background-color: #50051c; }

.block { position: relative; overflow: hidden; padding: var(--pad-y) var(--gut); }
.block__wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; text-align: center; }
.block__en {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-block-end: .75rem;
  color: var(--ink); font-size: var(--en-size); font-weight: 600; letter-spacing: var(--en-track); text-transform: uppercase;
}
.block__en::before, .block__en::after { content: ''; inline-size: var(--en-rule); block-size: 1px; background-color: var(--brand); opacity: .5; }
.block__ko { display: inline-block; margin-block-end: var(--head-gap); color: var(--ink); font-size: var(--ko-size); font-weight: 900; letter-spacing: -.09375rem; line-height: 1.7; }
.block__ko::after { content: ''; display: block; inline-size: 3.75rem; block-size: .25rem; margin: 1rem auto 0; border-radius: .125rem; background-color: var(--brand); }

.block__title { margin-block-end: var(--head-gap); }
.block__title img { display: block; inline-size: auto; block-size: var(--title-h); margin-inline: auto; }
.block__pics { display: grid; gap: var(--pic-gap); }

.block__pics:has(> img:only-child) { padding-block-end: .4375rem; }
.block__pics img { inline-size: 100%; transition: scale 400ms ease, filter 400ms ease; }
.block__pics img:hover { scale: 1.01; filter: brightness(102%); }

[data-rise] { opacity: 0; translate: 0 2.5rem; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
[data-rise].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; translate: none; transition-duration: 0s; }
  .block__pics img, .block__pics img:hover { scale: none; transition-duration: 0s; }
}

.block--ask { background-color: var(--mist); }
.block--ask .block__en { color: rgb(51 51 51 / .4); }
.block--ask .block__en::before, .block--ask .block__en::after { opacity: .4; }
.block--ask .block__ko { color: var(--text); }
.block--ask .block__ko::after { background: var(--gilt); }

.ask {
  max-inline-size: 32.5rem; margin-inline: auto; padding: 3rem 2.25rem 2.5rem;
  border: 1px solid rgb(0 0 0 / .06); border-radius: 1.25rem; background-color: rgb(255 255 255 / .8);
  text-align: start;
}
.ask__field + .ask__field { margin-block-start: 1.125rem; }
.ask__cap { display: block; margin-block-end: .5rem; color: #888; font-size: .8125rem; }
.ask__input {
  inline-size: 100%; padding: 1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r-field); background-color: #fff; color: var(--text);
  font: .9375rem/normal 'Noto Sans KR', sans-serif;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow 200ms, border-color 200ms;
}
.ask__input::placeholder { color: #aaa; }
.ask__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 .1875rem rgb(var(--brand-rgb) / .15); }
.ask__input--pick { cursor: pointer; }

.ask__consent { margin-block-start: 1.5rem; }
.ask__consent-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ask__agree { display: flex; align-items: center; gap: .625rem; color: #555; font-size: .875rem; cursor: pointer; }
.ask__agree input { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--brand); cursor: pointer; }
.ask__more {
  flex: none; padding: .25rem .75rem; border: 1px solid #bbb; border-radius: 1.25rem; background-color: #fff;
  color: var(--muted); font-size: .75rem; white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s;
}
.ask__more:hover { border-color: rgb(136 136 136); color: #333; }
.ask__more[aria-expanded="true"] { border-color: var(--brand); background-color: var(--brand); color: #fff; }
.ask__terms {
  margin-block-start: .75rem; padding: 1rem 1.25rem;
  border: 1px solid rgb(0 0 0 / .08); border-radius: var(--r-field); background-color: rgb(0 0 0 / .04);
  color: #555; font-size: .8125rem; line-height: 1.9;
}
.ask__terms p + p { margin-block-start: .25rem; }
.trap { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.ask__send {
  display: block; inline-size: 100%; margin-block-start: 1.5rem; padding: 1.125rem;
  border: 0; border-radius: var(--r-field); background-color: var(--brand); color: #fff;
  font-size: 1.0625rem; font-weight: 700; cursor: pointer; transition: filter .2s;
}
.ask__send:hover { filter: brightness(.9); }
.ask__send:disabled { background-color: #666; cursor: not-allowed; }
.ask__note:empty { display: none; }
.ask__note { margin-block-start: 1rem; padding: .875rem; border-radius: var(--r-field); background-color: rgb(0 0 0 / .04); color: #555; font-size: .9375rem; font-weight: 500; text-align: center; }
.ask__note[data-tone="ok"] { background-color: rgb(39 174 96 / .15); color: #1e8449; }
.ask__note[data-tone="warn"] { background-color: rgb(239 68 68 / .12); color: #c0392b; }

.sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.25rem; }
.sheet[hidden] { display: none; }
.sheet__dim { position: fixed; inset: 0; background-color: rgb(0 0 0 / .7); }
.sheet__box {
  position: relative; display: flex; flex-direction: column; inline-size: 100%; max-inline-size: 30rem; max-block-size: 88vh;
  overflow: hidden; border-radius: .875rem; background-color: #fff; color: var(--text); box-shadow: 0 1.25rem 3.75rem rgb(0 0 0 / .4);
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.75rem; border-block-end: 1px solid #eee; }
.sheet__head h3 { font-size: 1.125rem; font-weight: 600; }
.sheet__x { padding: 0 .25rem; border: 0; background: none; color: #888; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.sheet__body { padding: 1.25rem 1.75rem; overflow-y: auto; }
.sheet__foot { display: flex; gap: .75rem; padding: 1.125rem 1.75rem calc(1.125rem + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid #eee; }
.sheet__ok, .sheet__no { flex: 1; padding: .875rem; border: 0; border-radius: var(--r-field); font-size: .9375rem; font-weight: 600; cursor: pointer; }
.sheet__ok { background-color: var(--brand); color: #fff; }
.sheet__ok:hover { opacity: .9; }
.sheet__no { background-color: var(--mist); color: #555; }
.sheet__no:hover { background-color: #ebebeb; }

.cal__bar { display: flex; align-items: center; justify-content: space-between; margin-block-end: .5rem; }
.cal__month { font-size: 1rem; font-weight: 600; color: var(--ink); }
.cal__nav { inline-size: 2.25rem; block-size: 2.25rem; border: 0; border-radius: 50%; background: none; color: #555; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cal__nav:hover:not(:disabled) { background-color: var(--mist); color: var(--brand); }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__week, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__week span { padding-block: .375rem; color: #888; font-size: .8125rem; text-align: center; }
.cal__week span:first-child { color: #c0392b; }
.cal__day { block-size: 2.75rem; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--text); font-size: .875rem; cursor: pointer; }
.cal__day:hover:not(:disabled) { border-color: var(--line); }
.cal__day:disabled { color: #ccc; cursor: default; }
.cal__day.is-today { border-color: var(--brand); }
.cal__day[aria-selected="true"] { border-color: var(--brand); background-color: var(--brand); color: #fff; }

.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-block-start: 1.125rem; }
.slots:empty { display: none; }
.slot { padding: .625rem .375rem; border: 1px solid rgb(238 238 238); border-radius: .5rem; background-color: #fafafa; color: #444; font-size: .8125rem; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.slot:hover { border-color: var(--brand); color: var(--brand); }
.slot[aria-selected="true"] { border-color: var(--brand); background-color: var(--brand); color: #fff; }
.slots__none { margin-block-start: .875rem; padding: .75rem; border-radius: .5rem; background-color: #f7f7f7; color: var(--muted); font-size: .8125rem; text-align: center; }

.dock { position: fixed; z-index: 50; transition: opacity .2s, visibility .2s; }
.dock__btn { display: flex; align-items: center; justify-content: center; background-color: var(--brand); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.dock__btn:hover { filter: brightness(.9); }
.dock__ico { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

html.is-typing .dock, html.is-form-active .dock { opacity: 0; visibility: hidden; pointer-events: none; }

.foot { padding: 2.5rem 1.5rem 1.75rem; background-color: #fff; color: #000; text-align: center; }
.foot__logo { inline-size: auto; max-block-size: 4.5rem; margin: 0 auto 1.4375rem; }
.foot__biz { margin-block-end: .75rem; font-size: .875rem; line-height: 1.6; }
.foot__fine { color: var(--muted); font-size: .75rem; line-height: 1.6; }

@media (min-width: 769px) {
  .gnb__item { line-height: 1.45; }   
  .dock { inset: auto 1.5rem 1.875rem auto; display: flex; flex-direction: column; gap: .875rem; }
  .dock__btn {
    flex-direction: column; gap: .3125rem; inline-size: 5.125rem; block-size: 5.125rem; border-radius: 50%;
    font-size: .875rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em;
    box-shadow: 0 .5rem 1.75rem rgb(0 0 0 / .25); transition: box-shadow 200ms, transform 200ms;
  }
  .dock__btn:hover { transform: translateY(-.1875rem) scale(1.06); box-shadow: 0 .75rem 2rem rgb(0 0 0 / .35); }
  .dock__ico { inline-size: 1.125rem; block-size: 1.125rem; stroke-width: 2.25; }
}

@media (max-width: 768px) {
  :root { --title-h: 4.5rem; --pad-y: 2.5rem; --gut: 1rem; --head-gap: 2.25rem; --pic-gap: .625rem; --ko-size: 2rem; --en-size: .75rem; --en-track: .25rem; --en-rule: 1.5rem; }

  .topbar__brand { margin-inline-start: 0; }
  .topbar__brand img { block-size: 3.5rem; }
  .topbar.is-stuck .topbar__brand img { block-size: 3.25rem; }
  .burger { display: flex; }
  .gnb {
    position: absolute; inset: calc(4rem + env(safe-area-inset-top, 0px)) 0 auto; display: none;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 1.25rem;
    border-radius: 0 0 1.125rem 1.125rem; background-color: rgb(255 255 255 / .82);
    -webkit-backdrop-filter: blur(1.125rem) saturate(1.8); backdrop-filter: blur(1.125rem) saturate(1.8);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 .75rem 2rem rgb(0 0 0 / .12);
  }
  .gnb.is-open { display: flex; }
  
  .gnb__item, .topbar.is-stuck .gnb__item { padding: .75rem 0; border-radius: 0 0 0 0; color: #333; text-align: center; text-shadow: none; }
  .gnb__item--ask, .topbar.is-stuck .gnb__item--ask { margin: .5rem 0 0; border-radius: 62rem; background-color: var(--brand); color: #fff; }

  .keyvisual { padding-inline: 0; }

  .block__pics { inline-size: 100vw; margin-inline: calc(50% - 50vw); }

  .ask { padding: 2rem 1.25rem 1.75rem; }
  .ask__consent-row { gap: .375rem; }
  .ask__agree { flex: 1 1 auto; min-inline-size: 0; gap: .375rem; font-size: .78125rem; line-height: 1.3; }
  .ask__more { padding: .25rem .5rem; border-radius: .875rem; font-size: .6875rem; }

  .sheet { padding: 0; }
  .sheet__box { max-inline-size: none; block-size: 100vh; max-block-size: 100vh; border-radius: 0; }
  .slots { grid-template-columns: repeat(3, 1fr); }

  .dock { inset: auto 0 0; display: flex; box-shadow: 0 -.375rem 1.125rem rgb(0 0 0 / .22); }
  .dock__btn { flex: 1; gap: .5rem; min-block-size: 3.75rem; padding: .5rem .375rem calc(.5rem + env(safe-area-inset-bottom, 0px)); font-size: 1rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
  .dock__ico { inline-size: 1.25rem; block-size: 1.25rem; stroke-width: 2.5; }
  .foot { padding-block-end: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}