/* Mobile artboard dimensions from the approved home and menu. */
html:has(.hs-head) { background: #f5f5f5; }
body:has(.hs-head) { width: min(100%, 390px); min-height: 100dvh; margin: 0 auto; background: #fff; }
.hs-status, .hs-head, .hs-home, .hs-menu, .hs-foot { box-sizing: border-box; width: 100%; background: #fff; color: var(--ink, #24251F); font-family: "Noto Sans KR", sans-serif; letter-spacing: 0; }
.hs-home *, .hs-menu *, .hs-foot *, .hs-head *, .hs-status * { box-sizing: border-box; }
.hs-status { height: 48px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; font: 600 14px/17px Inter, Arial, sans-serif; }
.hs-status img { width: 64px; height: 20px; }
.hs-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; border-bottom: 1px solid #dedcd4; }
.hs-logo { display: inline-flex; align-items: center; min-height: 44px; }
.hs-logo img { display: block; width: 128px; height: auto; }
.hs-toggle { display: grid; width: 44px; height: 44px; place-items: center; margin-right: -10px; }
.hs-home { display: grid; gap: 24px; padding: 20px 20px 32px; }
.hs-home h1, .hs-home h2, .hs-home h3, .hs-home p, .hs-menu p { margin: 0; letter-spacing: 0; }
.hs-intro { display: grid; gap: 7px; }
.hs-home .hs-intro h1 { letter-spacing: -.2px; font-size: 22px; font-weight: 700; line-height: 31px; color: var(--green, #245440); }
.hs-home .hs-intro p { letter-spacing: -.3px; font-size: 13px; line-height: 20px; color: #62675f; }
.hs-banner, .hs-banner img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; }
.hs-banner img { height: auto; object-fit: cover; }
.hs-find { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 0 16px; border-radius: 6px; background: var(--green, #245440); color: #fff; font-size: 16px; font-weight: 700; line-height: 23px; }
.hs-find > img:first-child { width: 22.635px; height: 29.659px; }
.hs-find > span { flex: 1; letter-spacing: -.2px; }
.hs-stories { display: grid; gap: 16px; min-width: 0; }
.hs-home .hs-stories h2 { letter-spacing: -.2px; color: var(--green, #245440); font-size: 18px; font-weight: 800; line-height: 26px; }
.hs-track { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hs-track::-webkit-scrollbar { display: none; }
.hs-story { flex: 0 0 min(240px, 100%); display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; }
.hs-story > img { width: 100%; aspect-ratio: 1; height: auto; border-radius: 6px; object-fit: cover; }
.hs-story h3 { color: var(--ink, #24251F); font-size: 18px; font-weight: 800; line-height: 26px; letter-spacing: -.3px; }
.hs-story p { color: #62675f; font-size: 12px; line-height: 19px; }
.hs-track:focus-within { outline: 1px solid var(--green, #245440); outline-offset: 3px; }
.hs-foot { display: grid; gap: 10px; padding: 22px 20px 26px; background: #edf3ee; color: #62675f; }
.hs-foot nav { display: grid; }
.hs-foot nav div { display: flex; gap: 8px; align-items: center; font-size: 11px; line-height: 20px; }
.hs-foot small { font-size: 10px; line-height: 15px; }

/* One mobile-first column. Extra viewport height belongs to the footer, inside this column. */
html > body[data-route="home"] {
  --home-gutter: 20px;
  --home-left: max(var(--home-gutter), env(safe-area-inset-left, 0px));
  --home-right: max(var(--home-gutter), env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  width: min(100%, 480px);
  min-height: 100vh;
  min-height: 100dvh;
}
body[data-route="home"] > main { flex: none; }
body[data-route="home"] .hs-home {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--home-block-gap, 22px);
  padding: var(--home-top, 20px) var(--home-right) var(--home-bottom, 30px) var(--home-left);
}
.hs-home .hs-story p { margin: 10px 0 0; }
body[data-route="home"] > .hs-foot {
  flex: 1 0 auto;
  align-content: start;
  gap: var(--home-footer-gap, 10px);
  padding: var(--home-footer-top, 24px) var(--home-right) calc(var(--home-footer-bottom, 30px) + env(safe-area-inset-bottom, 0px)) var(--home-left);
}
body[data-route="home"] .hs-foot nav div { flex-wrap: wrap; }
body[data-route="home"] .hs-foot nav a { font-size: var(--home-footer-link-size, 13px); line-height: 1.8; }
body[data-route="home"] .hs-foot small { font-size: var(--home-copyright-size, 12px); line-height: 1.45; }

@media (min-width: 480px) {
  html > body[data-route="home"] {
    --home-gutter: 24px;
    --home-block-gap: 27px;
    --home-top: 25px;
    --home-bottom: 36px;
    --home-footer-gap: 12px;
    --home-footer-top: 28px;
    --home-footer-bottom: 32px;
    --home-footer-link-size: 15px;
    --home-copyright-size: 13px;
  }
  .hs-home .hs-intro { gap: 9px; }
  .hs-home .hs-intro h1 { font-size: 27px; line-height: 1.4; }
  .hs-home .hs-intro p { font-size: 16px; line-height: 1.5; }
  .hs-home .hj-cta-home { height: 76px; min-height: 76px; gap: 12px; padding-inline: 20px; border-radius: 7px; font-size: 20px; }
  .hs-home .hj-cta-home img { width: 28px !important; height: 36px !important; }
  .hs-home .hj-cta-home b { font-size: 30px; }
  .hs-home .hs-stories { gap: 20px; }
  .hs-home .hs-stories h2, .hs-home .hs-story h3 { font-size: 22px; line-height: 1.45; }
  .hs-home .hs-track { gap: 15px; }
  .hs-home .hs-story { flex-basis: min(296px, 100%); gap: 12px; }
  .hs-home .hs-story p { margin-top: 12px; font-size: 15px; line-height: 1.6; }
}
@media (pointer: coarse) and (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  html > body[data-route="home"] { width: 100%; }
}

.hs-menu-viewport { overflow: clip; background: #f5f5f5; }
.hs-menu-panel { position: relative; min-height: 100dvh; background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .hs-menu-panel { animation: hs-menu-enter 280ms cubic-bezier(.22, .68, .15, 1) both; }
  @keyframes hs-menu-enter {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
}
.hs-menu { min-height: max(732px, calc(100dvh - 112px)); display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: 32px 20px 28px; }
.hs-menu nav { display: grid; gap: 36px; }
.hs-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 88px; padding: 16px 0; border-bottom: 1px solid #dedcd4; }
.hs-menu-row span { display: grid; gap: 7px; position: relative; top: 1px; }
.hs-menu-row strong { letter-spacing: -.5px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--green, #245440); }
.hs-menu-row small { letter-spacing: -.15px; font-size: 12px; line-height: 18px; color: #62675f; }
.hs-menu-row > img { flex: 0 0 20px; }
.hs-menu-more { display: grid; }
.hs-menu-more a { display: flex; align-items: center; min-height: 50px; color: #62675f; font-size: 16px; font-weight: 500; line-height: 23px; }
.hs-menu-foot { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid #dedcd4; color: #62675f; }
.hs-menu-foot strong { color: var(--green, #245440); font-size: 17px; line-height: 25px; font-weight: 700; }
.hs-menu-foot p { font-size: 13px; line-height: 20px; }
.hs-menu-foot small { font-size: 11px; line-height: 16px; }
.hs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }