:root {
color-scheme: light;
--paper: #fbf7f2;
--paper-2: #f3ece4;
--card: #ffffff;
--ink: #1e1814;
--ink-2: #5d544d;
--ink-3: #6f665f;
--line: rgb(30 24 20 / 0.14);
--sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
--gut: clamp(16px, 4vw, 48px);
--max: 1320px;
--sec: clamp(64px, 8vw, 112px);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--edge: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
::selection { background: var(--ink); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.sub { color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17px); margin-top: 8px; max-width: 42em; }
.print { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.h1, .h2, .hero-c h1 { font-weight: 700; letter-spacing: -0.05em; line-height: 1.08; }
.h1 { font-size: clamp(36px, 4.6vw, 64px); }
.h2 { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.045em; line-height: 1.15; }
:lang(en) :is(.h1, .h2, .hero-c h1) { letter-spacing: -0.035em; }
.lede { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; max-width: 34em; color: var(--ink-2); }
.cut-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 15px; padding: 13px 20px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); white-space: nowrap; transition: background 160ms, color 160ms, transform 120ms; }
.cut-btn:hover { background: var(--ink); color: #fff; }
.cut-btn:active { transform: translateY(1px); }
.cut-btn.is-ink { background: var(--ink); color: #fff; }
.cut-btn.is-ink:hover { background: #000; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hdr { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 14px var(--gut); background: rgb(255 255 255 / 0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.home .hdr { position: fixed; inset: 0 0 auto; }
.hdr-logo { display: block; color: var(--ink); }
.hdr-logo .logo { height: 21px; width: auto; display: block; }
.hdr-nav { display: flex; gap: 26px; margin-inline: auto; font-weight: 600; font-size: 15px; }
.hdr-nav a { text-decoration: none; padding: 4px 0; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1.5px no-repeat; transition: background-size 260ms var(--ease); }
.hdr-nav a:hover, .hdr-nav a[aria-current] { background-size: 100% 1.5px; }
.hdr-side { display: flex; align-items: center; gap: 16px; }
.hdr-lang a { font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.hdr-lang a:hover { color: var(--ink); }
.hdr .cut-btn { padding: 8px 15px; font-size: 14px; }
.hdr-menu { display: none; background: none; border: 1.5px solid var(--ink); font-weight: 700; font-size: 14px; padding: 7px 13px; cursor: pointer; }
@media (max-width: 860px) { .hdr-nav, .hdr-lang, .hdr-side .cut-btn { display: none; } .hdr-side { margin-left: auto; } .hdr-menu { display: block; } }
.menu { position: fixed; inset: 0; z-index: 40; background: var(--paper); overflow-y: auto; }
.menu-in { padding: 20px var(--gut) 40px; display: flex; flex-direction: column; gap: 28px; }
.menu-close { align-self: flex-end; background: var(--ink); color: #fff; border: 0; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.menu ul:first-of-type { border-top: 1.5px solid var(--ink); }
.menu ul:first-of-type a { display: flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 700; font-size: 28px; letter-spacing: -0.04em; padding: 16px 0; border-bottom: 1px solid var(--line); }
.menu ul:first-of-type a::before { content: ""; width: 14px; height: 14px; background: var(--c); flex: none; }
.menu-small { display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 600; }
.menu-small a { text-decoration: none; }
.hero-c { position: relative; height: 100vh; height: 100svh; min-height: 640px; background: var(--tint, #fbdcd3); overflow: hidden; transition: background 600ms var(--ease); }
.giants { position: absolute; right: -9vw; top: -4vh; width: min(64vw, 980px); aspect-ratio: 775 / 1100; }
.giant { position: absolute; inset: 0; transform: rotate(-8deg); transition: transform 700ms var(--ease), opacity 360ms; opacity: 0; pointer-events: none; }
.giant.is-on { opacity: 1; pointer-events: auto; }
.giant.is-out { transform: rotate(-14deg) translateY(110%); }
.giant.is-in { transform: rotate(-2deg) translateY(110%); }
.giant .pk { width: 100%; }
.giant .pk-face { filter: drop-shadow(0 30px 40px rgb(80 40 20 / 0.18)); }
.giant .pk-say { font-size: 20px; max-width: 340px; padding: 14px 18px; left: 30%; bottom: auto; top: 30%; }
.copy { position: absolute; left: var(--edge); bottom: clamp(36px, 7vh, 72px); width: min(560px, 44vw); z-index: 5; }
.hero-c h1 { font-size: clamp(42px, 5.4vw, 80px); }
.copy p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 28em; }
.picker { display: flex; gap: 10px; margin-top: 26px; }
.picker button { min-width: 66px; white-space: nowrap; padding: 6px 6px 5px; background: rgb(255 255 255 / 0.6); border: 1.5px solid transparent; cursor: pointer; display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 700; transition: background 160ms, border-color 160ms, transform 120ms; }
.picker button:hover { background: #fff; }
.picker button:active { transform: scale(0.96); }
.picker button img { width: 46px; }
.picker button[aria-pressed="true"] { border-color: var(--ink); background: #fff; }
.hint { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 760px) {
.giants { width: 96vw; right: -30vw; top: 7vh; }
.copy { width: auto; right: var(--gut); left: var(--gut); bottom: 24px; background: rgb(255 255 255 / 0.84); padding: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-c h1 { font-size: 34px; }
.copy p { font-size: 15px; margin-top: 12px; }
.picker { margin-top: 16px; }
}
.pk { position: relative; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; perspective: 1400px; }
.pk.is-drag { cursor: grabbing; }
.pk-flip { position: relative; transform-style: preserve-3d; }
.pk-face, .pk-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pk-face { position: relative; }
.pk-face img, .pk-back { width: 100%; height: auto; pointer-events: none; }
.pk-eyes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pk-eyes .pu circle { fill: #15110f; }
.pk-back { position: absolute; inset: 0; height: 100%; object-fit: contain; transform: rotateY(180deg); }
.pk-pop { position: absolute; left: 50%; bottom: 93%; transform-origin: 50% 100%; pointer-events: none; z-index: 6; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.15)); }
.pk-say { position: absolute; left: 50%; bottom: 100%; z-index: 7; width: max-content; max-width: min(240px, 60vw); margin-bottom: 8px; background: #fff; border: 1.5px solid var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; padding: 9px 12px; opacity: 0; transform: translate(-50%, 6px); transition: opacity 160ms, transform 240ms var(--ease); pointer-events: none; }
.pk-say:empty { display: none; }
.pk.is-talking .pk-say { opacity: 1; transform: translate(-50%, 0); }
.bubble { background: #fff; border: 1.5px solid var(--ink); padding: 10px 14px; font-weight: 700; font-size: 15px; width: fit-content; max-width: 100%; }
.sec { padding-top: var(--sec); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.sec-head > .sub, .sec-head > p { margin: 0; }
.cast { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--edge) 12px; scroll-padding-inline: var(--edge); scroll-snap-type: x mandatory; }
.cast::-webkit-scrollbar { display: none; }
.cc { flex: none; width: min(400px, 78vw); height: 520px; position: relative; overflow: hidden; background: var(--t); scroll-snap-align: start; }
.cc .pk { touch-action: pan-x pan-y; cursor: pointer; }
.cc .pk { position: absolute; width: 150%; left: -12%; top: -40%; transform: rotate(var(--r)); }
.cc .pk-say { display: none; }
.cc .tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; background: linear-gradient(transparent, var(--t) 28%); }
.cc .tx small { font-size: 13px; font-weight: 800; color: var(--k); }
.cc .tx a { display: block; font-size: 23px; font-weight: 700; letter-spacing: -0.04em; margin-top: 2px; text-decoration: none; }
.cc .tx a:hover { text-decoration: underline; }
.cc .tx q { display: block; margin-top: 8px; font-size: 15px; color: #3d342e; quotes: none; }
.cc .tx span { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgb(0 0 0 / 0.15); font-size: 13px; font-weight: 600; }
.zid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 30px; }
.zz { background: var(--card); padding: 26px; position: relative; border: 1.5px solid var(--ink); }
.zz b { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.zz strong { display: block; margin-top: 10px; font-size: 18px; }
.zz strong em { font-style: normal; font-weight: 600; color: var(--ink-3); font-size: 14px; margin-left: 6px; }
.zz p { margin-top: 6px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.zz img { position: absolute; right: 16px; top: -34px; width: 72px; transform: rotate(var(--r)); }
.zsum { margin-top: 18px; background: var(--ink); color: #fff; padding: 22px 26px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; line-height: 1.5; }
@media (max-width: 760px) { .zid { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.spec { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.spec th, .spec td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.spec th { width: 190px; font-weight: 700; white-space: nowrap; }
.spec th a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.spec th a::before { content: ""; width: 12px; height: 12px; background: var(--c); }
.spec th a:hover { text-decoration: underline; }
.spec td { color: var(--ink-2); font-size: 15px; }
.spec td.go { width: 1%; white-space: nowrap; text-align: right; }
.spec td.go a { font-weight: 700; color: var(--ink); text-decoration: none; }
.spec-more { margin-top: 20px; }
@media (max-width: 640px) { .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; } .spec th { width: auto; padding-bottom: 2px; border-bottom: 0; } .spec td.go { text-align: left; padding-top: 0; } }
.friends { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; align-items: end; }
.friends a { display: grid; justify-items: center; gap: 10px; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.friends a:hover span { text-decoration: underline; }
.friends img { height: 170px; width: auto; object-fit: contain; filter: drop-shadow(0 18px 18px rgb(0 0 0 / 0.12)); transition: transform 300ms var(--ease); }
.friends a:hover img { transform: translateY(-6px) rotate(-2deg); }
.friends em { font-style: normal; font-size: 11px; background: var(--ink); color: #fff; padding: 2px 7px; }
@media (max-width: 860px) { .friends { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; } .friends img { height: 130px; } }
.photo { position: relative; margin-top: var(--sec); }
.photo img { width: 100%; height: min(78vh, 760px); object-fit: cover; object-position: 50% 35%; }
.photo p { position: absolute; left: var(--edge); bottom: 40px; font-size: clamp(30px, 4vw, 52px); font-weight: 700; letter-spacing: -0.05em; line-height: 1.15; }
.ledger { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; margin-top: var(--sec); padding-block: 16px; border-top: 1.5px solid var(--ink); font-weight: 600; font-size: 15px; }
.ledger b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin-right: 8px; font-variant-numeric: tabular-nums; }
.channels { padding-block: 20px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); overflow: hidden; }
.channels-k { margin-bottom: 12px; }
.marquee ul { display: flex; width: max-content; gap: 40px; align-items: center; animation: roll 55s linear infinite; }
.marquee:hover ul { animation-play-state: paused; }
.marquee li { flex: none; display: flex; align-items: center; gap: 9px; height: 40px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.marquee .ic { width: 24px; height: 24px; }
.marquee .wm { width: auto; }
.marquee .ini { display: grid; place-items: center; width: 24px; height: 24px; background: var(--ink); color: #fff; font-size: 12px; }
.ch-self { height: 17px; width: auto; color: var(--ink); }
@keyframes roll { to { transform: translateX(calc(-50% - 20px)); } }
@media (prefers-reduced-motion: reduce) { .marquee ul { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--gut); } .marquee li[aria-hidden] { display: none; } }
.ftr { padding: clamp(44px, 6vw, 72px) var(--gut) 24px; }
main + .ftr { border-top: 1.5px solid var(--ink); margin-top: var(--sec); }
.home main + .ftr { border-top: 0; margin-top: 0; }
.ftr-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
.ftr-logo { width: min(240px, 60vw); height: auto; color: var(--ink); }
.ftr-brand p { font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.04em; margin-top: 14px; }
.ftr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-weight: 600; }
.ftr-cols li + li { margin-top: 8px; }
.ftr-cols a { text-decoration: none; }
.ftr-cols a:hover { text-decoration: underline; }
.ftr-base { max-width: var(--max); margin: 40px auto 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.ftr-base a { margin-left: 12px; }
@media (max-width: 760px) { .ftr-in { grid-template-columns: minmax(0, 1fr); } }
.crumbs { padding-top: 18px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.item { display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--ink); }
.item-fig { position: relative; height: 240px; display: grid; place-items: center; padding: 26px 18px 10px; background: color-mix(in oklab, var(--c) 30%, var(--card)); overflow: hidden; }
.item-fig > img { max-height: 200px; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 12px 14px rgb(30 24 20 / 0.16)); transition: transform 300ms var(--ease); }
.item:hover .item-fig > img { transform: translateY(-6px) rotate(-2deg); }
.item-fig .pk { width: 62%; }
.item-tx { padding: 14px 16px 16px; border-top: 1.5px solid var(--ink); display: flex; flex-direction: column; gap: 4px; flex: 1; text-decoration: none; }
.item-tx b { font-size: 16px; font-weight: 700; line-height: 1.3; }
.item-tx span { font-size: 13px; color: var(--ink-2); }
.item-tx:hover b { text-decoration: underline; }
.item-soon { position: absolute; top: 12px; left: 12px; background: var(--ink); padding: 3px 8px; }
.item-soon.print { color: #fff; font-size: 12px; }
.shelf-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 18px; }
.doc-head { padding-block: clamp(28px, 4vw, 52px) 8px; }
.doc-head .lede { margin-top: 14px; }
.doc-head .lede a { font-weight: 700; color: var(--ink); }
.prod-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: 24px; }
.prod-pack { position: relative; background: color-mix(in oklab, var(--c) 34%, var(--paper)); padding: clamp(28px, 5vw, 60px); display: grid; place-items: center; overflow: hidden; }
.prod-pack > img { width: min(360px, 100%); transform: rotate(-4deg); filter: drop-shadow(0 22px 28px rgb(80 40 20 / 0.2)); }
.prod-pack .pk { width: min(360px, 100%); transform: rotate(-4deg); }
.prod-pack .pk-face { filter: drop-shadow(0 22px 28px rgb(80 40 20 / 0.2)); }
.tag { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 14px; }
.tag::before { content: ""; width: 12px; height: 12px; background: var(--c); }
a.tag:hover { text-decoration: underline; }
.prod-intro .h1 { font-size: clamp(32px, 4vw, 54px); }
.prod-intro .lede { margin-top: 16px; }
.prod-intro .bubble { margin-top: 18px; }
.facts { display: flex; flex-wrap: wrap; margin-top: 20px; border: 1.5px solid var(--ink); width: fit-content; background: var(--card); }
.facts li { font-size: 14px; font-weight: 600; padding: 8px 14px; }
.facts li + li { border-left: 1px solid var(--line); }
@media (max-width: 860px) { .prod-hero { grid-template-columns: minmax(0, 1fr); } }
.prod-photos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; padding-top: var(--sec); align-items: start; }
.prod-photos figure { background: var(--card); border: 1.5px solid var(--ink); }
.prod-photos img { width: 100%; object-fit: cover; }
.prod-wear img { aspect-ratio: 1; }
.prod-back { display: flex; flex-direction: column; background: color-mix(in oklab, var(--c) 18%, var(--card)) !important; }
.prod-back a { display: block; padding: 14px; }
.prod-back img { object-fit: contain; }
.prod-back figcaption { font-weight: 600; font-size: 14px; color: var(--ink-2); padding: 12px 16px 16px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .prod-photos { grid-template-columns: minmax(0, 1fr); } }
.prod-sec { padding-top: var(--sec); }
.prod-sec > .h2 { margin-bottom: 22px; }
.prod-sec > .sub { margin: -12px 0 22px; }
.actives { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); border-top: 1.5px solid var(--ink); }
.actives li { border-bottom: 1px solid var(--line); }
.actives a, .actives-one { display: block; padding: 18px 18px 18px 0; text-decoration: none; }
.actives b, .actives-one b { display: block; font-size: 18px; font-weight: 700; }
.actives span, .actives-one span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.actives a:hover b { text-decoration: underline; }
.results { margin-top: var(--sec); padding-block: var(--sec); background: color-mix(in oklab, var(--c) 22%, var(--paper)); }
.results-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.result { display: flex; flex-direction: column; margin-top: 18px; }
.result b { font-weight: 800; font-size: clamp(52px, 6vw, 88px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.result span { font-weight: 600; font-size: 17px; max-width: 22em; }
.results .small { margin-top: 20px; max-width: 34em; }
@media (max-width: 860px) { .results-in { grid-template-columns: minmax(0, 1fr); } }
.howto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); border-top: 1.5px solid var(--ink); }
.howto li { padding: 18px 18px 22px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; }
.howto b { font-weight: 800; font-size: 26px; line-height: 1; min-width: 1.2em; }
.prod-sec .bubble { margin-top: 18px; }
.ba-fig figcaption { font-size: 14px; font-weight: 600; margin-top: 10px; }
.ba { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--paper-2); border: 1.5px solid var(--ink); }
.ba > img, .ba-before img { width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); background: #fff; border: 1.5px solid var(--ink); }
.ba-lab { position: absolute; top: 12px; left: 12px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; pointer-events: none; }
.ba-lab-r { left: auto; right: 12px; }
.ba:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.zoom { margin: auto; border: 0; padding: 0; background: transparent; max-width: min(92vw, 820px); max-height: 92dvh; }
.zoom::backdrop { background: rgb(30 24 20 / 0.72); }
.zoom img { display: block; width: 100%; height: auto; max-height: 84dvh; object-fit: contain; }
.zoom button { display: block; margin: 12px 0 0 auto; background: #fff; border: 1.5px solid var(--ink); padding: 9px 16px; font-weight: 700; cursor: pointer; }
.stores { display: grid; gap: 24px; }
.store-region :is(h2, h3) { margin-bottom: 10px; font-size: 14px; color: var(--ink-3); }
.store-region ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.store-region a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 16px 18px; text-decoration: none; background: var(--card); border: 1.5px solid var(--ink); transition: background 160ms; }
.store-region a:hover { background: var(--paper-2); }
.store-region a.is-main { background: var(--ink); color: #fff; }
.store-region b { font-size: 17px; font-weight: 700; }
.store-region small { grid-column: 1; font-size: 13px; opacity: 0.8; }
.store-region span { grid-row: 1 / 3; grid-column: 2; }
.zone-hero { background: color-mix(in oklab, var(--c) 30%, var(--paper)); padding-bottom: clamp(32px, 5vw, 64px); }
.zone-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; padding-top: 24px; }
.zone-hero .h1 { margin-top: 10px; }
.zone-hero .lede { margin-top: 16px; }
.zone-hero figure img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border: 1.5px solid var(--ink); }
@media (max-width: 760px) { .zone-hero-in { grid-template-columns: minmax(0, 1fr); } .zone-hero figure img { aspect-ratio: 1; } }
.zone-body { padding-top: var(--sec); display: grid; gap: 16px; font-size: 18px; }
.zone-body p { max-width: 44em; }
.qa details:first-of-type { border-top: 1.5px solid var(--ink); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 18px; font-weight: 700; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 24px; line-height: 1; font-weight: 500; transition: transform 240ms var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { padding: 0 0 20px; max-width: 46em; color: var(--ink-2); }
.next { display: grid; gap: 4px; margin-top: var(--sec); background: color-mix(in oklab, var(--c) 34%, var(--paper)); padding: clamp(24px, 4vw, 40px); text-decoration: none; transition: transform 240ms var(--ease); }
.next:hover { transform: translateY(-4px); }
.next span { font-weight: 700; font-size: 14px; }
.next b { font-weight: 700; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.05em; line-height: 1.05; }
.next em { font-style: normal; color: var(--ink-2); }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.zone-grid a { display: flex; flex-direction: column; gap: 6px; background: color-mix(in oklab, var(--c) 34%, var(--paper)); padding: 10px 10px 16px; text-decoration: none; transition: transform 240ms var(--ease); }
.zone-grid a:hover { transform: translateY(-4px); }
.zone-grid img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.zone-grid span { font-size: 14px; color: var(--ink-2); padding-inline: 4px; }
.zone-grid b { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; padding-inline: 4px; }
.shelf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px 40px; align-items: start; }
.shelf > div:first-child { position: sticky; top: 90px; }
.shelf .h2 a { text-decoration: none; }
.shelf .h2 a:hover { text-decoration: underline; }
@media (max-width: 760px) { .shelf { grid-template-columns: minmax(0, 1fr); } .shelf > div:first-child { position: static; } .shelf-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dict { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); border-top: 1.5px solid var(--ink); }
.dict li { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.dict li:target { background: var(--paper-2); }
.dict h2 { font-weight: 700; font-size: 24px; letter-spacing: -0.04em; }
.dict p { margin-top: 6px; color: var(--ink-2); }
.dict-in { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px !important; }
.dict-in a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
.dict-in a::before { content: ""; width: 9px; height: 9px; background: var(--c); }
.dict-in a:hover { text-decoration: underline; }
.dict-in img { display: none; }
.nots { border-top: 1.5px solid var(--ink); max-width: 52em; }
.nots li { padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.about-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2vw, 24px); padding-top: var(--sec); }
.about-row img { width: min(170px, 18vw); filter: drop-shadow(0 14px 18px rgb(30 24 20 / 0.16)); }
.about-row img:nth-child(odd) { transform: rotate(-4deg); }
.about-row img:nth-child(even) { transform: rotate(4deg) translateY(-12px); }
.about-name .name-pair { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 16px; }
.about-name .name-pair span[lang="ko"] { color: var(--ink-2); }
.nf img { width: 90px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
:root { --waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 C 40 6 80 6 120 30 S 200 54 240 30' fill='none' stroke='white' stroke-opacity='.32' stroke-width='1.6'/%3E%3C/svg%3E"); }
.cc::before { content: ""; position: absolute; inset: 0; background: var(--waves) 0 0 / 240px 34px repeat; transform: rotate(-12deg) scale(1.6); pointer-events: none; }
.cc::before { z-index: 0; transform: rotate(18deg) scale(1.8); }
.cc .pk, .cc .tx { z-index: 1; }
.zidp-sec { position: relative; overflow: hidden; margin-top: var(--sec); padding-block: var(--sec); background: #fdeef1; }
.zidp-sec .aura { opacity: 1; }
.zidp-sec > .wrap { position: relative; }
.zidp-mark { font-size: clamp(72px, 11vw, 168px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; color: #e85d82; margin-top: 10px; }
.zidp-mark sup { font-size: 0.24em; vertical-align: top; position: relative; top: 0.5em; margin-left: 4px; }
.zidp-line { font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.04em; margin-top: 10px; }
.zidp { position: relative; height: 1300px; margin-top: 30px; }
.zidp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.zidp-svg .base { fill: none; stroke: #ebc0cb; stroke-width: 2.5; stroke-dasharray: 1 10; stroke-linecap: round; }
.zidp-svg .prog { fill: none; stroke: #e85d82; stroke-width: 4; stroke-linecap: round; }
.zidp-dot { position: absolute; left: 0; top: 0; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #e85d82; box-shadow: 0 0 0 7px rgb(232 93 130 / 0.2); pointer-events: none; }
.zidp-step { position: absolute; display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.zidp-step .node { flex: none; width: clamp(80px, 8.4vw, 120px); height: clamp(80px, 8.4vw, 120px); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -14px rgb(160 60 90 / 0.45); font-weight: 800; font-size: clamp(38px, 4vw, 56px); color: #e85d82; transform: scale(0.3) rotate(-40deg); opacity: 0; transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms; }
.zidp-step .node b { transform: rotate(calc(var(--r) * -1)); }
.zidp-step.on .node { transform: scale(1) rotate(var(--r)); opacity: 1; }
.zidp-step .words { opacity: 0; transform: translateX(-16px); transition: opacity 600ms var(--ease) 120ms, transform 700ms var(--ease) 120ms; }
.zidp-step.on .words { opacity: 1; transform: none; }
.zidp-step .pre { display: block; font-size: clamp(15px, 1.4vw, 21px); font-weight: 700; color: var(--ink-2); }
.zidp-step .big { display: block; white-space: nowrap; font-size: clamp(42px, 6.4vw, 108px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
.zidp-step .big em { font-style: normal; color: #e85d82; }
.zidp-step:last-of-type .big { font-size: clamp(32px, 4.6vw, 78px); }
.zidp-sec .zsum { margin-top: 10px; }
@media (max-width: 760px) { .zidp { height: 1100px; } .zidp-step .big { white-space: normal; font-size: 40px; } }
@media (prefers-reduced-motion: reduce) { .zidp-step .node, .zidp-step .words { opacity: 1; transform: none; } .zidp-dot { display: none; } }
.cast { perspective: 1600px; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-inline: calc(50vw - min(200px, 39vw)); scroll-padding-inline: calc(50vw - min(200px, 39vw)); gap: 0; padding-block: 20px 30px; }
.cc { scroll-snap-align: center; transform-style: preserve-3d; transition: transform 500ms var(--ease), filter 500ms; will-change: transform; margin-inline: -24px; box-shadow: 0 30px 50px -30px rgb(60 30 20 / 0.45); }
.cc::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40%; background: linear-gradient(var(--t), transparent); transform: scaleY(-1); opacity: 0.25; pointer-events: none; }
.cast-ctl { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.cast-ctl button { width: 44px; height: 44px; border: 1.5px solid var(--ink); background: #fff; font-size: 18px; font-weight: 800; cursor: pointer; }
.cast-ctl button:hover { background: var(--ink); color: #fff; }
.textures { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.textures img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.textures figcaption { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 760px) { .textures { grid-template-columns: 1fr; } }
.aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aura svg { position: absolute; inset: -6%; width: 112%; height: 112%; }
.aura::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 255 255 / 0.55) 1px, transparent 1.6px) 0 0 / 6px 6px; -webkit-mask-image: linear-gradient(115deg, transparent 10%, #000 45%, transparent 70%, #000 92%); mask-image: linear-gradient(115deg, transparent 10%, #000 45%, transparent 70%, #000 92%); }
.aura-dark::after { background-image: radial-gradient(circle, rgb(255 255 255 / 0.16) 1px, transparent 1.6px); }
.hero-c .aura { z-index: 0; }
.ch { position: relative; overflow: hidden; padding-block: var(--sec); }
.ch > .wrap { position: relative; z-index: 1; }
.kick { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 18px; display: flex; gap: 10px; align-items: baseline; }
.kick span { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.ch-days { background: #fdf3ea; }
.days { counter-reset: d; border-top: 1.5px solid var(--ink); }
.days li { counter-increment: d; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line); font-size: clamp(20px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; }
.days li::before { content: "0" counter(d); font-size: 14px; font-weight: 700; color: var(--ink-3); padding-top: 0.6em; font-variant-numeric: tabular-nums; }
.pull { margin-top: clamp(32px, 4vw, 52px); max-width: 22em; font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.2; }
.zcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zcards figure { position: relative; overflow: hidden; background: var(--paper-2); }
.zcards img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 600ms var(--ease); }
.zcards figure:hover img { transform: scale(1.04); }
.zcards figcaption { position: absolute; inset: auto 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgb(20 14 10 / 0.62)); color: #fff; font-size: 14px; font-weight: 600; display: grid; gap: 2px; }
.zcards figcaption b { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.03em; }
@media (max-width: 860px) { .zcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ch-ways { background: #eef6fc; padding-block: clamp(56px, 7vw, 96px); }
.ways { font-size: clamp(34px, 6.4vw, 96px); font-weight: 800; letter-spacing: -0.055em; line-height: 1.05; }
.ways span { display: inline-block; }
.ways span:nth-child(odd) { color: #2c5d86; }
.ways i { font-style: normal; color: var(--ink-3); }
.ch-easy { padding-bottom: 0; }
.easy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.half { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 40px); min-height: 420px; display: flex; flex-direction: column; }
.half > :not(.aura) { position: relative; z-index: 1; }
.half-am { background: #fff7dc; }
.half-pm { background: #1d2140; color: #fff; }
.half-pm .kick { color: rgb(255 255 255 / 0.7); }
.half .big { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.15; }
.minis { display: flex; gap: 14px; margin-top: auto; padding-top: 28px; }
.mini { flex: 1 1 0; min-width: 0; display: grid; gap: 10px; text-decoration: none; background: rgb(255 255 255 / 0.75); color: var(--ink); padding: 14px; }
.mini img { height: 150px; width: auto; justify-self: center; filter: drop-shadow(0 12px 14px rgb(0 0 0 / 0.14)); transition: transform 300ms var(--ease); }
.mini:hover img { transform: translateY(-5px) rotate(-2deg); }
.mini b { display: block; font-size: 15px; letter-spacing: -0.02em; }
.mini small { font-size: 13px; color: var(--ink-2); }
@media (max-width: 860px) { .easy { grid-template-columns: minmax(0, 1fr); } .half { min-height: 0; } .mini img { height: 110px; } }
.ch-name { margin-top: var(--sec); background: #fdf0ef; }
.name-big { display: grid; gap: 4px; font-size: clamp(40px, 7vw, 108px); font-weight: 800; letter-spacing: -0.06em; line-height: 1.02; margin-bottom: 26px; }
.name-big span[lang="en"] { color: #e2614c; }
.name-end { margin-top: 28px; font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.3; }
.ch-mani-head { background: #fdf0ea; padding-block: clamp(40px, 6vw, 80px) clamp(64px, 9vw, 120px); }
.ch-mani-head .h1 { margin-top: 18px; font-size: clamp(40px, 6vw, 88px); max-width: 12em; }
.mani { max-width: 860px; padding-block: var(--sec) 0; }
.mani-part { padding-block: 28px; border-top: 1.5px solid var(--ink); }
.mani-part > p:last-child { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.85; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .zcards img, .mini img { transition: none; } }
.zidp-step .big { overflow-wrap: normal; }
@media (max-width: 760px) { .zidp-step .big { font-size: clamp(28px, 8.4vw, 40px); } }
.hero-z { position: relative; height: 100vh; height: 100svh; min-height: 680px; overflow: hidden; background: var(--tint); transition: background 600ms var(--ease); isolation: isolate; }
.aura-hero .pp { fill: var(--pop); opacity: 0.85; transition: fill 600ms var(--ease); }
.aura-hero .pw { fill: #fff; opacity: 0.7; }
.aura-hero::after { background-image: radial-gradient(circle, rgb(255 255 255 / 0.7) 1.1px, transparent 1.8px); background-size: 7px 7px; }
.hz-copy { position: absolute; z-index: 5; left: var(--edge); top: 50%; transform: translateY(-46%); width: min(520px, 40vw); }
.hz-tag { display: inline-block; font-size: 13px; font-weight: 700; padding: 5px 10px; background: rgb(255 255 255 / 0.7); margin-bottom: 18px; }
.hero-z h1 { font-size: clamp(42px, 5vw, 76px); font-weight: 800; letter-spacing: -0.055em; line-height: 1.06; }
:lang(en) .hero-z h1 { letter-spacing: -0.04em; }
.hz-copy > p:not(.hz-tag) { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 26em; }
.hero-z .giants { right: auto; left: 55%; top: 50%; width: auto; height: min(74vh, 760px); aspect-ratio: 775 / 1100; transform: translate(-30%, -52%); }
.hero-z .giant { transform: rotate(-6deg); }
.hero-z .giant.is-out { transform: rotate(-12deg) translateY(120%); }
.hero-z .giant.is-in { transform: rotate(0deg) translateY(120%); }
.hero-z .giant .pk-say { left: 12%; top: 34%; }
.co { position: absolute; display: flex; align-items: center; gap: 12px; z-index: 3; transform: rotate(6deg); }
.co p { background: #fff; padding: 10px 14px; font-size: 14px; font-weight: 600; line-height: 1.4; box-shadow: 0 10px 30px rgb(60 30 20 / 0.12); white-space: nowrap; }
.co b { display: block; font-size: 12px; font-weight: 800; color: var(--pop-ink, #e2614c); letter-spacing: 0.01em; }
.plus { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 0.9); box-shadow: 0 0 0 6px rgb(255 255 255 / 0.35); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 3px; background: #e2614c; transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.co-z { left: -22%; top: 16%; }
.co-i { right: -38%; top: 46%; flex-direction: row-reverse; }
.co-d { left: -10%; bottom: 8%; }
.giant.is-on .co { animation: co-in 700ms var(--ease) both; }
.giant.is-on .co-i { animation-delay: 90ms; }
.giant.is-on .co-d { animation-delay: 180ms; }
@keyframes co-in { from { opacity: 0; translate: 0 12px; } }
.hz-line { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(18px, 4vh, 40px); text-align: center; color: #fff; font-weight: 800; font-size: clamp(26px, 4vw, 60px); letter-spacing: -0.045em; text-shadow: 0 2px 30px rgb(0 0 0 / 0.08); pointer-events: none; }
.hz-hint { position: absolute; z-index: 5; right: var(--edge); top: 92px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 1100px) {
.hero-z { height: auto; min-height: 0; padding: 88px var(--gut) 0; display: flex; flex-direction: column; }
.hz-copy { position: relative; left: auto; top: auto; transform: none; width: auto; }
.hero-z h1 { font-size: 36px; }
.hz-copy > p:not(.hz-tag) { font-size: 15px; }
.hero-z .giants { position: relative; left: auto; top: auto; transform: none; height: auto; width: 62vw; margin: 48px auto 110px; }
.co p { font-size: 12px; padding: 7px 10px; }
.co b { font-size: 10px; }
.plus { width: 30px; height: 30px; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.35); }
.plus::before, .plus::after { width: 11px; height: 2px; }
.co-z { left: -24%; top: 8%; }
.co-i { right: -30%; top: 50%; }
.co-d { left: -20%; bottom: -6%; }
.hz-line { font-size: 22px; bottom: 18px; }
.hz-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .giant.is-on .co { animation: none; } }
.zcards .pin { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); z-index: 2; }
.zcards .pin::before, .zcards .pin::after { width: 12px; height: 2.5px; }
.zcards .pin { animation: pin 2.6s var(--ease) infinite; }
@keyframes pin { 0%, 100% { box-shadow: 0 0 0 4px rgb(255 255 255 / 0.4); } 50% { box-shadow: 0 0 0 12px rgb(255 255 255 / 0); } }
.kick::before { content: ""; flex: none; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--k, #e85d82); box-shadow: 0 0 0 4px rgb(232 93 130 / 0.18); }
.half-pm .kick::before { background: #9fb4ff; box-shadow: 0 0 0 4px rgb(159 180 255 / 0.2); }
.trail { height: clamp(70px, 8vw, 120px); margin-top: 24px; position: relative; z-index: 0; pointer-events: none; }
.trail svg { width: 100%; height: 100%; overflow: visible; }
.trail path { fill: none; stroke: #e85d82; stroke-width: 2; stroke-linecap: round; }
.days li { transition: color 200ms; }
.days li:hover { color: #e2614c; }
.zsum { position: relative; }
.ch-ways .ways span { position: relative; }
.ch-ways .ways span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.1em; background: currentColor; opacity: 0.15; border-radius: 99px; }
@media (prefers-reduced-motion: reduce) { .zcards .pin { animation: none; } }
.half-pm .mini { background: rgb(255 255 255 / 0.08); color: #fff; outline: 1px solid rgb(255 255 255 / 0.14); }
.half-pm .mini small { color: rgb(255 255 255 / 0.7); }
:root { --r-btn: 999px; --r-card: 22px; --r-sm: 14px; }
.cut-btn, .cast-ctl button, .hz-tag, .hdr-menu, .menu-close { border-radius: var(--r-btn); }
.cut-btn { padding: 13px 24px; }
.picker button { border-radius: var(--r-sm); }
.co p { border-radius: var(--r-sm); }
.zcards figure, .easy3 figure, .zsum { border-radius: var(--r-card); }
.zsum { padding: 24px 28px; }
.cast-ctl button { width: 48px; height: 48px; border: 0; background: #fff; box-shadow: 0 8px 24px -10px rgb(120 60 50 / 0.4); }
.cast-ctl button:hover { background: var(--ink); color: #fff; }
.ch, .ch-days, .ch-ways, .ch-name, .ch-mani-head, .zidp-sec { background: transparent; overflow: visible; }
.ch .aura, .zidp-sec .aura { inset: -18% 0; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.hero-z::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(transparent, var(--paper)); z-index: 1; pointer-events: none; }
.hz-line { z-index: 2; color: rgb(255 255 255 / 0.9); }
main, body { background: var(--paper); }
.ch-ways .ways span:nth-child(odd) { color: #d0577f; }
.cc::before, .cc::after { content: none; }
.cast { padding-block: 24px 36px; }
.cc { width: min(340px, 76vw); height: auto; border-radius: var(--r-card); background: color-mix(in srgb, var(--c) 26%, #fff); overflow: hidden; display: flex; flex-direction: column; margin-inline: -18px; box-shadow: 0 30px 50px -34px rgb(90 40 30 / 0.5); }
.cc-fig { position: relative; height: 330px; display: grid; place-items: center; padding: 26px 26px 10px; background: radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--c) 55%, #fff), transparent 70%); }
.cc-fig > img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 16px 18px rgb(80 40 30 / 0.18)); }
.cc .cc-fig .pk { position: relative; width: auto; height: 100%; left: auto; top: auto; aspect-ratio: 775 / 1100; transform: rotate(-3deg); }
.cc .tx { position: static; background: none; padding: 16px 22px 22px; }
.cc .tx small { color: color-mix(in srgb, var(--c) 45%, #3a2a22); }
.cc .tx a { font-size: 21px; }
.cc .tx p { margin-top: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.easy3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.easy3 figure { position: relative; overflow: hidden; }
.easy3 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.easy3 figcaption { position: absolute; left: 14px; bottom: 14px; background: rgb(255 255 255 / 0.92); padding: 8px 14px; border-radius: var(--r-btn); font-weight: 700; font-size: 15px; }
@media (max-width: 760px) { .easy3 { grid-template-columns: minmax(0, 1fr); } .cc-fig { height: 280px; } }
.cc .cc-fig .pk { position: relative; width: 58%; height: auto; aspect-ratio: auto; left: auto; top: auto; transform: rotate(-3deg); }
.cc .cc-fig { overflow: hidden; }
.cc-fig > img { max-width: 86%; max-height: 92%; height: auto; }
.cc-fig > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
@media (max-width: 760px) { .sec-head { flex-direction: column; align-items: flex-start; } }
.cc-fig > img { position: absolute; left: 24px; top: 24px; width: calc(100% - 48px); height: calc(100% - 34px); }
.mood { --a: #f6b08a; --b: #fde9dc; background: var(--b); transition: background 1.2s var(--ease); }
.m-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.m-bg svg { position: absolute; inset: -8%; width: 116%; height: 116%; }
.m-bg .ma, .m-bg .ma2 { fill: var(--a); transition: fill 1.2s var(--ease); }
.m-bg .ma2 { opacity: 0.75; }
.m-bg .mw { fill: #fff; opacity: 0.6; }
.m-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 255 255 / 0.6) 1.1px, transparent 1.8px) 0 0 / 7px 7px; -webkit-mask-image: radial-gradient(120% 90% at 70% 60%, #000 20%, transparent 75%); mask-image: radial-gradient(120% 90% at 70% 60%, #000 20%, transparent 75%); }
.mood main { position: relative; z-index: 1; }
.mood .ftr { position: relative; z-index: 1; background: var(--paper); }
.m-sc { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 96px var(--gut); overflow: hidden; }
.m-giant, .m-big, .m-word, .m-castw, .m-ko { font-weight: 800; letter-spacing: -0.06em; line-height: 1.02; }
:lang(en) :is(.m-giant, .m-big, .m-word, .m-castw) { letter-spacing: -0.045em; }
.m-open { place-items: center start; padding-left: var(--edge); }
.m-giant { position: relative; z-index: 3; font-size: clamp(56px, 10vw, 168px); }
.m-hero-ph { position: absolute; right: 6vw; top: 50%; width: min(36vw, 520px); aspect-ratio: 3 / 4; transform: translateY(-48%) rotate(4deg); border-radius: 40px; overflow: hidden; box-shadow: 0 50px 80px -40px rgb(120 50 30 / 0.5); z-index: 1; }
.m-hero-ph img { width: 100%; height: 100%; object-fit: cover; }
.m-peek { position: absolute; width: clamp(110px, 12vw, 190px); z-index: 2; }
.m-peek .pk-say { display: none; }
.m-peek-0 { left: 4vw; bottom: -40px; }
.m-peek-1 { right: 40vw; top: 12vh; width: clamp(90px, 9vw, 150px); }
.m-peek-2 { right: 3vw; bottom: -30px; }
.m-peek-3 { left: 38vw; bottom: 6vh; width: clamp(80px, 8vw, 130px); }
.m-scroll { position: absolute; left: 50%; bottom: 22px; font-size: 22px; font-weight: 800; animation: m-bob 1.8s var(--ease) infinite; }
@keyframes m-bob { 50% { transform: translateY(8px); } }
.m-pin { position: relative; height: calc(var(--n, 3) * 100svh); }
.m-stick { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 80px var(--gut); }
.m-line { grid-area: 1 / 1; text-align: center; font-weight: 800; letter-spacing: -0.055em; line-height: 1.12; font-size: clamp(34px, 6vw, 96px); opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(10px); transition: opacity 700ms var(--ease), transform 900ms var(--ease), filter 700ms var(--ease); }
[data-at="0"] .m-line[data-i="0"], [data-at="1"] .m-line[data-i="1"], [data-at="2"] .m-line[data-i="2"] { opacity: 1; transform: none; filter: none; }
.m-count { position: absolute; bottom: 40px; display: flex; gap: 8px; }
.m-count i { width: 26px; height: 4px; border-radius: 4px; background: rgb(30 24 20 / 0.18); transition: background 400ms; }
[data-at="0"] .m-count i[data-i="0"], [data-at="1"] .m-count i:is([data-i="0"], [data-i="1"]), [data-at="2"] .m-count i { background: var(--ink); }
.m-turn { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 5vw; padding-inline: var(--edge); }
.m-turn .m-big { font-size: clamp(36px, 5.4vw, 88px); }
.m-turn-ph { border-radius: 999px 999px 40px 40px; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: 0 50px 80px -40px rgb(120 50 30 / 0.45); }
.m-turn-ph img { width: 100%; height: 100%; object-fit: cover; }
.m-zid .m-stick { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 5vw; padding-inline: var(--edge); }
.m-zw, .m-ph { display: grid; }
.m-z, .m-ph figure { grid-area: 1 / 1; opacity: 0; transition: opacity 700ms var(--ease), transform 900ms var(--ease); }
.m-z { transform: translateY(30px); }
.m-k { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; color: var(--a); font-weight: 800; font-size: 46px; box-shadow: 0 14px 30px -14px rgb(160 60 90 / 0.45); transition: color 1.2s; }
.m-word { font-size: clamp(64px, 11vw, 190px); margin-top: 18px; }
.m-sub { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; margin-top: 14px; color: var(--ink-2); }
.m-ph figure { position: relative; border-radius: 40px; overflow: hidden; aspect-ratio: 3 / 4; transform: rotate(-3deg) scale(0.96); box-shadow: 0 50px 80px -40px rgb(120 50 30 / 0.5); }
.m-ph img { width: 100%; height: 100%; object-fit: cover; }
.m-ph .plus { position: absolute; left: 58%; top: 50%; }
:is([data-at="0"]) :is(.m-z, figure)[data-i="0"], :is([data-at="1"]) :is(.m-z, figure)[data-i="1"], :is([data-at="2"]) :is(.m-z, figure)[data-i="2"] { opacity: 1; transform: none; }
.m-ways { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; gap: 2vw; padding-inline: 0; }
.m-ways::before { content: ""; position: absolute; inset: 0; background: var(--bgimg) center / cover; opacity: 0.55; -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 80%); }
.m-row { position: relative; display: flex; width: max-content; font-size: clamp(56px, 9vw, 150px); font-weight: 800; letter-spacing: -0.06em; white-space: nowrap; animation: m-mq 36s linear infinite; }
.m-row.rev { animation-direction: reverse; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.m-row i { font-style: normal; margin: 0 0.3em; opacity: 0.35; }
@keyframes m-mq { to { transform: translateX(-50%); } }
.m-cast { height: 300svh; }
.m-cast .m-stick { place-items: center start; padding: 0; }
.m-castw { position: absolute; left: var(--edge); top: 14vh; font-size: clamp(56px, 9vw, 150px); z-index: 0; }
.m-track { display: flex; gap: clamp(20px, 3vw, 48px); padding: 26vh 10vw 0 50vw; will-change: transform; }
.m-item { flex: none; width: clamp(180px, 20vw, 300px); display: grid; gap: 14px; text-decoration: none; color: var(--ink); }
.m-item > img, .m-item .pk { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: contain; filter: drop-shadow(0 30px 30px rgb(80 40 30 / 0.2)); }
.m-item .pk { height: auto; }
.m-item .pk-say { display: none; }
.m-item span { font-weight: 700; font-size: 16px; }
.m-item:nth-child(odd) { transform: translateY(-4vh) rotate(-3deg); }
.m-item:nth-child(even) { transform: translateY(3vh) rotate(3deg); }
.m-name { display: flex; flex-direction: column; justify-content: center; gap: 4vw; padding-inline: 0; }
.m-mq { display: flex; width: max-content; font-size: clamp(48px, 7vw, 120px); font-weight: 800; letter-spacing: -0.05em; white-space: nowrap; animation: m-mq 40s linear infinite; color: #e2614c; }
.m-mq.rev { animation-direction: reverse; color: transparent; -webkit-text-stroke: 1.5px #e2614c; }
.m-duo { display: flex; align-items: center; justify-content: center; gap: 4vw; padding-inline: var(--gut); }
.m-duo figure { width: min(22vw, 300px); aspect-ratio: 3 / 4; border-radius: 999px; overflow: hidden; box-shadow: 0 40px 60px -36px rgb(120 50 30 / 0.5); }
.m-duo figure:first-child { transform: rotate(-6deg); }
.m-duo figure:last-child { transform: rotate(6deg) translateY(30px); }
.m-duo img { width: 100%; height: 100%; object-fit: cover; }
.m-ko { font-size: clamp(36px, 5vw, 84px); text-align: center; }
.m-end { text-align: center; align-content: center; gap: 36px; }
.m-end .m-big { font-size: clamp(36px, 6vw, 100px); }
.m-end .cut-btn { justify-self: center; font-size: 17px; padding: 16px 30px; }
@media (max-width: 860px) {
.m-open { place-items: end start; padding-bottom: 18vh; }
.m-hero-ph { width: 62vw; right: -6vw; top: 30%; }
.m-giant { font-size: clamp(44px, 13vw, 72px); text-shadow: 0 2px 30px rgb(255 255 255 / 0.6); }
.m-peek-1, .m-peek-3 { display: none; }
.m-turn, .m-zid .m-stick { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.m-turn-ph, .m-ph figure { max-height: 44svh; width: auto; justify-self: center; }
.m-k { width: 64px; height: 64px; font-size: 32px; }
.m-duo figure { width: 28vw; }
.m-track { padding-left: 16vw; }
}
@media (prefers-reduced-motion: reduce) { .m-row, .m-mq, .m-scroll { animation: none; } .m-line, .m-z, .m-ph figure { transition: none; } }
.m-turn-ph { height: min(74svh, 720px); width: auto; justify-self: center; }
.m-ph figure { height: min(70svh, 680px); width: auto; justify-self: center; }
@media (max-width: 860px) { .m-turn-ph { height: 44svh; } .m-ph figure { height: 42svh; } }
@property --a { syntax: '<color>'; inherits: true; initial-value: #f6b08a; }
@property --b { syntax: '<color>'; inherits: true; initial-value: #fde9dc; }
.mood { transition: --a 1.2s var(--ease), --b 1.2s var(--ease); }
.m-bg { background:
radial-gradient(60% 55% at 85% 8%, color-mix(in srgb, var(--a) 80%, transparent), transparent 70%),
radial-gradient(80% 60% at 20% 95%, var(--a), transparent 70%),
radial-gradient(45% 40% at 8% 10%, rgb(255 255 255 / 0.75), transparent 70%),
var(--b); }
.hero-z { perspective: 1400px; }
.hero-z .giants { animation: hz-float 6s ease-in-out infinite; transition: rotate 600ms var(--ease); }
@keyframes hz-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.hz-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hz-p { position: absolute; left: 0; top: 0; width: var(--w, 90px); opacity: 0; transition: opacity 900ms var(--ease); will-change: transform; filter: drop-shadow(0 10px 14px rgb(120 50 30 / 0.16)); }
.hz-p.on { opacity: var(--o, 0.85); }
.hz-p.far { filter: blur(2.5px) drop-shadow(0 6px 8px rgb(120 50 30 / 0.1)); }
.hz-burst { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 12px 16px rgb(120 50 30 / 0.2)); }
@media (prefers-reduced-motion: reduce) { .hero-z .giants { animation: none; } .hz-field { display: none; } }
.hero-z .giants { z-index: 2; }
.js-in .rv { opacity: 0; translate: 0 28px; transition: opacity 800ms var(--ease), translate 900ms var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js-in .rv.in { opacity: 1; translate: 0 0; }
.js-in .zcards figure { clip-path: ellipse(0% 0% at 50% 100%); transition: clip-path 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.js-in .zcards figure.in { clip-path: ellipse(140% 140% at 50% 100%); }
.zcards figure { transform-style: preserve-3d; }
.zcards figure img { transition: transform 600ms var(--ease), scale 600ms var(--ease); }
.ways span { display: inline-block; }
.js-in .ways .w-smear::after { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease) 200ms; opacity: 0.35; }
.ways.in .w-smear::after { transform: scaleX(1); }
.js-in .ways .w-stick { scale: 1.6; opacity: 0; rotate: -8deg; transition: scale 500ms cubic-bezier(0.3, 1.6, 0.5, 1) 450ms, opacity 200ms 450ms, rotate 500ms var(--ease) 450ms; }
.ways.in .w-stick { scale: 1; opacity: 1; rotate: 0deg; }
.ways.in .w-tap { animation: w-tap 900ms var(--ease) 900ms both; }
@keyframes w-tap { 0% { translate: 0 0; } 15% { translate: 0 -0.18em; } 30% { translate: 0 0; } 45% { translate: 0 -0.12em; } 60%, 100% { translate: 0 0; } }
.js-in .ways .w-wrap { clip-path: inset(0 100% 0 0 round 0.3em); transition: clip-path 900ms var(--ease) 1300ms; }
.ways.in .w-wrap { clip-path: inset(0 0 0 0 round 0.3em); }
.cut-btn, .cast-ctl button { transition: background 160ms, color 160ms, translate 300ms var(--ease); }
.hero-z .hz-copy, .hero-z .hz-line { will-change: transform, opacity; }
.name-big span[lang="en"] { display: inline-flex; }
.name-big .ch-l { display: inline-block; transition: translate 400ms cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: calc(var(--k) * 25ms); white-space: pre; }
.name-big span[lang="en"]:hover .ch-l { translate: 0 -0.12em; }
@media (prefers-reduced-motion: reduce) {
.js-in .rv, .js-in .zcards figure, .js-in .ways span, .js-in .ways .w-smear::after { opacity: 1 !important; translate: none !important; clip-path: none !important; scale: none !important; rotate: none !important; transform: none !important; animation: none !important; }
}
.pk-say { display: none !important; }
.hero-z .hz-set .pk-say { display: block !important; }
.pk-in { transform-origin: 50% 100%; }
.hz-nav { display: flex; gap: 10px; margin-top: 30px; }
.hz-nav button { width: 54px; height: 22px; padding: 9px 0; border: 0; background: none; cursor: pointer; }
.hz-nav button::before { content: ""; display: block; height: 4px; border-radius: 4px; background: rgb(30 24 20 / 0.16); }
.hz-nav button i { display: block; height: 4px; margin-top: -4px; border-radius: 4px; background: var(--ink); width: 0; }
.hz-nav button[aria-pressed="true"] i { animation: hz-prog 6.5s linear forwards; }
.hero-z:hover .hz-nav button i, .hero-z.paused .hz-nav button i { animation-play-state: paused; }
@keyframes hz-prog { to { width: 100%; } }
.giant.is-prod { display: grid; place-items: center; }
.hz-prod { display: grid; place-items: center; width: 100%; height: 100%; }
.hz-prod img { max-width: 100%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 34px 40px rgb(80 40 30 / 0.22)); }
.hz-name { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%) rotate(6deg); white-space: nowrap; font-weight: 700; font-size: 15px; text-decoration: none; background: rgb(255 255 255 / 0.85); padding: 8px 16px; border-radius: 999px; z-index: 3; }
.hz-name:hover { background: var(--ink); color: #fff; }
.hz-field.off .hz-p { opacity: 0 !important; }
.pk:focus, .pk:focus-visible { outline: none; }
.kbd .pk:focus-visible { outline: 3px solid rgb(255 255 255 / 0.9); outline-offset: 8px; border-radius: 28px; }
.hero-z h1 { font-size: clamp(44px, 5.2vw, 82px); letter-spacing: -0.045em; }
@media (max-width: 1100px) { .hz-name { bottom: -40px; font-size: 13px; } .hero-z h1 { font-size: 40px; } }
@media (max-width: 1100px) { .hero-z .giant .hz-name { bottom: -78px; } .hero-z .giants { margin-bottom: 130px; } .co-d { bottom: 2%; } }
.hero-z .giants { left: 44%; width: min(52vw, 860px); height: min(76vh, 760px); aspect-ratio: auto; transform: translate(0, -50%); }
.hero-z .giant { transform: none; }
.hero-z .giant.is-out { transform: translateY(110%); }
.hero-z .giant.is-in { transform: translateY(110%); }
.hz-item { position: absolute; display: grid; justify-items: center; gap: 8px; transition: translate 400ms var(--ease); }
.hz-item:hover { translate: 0 -8px; z-index: 5; }
.hz-item img { width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgb(80 40 30 / 0.22)); }
.hz-item .pk { width: 100%; }
.hz-item .pk-face { filter: drop-shadow(0 26px 30px rgb(80 40 30 / 0.22)); }
.hz-tagname { font-size: 13px; font-weight: 700; text-decoration: none; background: rgb(255 255 255 / 0.85); padding: 5px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; translate: 0 -6px; transition: opacity 250ms, translate 250ms var(--ease); }
.hz-item:hover .hz-tagname, .hz-item:focus-within .hz-tagname { opacity: 1; translate: 0 0; }
.n4 .hz-item { width: 31%; }
.n4 .k0 { left: 4%; top: 6%; rotate: -8deg; }
.n4 .k1 { left: 36%; top: 0; rotate: 4deg; z-index: 2; }
.n4 .k2 { left: 14%; top: 44%; rotate: 6deg; z-index: 3; }
.n4 .k3 { left: 50%; top: 40%; rotate: -5deg; z-index: 4; }
.n3 .hz-item { width: 30%; top: 10%; }
.n3 .k0 { left: 2%; rotate: -16deg; top: 16%; }
.n3 .k1 { left: 34%; rotate: 0deg; z-index: 2; }
.n3 .k2 { left: 66%; rotate: 16deg; top: 16%; }
.hz-set .co-z { left: -6%; top: 2%; }
.hz-set .co-i { right: -4%; left: auto; top: 30%; }
.hz-set .co-d { left: 0; bottom: 0; }
.hz-set .co { transform: none; }
.hz-set .co p { white-space: normal; max-width: 260px; }
.hero-z .giant.hz-set .pk-say { display: none; }
@media (max-width: 1100px) {
.hero-z .giants { left: auto; transform: none; width: 100%; height: 96vw; margin: 40px 0 70px; }
.hz-set .co-z { left: 0; top: -4%; }
.hz-set .co-i { right: 0; top: 46%; }
.hz-set .co-d { left: 0; bottom: -10%; }
.hz-set .co p { max-width: 170px; }
.hz-tagname { display: none; }
}
.hz-set .co { z-index: 8; }
.n3 .k0 { rotate: -4deg; } .n3 .k2 { rotate: 4deg; }
.n3 .hz-item { width: 32%; }
.n3 .k0 { left: 0; } .n3 .k2 { left: 68%; }
.hz-set.n3 .co-i { top: 62%; right: -6%; }
.sm-m { font-size: 0.8em; }
.sm-m { display: inline !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-weight: inherit !important; }
.hero-z .giants { animation: none; rotate: none !important; }
.hz-obj { cursor: pointer; transform-origin: 50% 100%; outline: none; }
.kbd .hz-obj:focus-visible { outline: 3px solid rgb(255 255 255 / 0.9); outline-offset: 6px; border-radius: 20px; }
.hz-tagname { pointer-events: none; }
.n3 .hz-item { width: 30%; }
.n3 .k1 { left: 35%; top: 0; rotate: 26deg; z-index: 1; }
.n3 .k0 { left: 8%; top: 30%; rotate: -2deg; z-index: 2; }
.n3 .k2 { left: 60%; top: 30%; rotate: 12deg; z-index: 2; }
.hz-set.n3 .co-i { top: 14%; right: -8%; }
.good-h { font-size: clamp(30px, 4vw, 58px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.15; max-width: 18em; }
.good-p { margin-top: 18px; max-width: 40em; }
.good3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.good3 li { position: relative; background: rgb(255 255 255 / 0.72); border-radius: var(--r-card); padding: 26px 24px 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.good3 .plus { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; }
.good3 .plus::before, .good3 .plus::after { width: 12px; height: 2.5px; }
.gw { font-size: clamp(30px, 3vw, 44px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin-bottom: 14px; color: #e2614c; }
.gw small { display: block; margin-top: 6px; font-size: 13px; letter-spacing: 0; font-weight: 700; color: var(--ink-3); }
.good3 li p:last-child { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 860px) { .good3 { grid-template-columns: minmax(0, 1fr); } }
.hz-obj.is-tube { will-change: filter; }
.stats { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; margin-top: clamp(30px, 4vw, 52px); }
.stat { background: rgb(255 255 255 / 0.72); border-radius: var(--r-card); padding: 26px 26px 22px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.num { font-size: clamp(40px, 5.4vw, 84px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num .suf { color: #e2614c; }
.num .q { display: inline-block; margin-left: 0.08em; color: #e2614c; animation: q-bob 2.4s var(--ease) infinite; }
@keyframes q-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 20% { translate: 0 -0.12em; rotate: 8deg; } 40% { translate: 0 0; rotate: -4deg; } 60% { rotate: 0deg; } }
.lab { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.reach2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 30px; }
.rk { font-size: 13px; font-weight: 700; color: var(--ink-3); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 9px 16px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 20px -14px rgb(120 60 40 / 0.4); }
.chips .more { background: none; box-shadow: none; outline: 1.5px dashed rgb(226 97 76 / 0.55); outline-offset: -1.5px; color: #e2614c; }
.reach-note { margin-top: 22px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 860px) { .stats, .reach2 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .num .q { animation: none; } }
.hz-obj.is-tube { cursor: default; }
.num .q { animation: none !important; }
.zidv-sec { position: relative; padding-block: var(--sec); --p: 1; }
.zidv-sec > :not(.aura) { position: relative; z-index: 1; }
.zidv-head { text-align: center; }
.zidv-head .kick { justify-content: center; }
.zidv-stage { position: relative; height: min(620px, 92vw); max-width: 900px; margin: clamp(10px, 3vw, 40px) auto 0; }
.zc { --r: min(300px, 40vw); position: absolute; left: 50%; top: 50%; width: var(--r); height: var(--r); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2); border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; mix-blend-mode: multiply; transition: transform 120ms linear; }
.zc-0 { background: #f9c4a6; transform: translate(calc(-1 * (34% + (1 - var(--p)) * 46%)), calc(-1 * (20% + (1 - var(--p)) * 30%))); }
.zc-1 { background: #f6b3c7; transform: translate(calc(34% + (1 - var(--p)) * 46%), calc(-1 * (20% + (1 - var(--p)) * 30%))); }
.zc-2 { background: #f4c7b8; transform: translate(0, calc(36% + (1 - var(--p)) * 40%)); }
.zc b { font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; mix-blend-mode: normal; }
.zc small { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.zc-k { font-size: 13px; font-weight: 800; color: #e2614c; }
.zc-0 > *, .zc-1 > *, .zc-2 > * { translate: var(--tx, 0) var(--ty, 0); }
.zc-0 { --tx: -22%; --ty: -12%; } .zc-1 { --tx: 22%; --ty: -12%; } .zc-2 { --ty: 18%; }
.zidv-core { position: absolute; left: 50%; top: 50%; translate: -50% -48%; z-index: 3; text-align: center; font-weight: 800; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.25; color: #fff; background: #e2614c; padding: 12px 18px; border-radius: 999px; white-space: nowrap; opacity: calc((var(--p) - 0.75) * 4); scale: calc(0.8 + var(--p) * 0.2); box-shadow: 0 16px 30px -14px rgb(160 50 90 / 0.6); }
.zidv-sec .zsum { margin-top: 10px; }
@media (max-width: 760px) { .zc { --r: 52vw; } .zc small { font-size: 11px; } .zidv-core { font-size: 12px; padding: 9px 12px; } }
@media (prefers-reduced-motion: reduce) { .zidv-sec { --p: 1 !important; } }
.zc b { font-size: clamp(26px, 3.2vw, 44px); }
.zc b em { font-style: normal; color: #e2614c; }
.zc small { font-size: 14px; margin-top: 4px; }
.zidv-sec .aura { inset: -18% 0; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.zidv-sec { overflow: visible; }
@media (max-width: 760px) { .zc b { font-size: 24px; } }
.hero-z .hz-set .pk-say { left: 50%; top: auto; bottom: 88%; width: max-content; max-width: 230px; padding: 11px 16px; border: 0; border-radius: 20px 20px 20px 6px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.4; box-shadow: 0 18px 34px -16px rgb(120 50 30 / 0.45); opacity: 0; transform: translate(-30%, 10px) scale(0.85); transform-origin: 0 100%; transition: opacity 180ms, transform 420ms cubic-bezier(.3,1.5,.5,1); z-index: 20; rotate: none; }
.hero-z .hz-set .pk.is-talking .pk-say { opacity: 1; transform: translate(-30%, 0) scale(1); }
.hz-item { transition: translate 450ms var(--ease), scale 450ms var(--ease); }
.hz-item:hover { translate: 0 -12px; scale: 1.04; }
.hz-obj { cursor: default; }
.hz-shot { width: 100%; aspect-ratio: 2 / 3; border-radius: 26px; overflow: hidden; box-shadow: 0 34px 50px -30px rgb(80 40 60 / 0.5); background: #fff; }
.hz-shot img { width: 100%; height: 100%; object-fit: cover; }
.n3 .hz-item { width: 31%; }
.n3 .k1 { left: 34.5%; top: 0; rotate: 0deg; }
.n3 .k0 { left: 4%; top: 18%; rotate: -6deg; }
.n3 .k2 { left: 65%; top: 18%; rotate: 6deg; }
.hz-set.n3 .co-i { top: 8%; right: -8%; }
.plus::before, .plus::after { background: #e8664f !important; }
.co b { color: #d9573f !important; }
.reach-map { margin-top: clamp(34px, 5vw, 60px); }
.lands { font-size: clamp(30px, 4.6vw, 68px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: 0.1em 0.38em; }
.lands i { width: 0.22em; height: 0.22em; border-radius: 50%; background: #e2614c; opacity: 0.55; }
.lands em { font-style: normal; color: #e2614c; font-size: 0.5em; letter-spacing: -0.02em; padding: 0.35em 0.9em; border-radius: 999px; outline: 2px dashed rgb(226 97 76 / 0.5); outline-offset: -2px; }
.reach-ch { margin-top: clamp(30px, 4vw, 48px); }
.reach-ch ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.reach-ch li { background: var(--c); border-radius: var(--r-card); padding: 22px 20px 20px; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; }
.reach-ch .no { font-size: 13px; font-weight: 800; color: rgb(30 24 20 / 0.45); }
.reach-ch b { font-size: clamp(18px, 1.7vw, 23px); letter-spacing: -0.03em; line-height: 1.25; }
@media (max-width: 860px) { .reach-ch ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hz-set .co { z-index: 200 !important; }
.hz-set .hz-item:has(.is-talking) { z-index: 150 !important; }
.hero-z .hz-set .pk-say { z-index: 210; }
.hz-cream { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.hz-cream .tx { position: absolute; left: -18%; right: -18%; top: 34%; height: 62%; background: center / cover no-repeat; border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); filter: saturate(1.1) brightness(1.04); }
.hz-cream img { position: relative; display: block; height: 100%; width: auto; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 26px 26px rgb(70 50 80 / 0.25)); }
.n3 .hz-item { width: 28%; }
.n3 .k1 { left: 36%; top: 0; rotate: 0deg; }
.n3 .k0 { left: 6%; top: 22%; rotate: -12deg; }
.n3 .k2 { left: 66%; top: 22%; rotate: 12deg; }
.hz-cream .tx { mix-blend-mode: multiply; filter: brightness(1.12) contrast(1.15); }
.map { position: relative; margin-top: 8px; }
.map-dots { display: block; width: 100%; height: auto; fill: rgb(30 24 20 / 0.16); }
.pin { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pin i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pin b { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / 0.9); box-shadow: 0 6px 14px -8px rgb(120 60 40 / 0.4); }
.pin.on i { background: #e2614c; box-shadow: 0 0 0 5px rgb(226 97 76 / 0.22); animation: pin 2.6s var(--ease) infinite; }
.pin.on b { font-size: 14px; }
.pin.nx i { border: 2px solid #e2614c; background: #fff; width: 10px; height: 10px; }
.pin.nx b { background: none; box-shadow: none; color: var(--ink-3); font-weight: 600; font-size: 12px; padding: 0; }
.map-key { display: flex; gap: 22px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.map-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.k-on::before { background: #e2614c; } .k-nx::before { border: 2px solid #e2614c; width: 8px !important; height: 8px !important; }
.reach-ch ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reach-ch li { min-height: 140px; gap: 8px; }
.reach-ch small { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 860px) { .pin b { display: none; } .pin.on b { display: inline; font-size: 11px; padding: 2px 6px; } }
@media (prefers-reduced-motion: reduce) { .pin.on i { animation: none; } }
.ing-group { padding-top: clamp(40px, 5vw, 64px); }
.ing-group .h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ing-group .h2 .dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.ing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ing { background: #fff; border-radius: var(--r-card); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 40px -32px rgb(90 50 30 / 0.4); border-top: 6px solid var(--g); }
.ing h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.035em; }
.ing-d { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.ing-wh { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.ing-wh div { display: flex; gap: 10px; }
.ing-wh dt { flex: none; width: 48px; font-weight: 800; color: #e2614c; }
.ing-wh dd { font-weight: 600; }
.ing-in { display: flex; gap: 8px; margin-top: auto; }
.ing-in a { width: 48px; height: 48px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; transition: translate 200ms var(--ease); }
.ing-in a:hover { translate: 0 -3px; }
.ing-in img { max-width: 38px; max-height: 40px; object-fit: contain; }
@media (max-width: 960px) { .ing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ing-grid { grid-template-columns: minmax(0, 1fr); } }
.pin.on b { position: absolute; top: 50%; translate: 0 -50%; left: 18px; }
.pin.side-l b { left: auto; right: 18px; }
.pin.side-tl b { left: auto; right: 16px; top: -6px; }
.pin.side-b b { left: 50%; top: 22px; translate: -50% 0; }
.pin.nx i { width: 9px; height: 9px; }
.next-list { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.next-list b { color: var(--ink); margin-right: 8px; }
.hero-z .hz-set .pk-say { bottom: auto; top: 16%; left: 54%; }
.pc-group { padding-top: clamp(40px, 5vw, 64px); }
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pc { background: #fff; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 44px -36px rgb(90 50 30 / 0.45); }
.pc-fig { height: 260px; display: grid; place-items: center; padding: 22px; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--c) 45%, #fff), color-mix(in srgb, var(--c) 14%, #fff)); }
.pc-fig > img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 16px 18px rgb(80 40 30 / 0.18)); }
.pc-tx { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pc-k { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.pc h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.25; }
.pc-d { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.pc-wwh { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; margin-top: auto; }
.pc-wwh div { display: flex; gap: 10px; align-items: baseline; }
.pc-wwh dt { flex: none; width: 46px; font-weight: 800; color: #e2614c; }
.pc-wwh dd { font-weight: 600; }
.chips-s { display: flex; flex-wrap: wrap; gap: 5px; }
.chips-s span { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 30%, #fff); font-size: 12.5px; font-weight: 700; }
.pc-res { font-size: 13px; color: var(--ink-2); background: var(--paper); border-radius: 12px; padding: 10px 12px; }
.pc-res b { font-size: 20px; font-weight: 800; color: var(--ink); margin-right: 8px; letter-spacing: -0.03em; }
@media (max-width: 960px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } }
.pc-fig > img { height: 100%; max-height: 216px; max-width: 100%; width: auto; }
.hz-set .co-z { top: -9%; left: 2%; }
.hz-set .co-i { right: -10%; top: 28%; }
.hz-set .co-d { bottom: -7%; left: 4%; }
.hero-z .hz-set .pk-say { top: 44%; left: 50%; transform: translate(-50%, 10px) scale(0.85); transform-origin: 50% 100%; border-radius: 20px; }
.hero-z .hz-set .pk.is-talking .pk-say { transform: translate(-50%, 0) scale(1); }
:root { --sec: clamp(44px, 5vw, 76px); }
.ch { padding-block: clamp(44px, 5vw, 72px); }
.zidv-sec { padding-block: clamp(44px, 5vw, 72px); }
.zidv-stage { height: min(540px, 88vw); }
.trail { height: clamp(40px, 5vw, 70px); margin-top: 0; }
.doc-head { padding-block: clamp(18px, 2.4vw, 32px) 0; }
.pc-group, .ing-group { padding-top: clamp(32px, 4vw, 52px); }
.sec-head { margin-bottom: 18px; }
.good3, .stats { margin-top: clamp(22px, 3vw, 36px); }
.reach-map { margin-top: clamp(26px, 3.5vw, 44px); }
.ch-name { margin-top: 0; }
.cast { padding-block: 16px 24px; }
.hero-z { min-height: 620px; height: min(100svh, 860px); }
.hz-set .co-z { top: -3%; left: -20%; } .hz-set .co-i { right: -3%; top: 30%; }
.js-in .rv { opacity: 0; translate: 0 18px; filter: blur(10px); transition: opacity 900ms var(--ease), translate 1000ms var(--ease), filter 900ms var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js-in .rv.in { opacity: 1; translate: 0 0; filter: blur(0); }
.js-in .fw { display: inline-block; opacity: 0; filter: blur(8px); translate: 0 0.25em; transition: opacity 700ms var(--ease), filter 700ms var(--ease), translate 800ms var(--ease); transition-delay: calc(var(--w) * 55ms); }
.js-in .in .fw, .js-in .fw.in { opacity: 1; filter: blur(0); translate: 0 0; }
.js-in .zcards figure { clip-path: none; transition: none; }
.js-in .zcards figure img, .js-in .pc-fig > img, .js-in .easy3 img { filter: blur(14px); scale: 1.08; transition: filter 1.1s var(--ease), scale 1.3s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js-in .zcards figure.in img, .js-in .pc.in .pc-fig > img { filter: blur(0); scale: 1; }
.focusable { position: relative; }
.focusable::after { content: ""; position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 0.9); box-shadow: 0 0 0 1px rgb(226 97 76 / 0.25), inset 0 0 30px rgb(255 255 255 / 0.25); opacity: 0; scale: 0.6; transition: opacity 250ms, scale 400ms var(--ease); pointer-events: none; z-index: 3; }
.focusable:hover::after { opacity: 1; scale: 1; }
.aura { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .js-in .fw, .js-in .rv, .js-in .zcards figure img, .js-in .pc-fig > img { opacity: 1 !important; filter: none !important; translate: none !important; scale: none !important; } .focusable::after { display: none; } }
.hero-z { height: 100vh; height: 100svh; min-height: 680px; }
.hz-cream { aspect-ratio: auto; display: grid; justify-items: center; gap: 18px; }
.hz-cream .tx { display: none; }
.hz-cream img { height: clamp(300px, 46vh, 470px); width: auto; transform: none; filter: drop-shadow(0 30px 24px rgb(70 50 80 / 0.18)); }
.hz-cream::before { content: ""; position: absolute; left: 18%; right: 18%; top: calc(clamp(300px, 46vh, 470px) - 14px); height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgb(60 40 70 / 0.22), transparent); z-index: -1; }
.hz-cream figcaption { text-align: center; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.hz-cream figcaption b { display: block; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.n3 .hz-item { width: 30%; top: 8%; rotate: 0deg !important; }
.n3 .k0 { left: 2%; top: 14%; }
.n3 .k1 { left: 35%; top: 6%; }
.n3 .k2 { left: 68%; top: 14%; }
.n3 .hz-tagname { display: none; }
.reach-map { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.map { margin: 0; }
.map-dots { fill: rgb(30 24 20 / 0.13); }
.arcs path { fill: none; stroke: #e2614c; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; opacity: 0.7; transition: stroke-dashoffset 1.6s var(--ease); transition-delay: calc(var(--i) * 160ms); }
.reach-map.in .arcs path, .no-js .arcs path { stroke-dashoffset: 0; }
.pin b { display: none !important; }
.pin.on i { width: 10px; height: 10px; }
.map-side .rk { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; }
.map-side .rk::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.map-side .k-on::before { background: #e2614c; } .map-side .k-nx::before { border: 2px solid #e2614c; width: 7px; height: 7px; }
.live { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 24px; }
.next-list { display: grid; gap: 6px; margin: 0; font-size: 13.5px; }
.next-list b { display: inline-block; min-width: 64px; }
.map-key { display: none; }
@media (max-width: 860px) { .reach-map { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .arcs path { transition: none; stroke-dashoffset: 0; } }
.n3 .hz-item { width: 26%; top: 6% !important; }
.n3 .k0 { left: 4%; } .n3 .k1 { left: 37%; } .n3 .k2 { left: 70%; }
.hz-cream img { height: clamp(280px, 44vh, 440px); max-width: 100%; object-fit: contain; }
.hz-cream::before { top: calc(clamp(280px, 44vh, 440px) - 14px); }
.chan { border-top: 1.5px solid var(--ink); }
.chan li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: padding 300ms var(--ease), color 200ms; }
.chan b { font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.04em; }
.chan span { font-size: 14px; color: var(--ink-3); text-align: right; }
.chan li:hover { padding-left: 14px; color: #e2614c; }
.chan li:hover span { color: var(--ink-2); }
@media (max-width: 700px) { .chan li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .chan span { text-align: left; } }
.ab-hero { position: relative; overflow: hidden; padding-block: clamp(20px, 3vw, 40px) clamp(48px, 6vw, 80px); }
.ab-hero > .wrap { position: relative; z-index: 1; }
.ab-h { font-size: clamp(42px, 6.6vw, 104px); font-weight: 800; letter-spacing: -0.055em; line-height: 1.04; margin-top: 10px; }
.ab-beats { display: grid; gap: clamp(28px, 4vw, 56px); padding-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 64px); }
.beat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.beat.rev figure { order: 2; }
.beat figure { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; }
.beat img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease); }
.beat figure:hover img { scale: 1.05; }
.beat-k { display: flex; gap: 10px; font-size: 14px; font-weight: 800; color: #e2614c; margin-bottom: 14px; }
.beat-k span { color: var(--ink-3); }
.beat h2 { font-size: clamp(28px, 3.4vw, 50px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.15; }
@media (max-width: 760px) { .beat { grid-template-columns: minmax(0, 1fr); } .beat.rev figure { order: 0; } }
.js-in .beat figure img { filter: blur(14px); scale: 1.08; transition: filter 1.1s var(--ease), scale 1.3s var(--ease); }
.js-in .beat.in figure img { filter: blur(0); scale: 1; }
.js-in .chan li { opacity: 0; translate: -20px 0; transition: opacity 600ms var(--ease), translate 700ms var(--ease), padding 300ms var(--ease), color 200ms; transition-delay: calc(var(--i) * 60ms); }
.js-in .chan li.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js-in .chan li, .js-in .beat figure img { opacity: 1 !important; translate: none !important; filter: none !important; scale: none !important; } }
.hdr-lang:empty { display: none; }
.reach-ch ul.chan { display: block; }
.reach-ch .chan li { background: none; border-radius: 0; min-height: 0; padding: 14px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; flex-direction: unset; }
.reach-ch .chan li:hover { padding-left: 14px; }
.reach-ch .chan b { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.2; }
.hero-z .hz-set .pk-say { display: none !important; }
.zstrip { position: relative; }
.zcards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin-inline: calc(-1 * var(--edge)); padding: 4px var(--edge) 8px; scroll-padding-inline: var(--edge); cursor: grab; }
.zcards::-webkit-scrollbar { display: none; }
.zcards figure { flex: 0 0 clamp(220px, 21vw, 300px); scroll-snap-align: start; }
.zcards img { aspect-ratio: 3 / 4.2; }
.zcards figcaption { padding: 40px 16px 14px; font-size: 13px; }
.zcards figcaption b { font-size: clamp(18px, 1.5vw, 21px); }
.zs-btn { position: absolute; top: -62px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 8px 22px -10px rgb(120 60 50 / 0.45); font-size: 17px; font-weight: 800; cursor: pointer; transition: background 160ms, color 160ms; }
.zs-btn:hover { background: var(--ink); color: #fff; }
.zs-btn.prev { right: 54px; } .zs-btn.next { right: 0; }
.ch-zones .sec-head { padding-right: 120px; }
@media (max-width: 760px) { .zs-btn { display: none; } .ch-zones .sec-head { padding-right: 0; } .zcards figure { flex-basis: 62vw; } }
.zs-btn { z-index: 5; }
.ch-zones .zstrip { margin-top: 0; }
.zidv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.zidv-head { text-align: left; }
.zidv-head .kick { justify-content: flex-start; }
.zidv-sec .zidp-mark { text-align: left; font-size: clamp(64px, 8vw, 120px); margin: 0; }
.zidv-sec .zidp-line { text-align: left; margin-top: 10px; font-size: clamp(20px, 2vw, 28px); }
.zidv-sum { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 30em; }
.zidv-stage { height: min(440px, 80vw); margin: 0; max-width: none; }
.zc { --r: min(230px, 40vw); }
.zc b { font-size: clamp(22px, 2.2vw, 32px); }
.zidv-sec .zsum { display: none; }
@media (max-width: 860px) { .zidv-grid { grid-template-columns: minmax(0, 1fr); } .zc { --r: 46vw; } }
.ways-sec { padding-block: clamp(36px, 4vw, 56px); }
.ways4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.way { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; }
.way img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease); }
.way:hover img { scale: 1.06; }
.way figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 18px 16px; background: linear-gradient(transparent, rgb(30 20 16 / 0.55)); color: #fff; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.04em; }
.way figcaption span { display: block; font-size: 12px; letter-spacing: 0; opacity: 0.8; margin-bottom: 4px; }
.js-in .way { opacity: 0; translate: 0 24px; transition: opacity 800ms var(--ease), translate 900ms var(--ease); transition-delay: calc(var(--i) * 90ms); }
.js-in .way.in { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .ways4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .js-in .way { opacity: 1 !important; translate: none !important; } }
.zs-btn.zs-prev { right: 54px; } .zs-btn.zs-next { right: 0; }
.zidv-core { font-size: 13px; padding: 9px 14px; translate: -50% -30%; }
.zc small { margin-top: 2px; }
.zc-0 { --ty: -18%; } .zc-1 { --ty: -18%; }
.ab-lead { margin-top: 22px; max-width: 36em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; color: var(--ink-2); }
.beat-p { margin-top: 18px; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); max-width: 32em; }
.way:nth-child(3) img { object-position: 30% 30%; }
.pc-fig.has-pk .pk { height: 100%; width: auto; aspect-ratio: 775 / 1100; max-height: 216px; }
.pc-fig.has-pk .pk-face { filter: drop-shadow(0 16px 18px rgb(80 40 30 / 0.18)); }
.pc-fig .pk-say { display: none !important; }
.z-next { position: relative; flex: 0 0 clamp(220px, 21vw, 300px); border-radius: var(--r-card); overflow: hidden; background: #f3e6df; scroll-snap-align: start; }
.z-next img { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; filter: blur(18px) grayscale(1) brightness(1.15) contrast(0.7); scale: 1.15; opacity: 0.75; }
.z-next .q { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 76px; height: 76px; border-radius: 50%; border: 1.5px dashed rgb(226 97 76 / 0.7); display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #e2614c; background: rgb(255 255 255 / 0.55); backdrop-filter: blur(6px); animation: zq 2.8s var(--ease) infinite; }
@keyframes zq { 50% { scale: 1.06; } }
.z-next figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; color: var(--ink-2); font-size: 13px; display: grid; gap: 2px; }
.z-next figcaption b { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink); letter-spacing: -0.03em; }
@media (prefers-reduced-motion: reduce) { .z-next .q { animation: none; } }
.zcards .z-next img { filter: blur(16px) grayscale(1) brightness(1.2) contrast(0.6) !important; scale: 1.15 !important; }
.zcards .z-next figcaption { background: linear-gradient(transparent, rgb(255 255 255 / 0.55)); color: var(--ink-2); } .zcards .z-next figcaption b { color: var(--ink); }
.pk-eyes .lid { shape-rendering: geometricPrecision; }
.hz-set.n3 .co-z { top: 2%; left: 6%; }
.hz-set.n3 .co-i { top: 2%; right: 4%; left: auto; }
.hz-set.n3 .co-d { bottom: 6%; left: 34%; }
.zcards .z-next { background: #fdf3ef; }
.zcards .z-next img { filter: blur(10px) saturate(0.9) brightness(1.12) !important; opacity: 0.85; scale: 1.12 !important; }
.zcards .z-next::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(255 246 242 / 0.35), rgb(255 240 236 / 0.75)); }
.zcards .z-next .q, .zcards .z-next figcaption { z-index: 2; }
.zcards .z-next .q { background: rgb(255 255 255 / 0.8); }
.zcards .z-next figcaption { background: none; }
.zcards .z-next.focusable::after { display: none; }
.pc { scroll-margin-top: 90px; } .pc:target { box-shadow: 0 0 0 3px #e2614c, 0 24px 44px -36px rgb(90 50 30 / 0.45); }
.pc-wwh { margin-top: 4px; }
.cast .cc { filter: none !important; opacity: 1 !important; }
main > .sec { position: relative; z-index: 2; } .cast { position: relative; z-index: 2; }
.cast .cc { transition: none !important; will-change: transform; } .cast { scroll-snap-type: none !important; scroll-behavior: auto !important; }
.ftr-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.ftr-contact { max-width: 460px; }
.fc-k { font-size: 13px; font-weight: 800; color: #e2614c; margin-bottom: 8px; }
.fc-h { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; }
.fc-mail { display: inline-flex; margin-top: 16px; padding: 12px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; transition: background 160ms; }
.fc-mail:hover { background: #e2614c; }
.fc-s { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.ftr-in { align-items: flex-start; }
.ftr-in .ftr-brand { flex: 1 1 260px; align-self: flex-end; }
.ftr-contact { flex: 0 1 380px; }
.fc-ig { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fc-ig:hover { background: var(--ink); color: #fff; }
.fc-s a { color: inherit; }
@media (max-width: 1100px) {
.hero-z .giants { width: 86%; margin-inline: auto; }
.hz-set .co-z { left: 0; top: -10%; }
.hz-set .co-i { right: 0; top: 42%; }
.hz-set .co-d { left: 4%; bottom: -12%; }
.hz-set .co p { max-width: 190px; }
.zidv-stage { height: 92vw; }
.zc { --r: 50vw; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) { .zidv-sec { --p: 1 !important; } }
.item { border-radius: var(--r-card); overflow: hidden; border: 0 !important; outline: 0 !important; background: #fff; box-shadow: 0 20px 40px -32px rgb(90 50 30 / 0.45); }
.item-fig { border: 0 !important; }
.zone-hero figure, .zone-hero img, .doc-photo, .zp-photo img { border-radius: 24px; border: 0 !important; outline: 0 !important; }
@media (max-width: 1100px) {
.hero-z .giants { margin-bottom: 190px; }
.hz-set .co { position: absolute; left: 0 !important; right: 0 !important; bottom: auto !important; transform: none !important; display: block; }
.hz-set .co .plus { display: none; }
.hz-set .co p { max-width: none; width: 100%; white-space: normal; display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; box-shadow: 0 8px 20px -14px rgb(60 30 20 / 0.35); }
.hz-set .co b { flex: none; width: 112px; }
.hz-set .co-z { top: calc(100% + 18px) !important; }
.hz-set .co-i { top: calc(100% + 72px) !important; }
.hz-set .co-d { top: calc(100% + 126px) !important; }
}
.co-list { display: contents; }
.hz-set .co p { max-width: min(300px, 44%); }
.hz-set .co { max-width: 48%; }
.hz-set .co p { max-width: none; }
.hz-set.n3 .co-z { left: 0; top: 0; }
.hz-set.n3 .co-i { right: 0; top: 0; }
@media (max-width: 1100px) {
.co-list { display: grid; gap: 8px; position: absolute; top: calc(100% + 16px); left: 0; right: 0; }
.hz-set .co { position: static !important; max-width: none; }
.hz-set .co-z, .hz-set .co-i, .hz-set .co-d { top: auto !important; }
.hero-z .giants { margin-bottom: 0; }
.hero-z { padding-bottom: 220px; }
}
.peek { position: absolute; z-index: 3; width: clamp(150px, 16vw, 240px); pointer-events: auto; cursor: pointer; }
.peek svg { display: block; width: 100%; height: auto; overflow: visible; }
.peek .pb { fill: #f7b3c6; } .peek .pb2 { fill: #f39ab4; }
.peek { transition: translate 700ms cubic-bezier(.3,1.4,.5,1); }
.peek-ftr { right: clamp(12px, 4vw, 60px); bottom: 0; translate: 0 34%; }
.peek-ftr:hover, .peek-ftr.up { translate: 0 6%; }
.ftr { position: relative; }
.peek-reach { right: -2vw; top: clamp(30px, 5vw, 70px); width: clamp(140px, 15vw, 220px); rotate: -14deg; translate: 30% 0; }
.peek-reach:hover, .peek-reach.up { translate: 6% 0; }
.ch-reach { overflow: hidden; }
.peek.boing svg { animation: boing .7s cubic-bezier(.3,.7,.4,1); transform-origin: 50% 100%; }
@keyframes boing { 15% { transform: scale(1.06,.92); } 40% { transform: scale(.95,1.06) translateY(-10px); } 65% { transform: scale(1.02,.98); } }
@media (max-width: 760px) { .peek-reach { display: none; } .peek-ftr { width: 120px; } }
@media (prefers-reduced-motion: reduce) { .peek { transition: none; } .peek.boing svg { animation: none; } }
.ftr { overflow: hidden; }
.peek-ftr { right: auto; left: clamp(330px, 26vw, 420px); width: clamp(130px, 12vw, 190px); translate: 0 40%; } @media (max-width: 860px) { .peek-ftr { left: auto; right: 12px; width: 96px; translate: 0 45%; } }
@media (max-width: 1100px) {
.hz-set .co p { display: block; padding: 10px 14px; font-size: 13.5px; line-height: 1.4; overflow-wrap: normal; word-break: keep-all; }
.hz-set .co b { display: block; width: auto; margin-bottom: 2px; font-size: 11px; }
.co-list { gap: 6px; }
}
@media (max-width: 1100px) { .hz-cream figcaption { display: none; } .hz-cream img { height: 62vw; } .hz-cream::before { top: calc(62vw - 12px); } }
.hz-nav button:focus { outline: none; } .kbd .hz-nav button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; } .hz-item .pk-face img, .hz-cream img { transform: none; }
@media (max-width: 1100px) { .hero-z { height: auto !important; min-height: 0 !important; } }
@media (min-width: 600px) and (max-width: 1100px) { .hero-z .giants { width: min(560px, 64vw) !important; height: min(520px, 60vw) !important; margin-inline: auto !important; } .co-list { max-width: 560px; left: 0; right: 0; margin-inline: auto; } }
@media (max-width: 1100px) {
.hero-z { padding-bottom: 150px !important; }
.hero-z .giants { margin-top: 120px !important; }
.co-list { position: absolute !important; inset: -112px 0 -128px 0 !important; top: -112px !important; display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "z i" ". ." "d ."; gap: 0 18px; pointer-events: none; max-width: none !important; margin: 0 !important; }
.hz-set .co { position: relative !important; inset: auto !important; transform: none !important; max-width: none; background: none; }
.hz-set .co-z { grid-area: z; } .hz-set .co-i { grid-area: i; text-align: right; } .hz-set .co-d { grid-area: d; align-self: end; }
.hz-set .co .plus { display: none !important; }
.hz-set .co p { display: block !important; background: none !important; box-shadow: none !important; padding: 0 !important; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); max-width: 15em; }
.hz-set .co-i p { margin-left: auto; }
.hz-set .co b { display: block !important; width: auto !important; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #e2614c; margin-bottom: 4px; }
.hz-set .co::after { content: ""; position: absolute; width: 1.5px; background: #e2614c; opacity: .7; }
.hz-set .co::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e2614c; }
.hz-set .co-z::after { left: 18px; top: calc(100% + 6px); height: 34px; } .hz-set .co-z::before { left: 15.25px; top: calc(100% + 40px); }
.hz-set .co-i::after { right: 18px; top: calc(100% + 6px); height: 34px; } .hz-set .co-i::before { right: 15.25px; top: calc(100% + 40px); }
.hz-set .co-d::after { left: 18px; bottom: calc(100% + 6px); height: 34px; } .hz-set .co-d::before { left: 15.25px; bottom: calc(100% + 40px); }
}
@media (max-width: 1100px) { .hero-z .giants { margin-top: 0; } .hero-z { padding-bottom: 0 !important; } .hz-set .co p { max-width: 46vw; } }
@media (max-width: 1100px) { .hz-set .co-z, .hz-set .co-i { width: calc(50% - 8px); } .hz-set .co-z p, .hz-set .co-i p { max-width: none !important; width: 100%; } }
.chan b { overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
@media (max-width: 700px) { .reach-ch .chan li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .reach-ch .chan span { text-align: left; } }
.hz-nav button { position: relative; }
.hz-nav button::after { content: ""; position: absolute; inset: -12px -2px; }
.hdr-logo { display: inline-flex; align-items: center; min-height: 44px; }
.ftr a { display: inline-block; padding: 6px 0; }
.pc-jump { position: sticky; top: 60px; z-index: 20; background: color-mix(in srgb, var(--paper, #fbf7f2) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line, #eee3da); margin-bottom: 8px; }
.pc-jump .wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.pc-jump .wrap::-webkit-scrollbar { display: none; }
.pc-jump a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink, #1e1814); color: var(--ink, #1e1814); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pc-jump a small { font-size: 12px; font-weight: 700; opacity: .55; }
.pc-jump a.on, .pc-jump a:hover { background: var(--ink, #1e1814); color: #fff; }
.pc-group { scroll-margin-top: 130px; }
.crumbs a, nav.crumbs a, .bc a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
@media (max-width: 1100px) { .hero-z .co-list { transition: opacity .35s ease; } .hero-z:not(.co-ready) .co-list { opacity: 0; } }
.ftr .fc-mail { margin-top: 12px; padding: 9px 16px; font-size: 14px; }
.ftr .fc-ig { padding: 8px 15px; }
@media (max-width: 700px) { .ftr .fc-mail { font-size: 13.5px; padding: 8px 14px; } }
.reach-map .map { position: relative; }
.map-base { display: block; width: 100%; height: auto; }
.map-arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.ftr .ftr-in { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
.ftr .ftr-in > * { max-width: none; flex: none; align-self: start; }
@media (max-width: 1100px) { .ftr .ftr-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ftr .ftr-brand { grid-column: 1 / -1; } }
@media (max-width: 700px) { .ftr .ftr-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.menu a[aria-current="page"] { color: #e2614c; }
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink, #1e1814); color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgb(30 24 20 / .22); opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .25s, translate .25s, background .2s; }
.to-top.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover { background: #e2614c; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }