/* 앱의 공통 의미 토큰으로 추가한 고객 이야기 영역을 표현한다. */
.choice-gallery{min-width:0;width:100%;max-width:640px;margin-inline:auto}
.choice-viewport{display:grid;position:relative;isolation:isolate;overflow:visible;padding:40px 20px 8px;border-radius:22px;touch-action:pan-y;user-select:none;cursor:grab}
.choice-viewport:active{cursor:grabbing}
.choice-viewport:focus-visible{outline:3px solid var(--act);outline-offset:4px}
.choice-viewport .choice-slide{grid-area:1 / 1;width:100%;min-width:0;box-sizing:border-box;border:10px solid var(--bg);border-radius:28px;transform-origin:center;box-shadow:0 5px 0 var(--line),var(--shadow-pop)}
.choice-viewport .choice-slide>img{border-radius:17px 17px 0 0}
.choice-slide[hidden],.choice-controls[hidden]{display:none!important}
.choice-topic{position:absolute;top:16px;left:16px;z-index:1;background:var(--ok);color:var(--fg-on-dark);padding:7px 12px;border-radius:999px;font-size:.8125rem;font-weight:650}
.choice-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.choice-selectors{display:flex;gap:0}
.choice-controls button{display:grid;place-items:center;font:inherit;min-width:44px;min-height:44px;padding:8px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--fg-on-dark);cursor:pointer}
.choice-selectors button span{width:7px;height:7px;border-radius:999px;background:var(--fg-on-dark);opacity:.4;transition:width .3s var(--ease-out),opacity .3s var(--ease-out)}
.choice-selectors button[aria-pressed=true] span{width:22px;opacity:1}
.choice-controls .choice-prev,.choice-controls .choice-next{border-color:var(--ok-line);font-size:1.125rem}
.choice-controls button:focus-visible{outline:3px solid var(--act);outline-offset:3px}
@media(max-width:600px){.choice-viewport .choice-slide{border-width:7px;border-radius:24px}.choice-controls{gap:5px}.choice-topic{font-size:.75rem}.choice-selectors button{min-width:36px;padding:6px}}
@media(prefers-reduced-motion:reduce){.choice-selectors button span{transition:none}}
.landing .choice-copy h2{font-size:clamp(2.15rem,3.7vw,3.65rem)}
.landing .choice-copy>p:not(.landing-eyebrow){font-size:1.0625rem;line-height:1.9}
.landing .choice-copy .choice-inner-voice{color:var(--fg-on-dark);font-size:1.25rem;font-weight:600;margin:28px 0 0}
.choice-materials{position:relative;margin:0;border-radius:22px;overflow:hidden;min-height:max(430px,27rem);background:var(--bg-panel)}
.choice-materials>img{display:block;width:100%;height:max(430px,27rem);object-fit:cover;object-position:60% center}
.choice-image-note{position:absolute;top:16px;right:16px;padding:6px 10px;background:var(--bg);border-radius:999px;color:var(--fg-sub);font-size:.75rem}
.choice-question{position:absolute;padding:16px 18px;max-width:calc(100% - 40px);background:var(--bg);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-pop);color:var(--fg)}
.choice-question>span{display:block;color:var(--fg-sub);font-size:.75rem;margin-bottom:8px}
.choice-question>strong{font-size:1.0625rem;line-height:1.5;font-weight:650;display:block}
.choice-question-floor{top:62px;left:22px;transform:rotate(-4deg)}
.choice-question-wall{bottom:112px;right:22px;transform:rotate(3deg)}
.choice-materials figcaption{position:absolute;bottom:0;left:0;right:0;padding:18px 20px;background:var(--bg);color:var(--fg);font-size:1.125rem;font-weight:600;line-height:1.55;word-break:keep-all}
@media(max-width:1000px){#prezip-story .landing-story-grid{grid-template-columns:1fr;gap:35px}.choice-materials{max-width:640px;width:100%;margin-inline:auto}}
@media(max-width:600px){.choice-materials{min-height:max(385px,25rem)}.choice-materials>img{height:max(385px,25rem)}.choice-question{padding:14px}.choice-question-floor{left:16px;top:55px}.choice-question-wall{right:16px;bottom:112px}.choice-question>strong{font-size:1rem}.choice-materials figcaption{font-size:1rem;padding:16px}.landing .choice-copy>p:not(.landing-eyebrow){font-size:1rem}.landing .choice-copy .choice-inner-voice{font-size:1.125rem}}
.comparison-story{background:color-mix(in srgb,var(--ok) 12%,var(--bg))}
.comparison-story.landing-chapter{padding:104px max(6%,calc(50% - 700px))}
.comparison-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center;gap:64px}
.comparison-visual,.comparison-copy{min-width:0}
.landing .comparison-copy h2{font-size:clamp(2rem,3.1vw,3.25rem);line-height:1.2}
.landing .comparison-copy>p:not(.landing-eyebrow){font-size:1.0625rem;line-height:1.9;margin-bottom:0}
.comparison-story h2 em{color:var(--ok)}
.comparison-scene{position:relative;width:100%;margin:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--bg);box-shadow:var(--shadow-card)}
.comparison-scene::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ok-line);pointer-events:none}
.comparison-scene>img{display:block;width:100%;height:auto}
.comparison-captions{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;align-items:stretch}
.comparison-captions>div{min-width:0;padding:24px;background:var(--bg-panel)}
.comparison-captions>div+div{background:var(--ok);color:var(--fg-on-dark)}
.comparison-captions span{display:block;font-size:.9375rem;font-weight:650;color:var(--fg);margin-bottom:12px}
.comparison-captions h3{font-size:1.5rem;font-weight:700;letter-spacing:-.04em;line-height:1.4;margin:0;word-break:keep-all}
.landing .comparison-captions p{font-size:1rem;line-height:1.65;margin:12px 0 0;color:var(--fg);word-break:keep-all}
.comparison-captions>div+div span,.comparison-captions>div+div h3,.landing .comparison-captions>div+div p{color:var(--fg-on-dark)}
.comparison-answer{margin-top:24px;padding-top:20px;border-top:1px solid var(--ok-line)}
.comparison-answer strong{font-size:1.125rem;line-height:1.5;color:var(--ok)}
.landing .comparison-answer p{font-size:1rem;line-height:1.65;color:var(--fg);margin:8px 0 0;word-break:keep-all}
.landing .comparison-note{font-size:.75rem;color:var(--fg-sub);margin:14px 0 0;text-align:center}
@media(max-width:1000px){.comparison-layout{grid-template-columns:1fr;gap:36px}.comparison-visual{width:100%;max-width:780px;margin-inline:auto}.comparison-copy{width:100%;max-width:640px;margin-inline:auto}}
@media(max-width:600px){.comparison-story.landing-chapter{padding:64px 7%}.comparison-layout{gap:30px}.landing .comparison-copy h2{font-size:2rem}.landing .comparison-copy>p:not(.landing-eyebrow){font-size:1rem}.comparison-scene{border-radius:16px}.comparison-captions>div{padding:16px 12px}.comparison-captions span{font-size:.875rem}.comparison-captions h3{font-size:1.125rem}.landing .comparison-captions p{font-size:.9375rem}.landing .comparison-note{font-size:.6875rem}}
.benefit-explainer button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg-sub);padding:12px 18px;font-size:.875rem;min-height:44px}
.benefit-explainer button[aria-pressed=true]{background:var(--ok);border-color:var(--ok);color:var(--fg-on-dark)}
.benefit-explainer button:focus-visible{outline:3px solid var(--act);outline-offset:4px}


.customer-benefits.landing-chapter{padding:88px max(6%,calc(50% - 700px))}
.customer-benefits .landing-centered .landing-eyebrow{margin-bottom:18px}
.customer-benefits .landing-centered h2{margin-bottom:20px}
.customer-benefits .landing-centered>p:last-child{margin-bottom:0}
.landing .customer-benefits .landing-footnote{margin-top:24px}
.benefit-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:32px}
.benefit-card{border-radius:24px;overflow:hidden;min-width:0;background:var(--bg)}
.benefit-copy{padding:22px}
.landing .benefit-label{font-size:.8125rem;color:var(--ok);margin:0 0 10px;font-weight:650}
.benefit-card h3{font-size:clamp(1.35rem,2.1vw,1.85rem);letter-spacing:-.045em;line-height:1.3;margin:0 0 12px;word-break:keep-all}
.landing .benefit-copy>p:not(.benefit-label){font-size:.9375rem;line-height:1.65;margin:0;color:var(--fg-sub)}
.benefit-room{grid-column:span 8;display:flex;flex-direction:column}
.benefit-room-image{height:420px;min-height:420px;flex:1;position:relative;overflow:hidden}
.benefit-room-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 65%;display:block}
.benefit-image-label{position:absolute;right:16px;top:16px;font-size:.75rem;border-radius:999px;padding:8px 11px;background:var(--bg);color:var(--fg-sub)}
.benefit-room-pin{position:absolute;left:22px;bottom:24px;max-width:calc(100% - 44px);font-size:.875rem;border-radius:12px;padding:12px 15px;background:var(--bg);box-shadow:var(--shadow-card);line-height:1.5}
.benefit-budget{grid-column:span 4;align-self:stretch;display:flex;flex-direction:column;background:var(--ok);color:var(--fg-on-dark);padding-bottom:12px}
.benefit-budget .benefit-copy{padding-block:16px}
.landing .benefit-budget .benefit-copy>p{color:var(--fg-on-dark)}
.benefit-estimate{margin:auto 20px 12px;background:var(--bg);color:var(--fg);padding:14px;border-radius:14px;transform:rotate(-1deg)}
.benefit-estimate-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9375rem}
.benefit-estimate-top span{font-size:.75rem;color:var(--fg-sub)}
.landing .benefit-estimate>p{font-size:.8125rem;color:var(--note);margin:12px 0 4px}
.benefit-estimate>strong{display:block;font-size:clamp(1.6rem,2.3vw,2.25rem);letter-spacing:-.06em;white-space:nowrap}
.benefit-estimate>strong small{font-size:.9375rem;margin-left:7px;letter-spacing:-.02em}
.benefit-estimate dl{margin:10px 0 0}
.benefit-estimate dl>div{display:flex;gap:12px;border-top:1px solid var(--line-soft);padding:5px 0;font-size:.8125rem}
.benefit-estimate dt{color:var(--note);flex-shrink:0}
.benefit-estimate dd{margin:0}
.landing .benefit-estimate .estimate-disclaimer{font-size:.75rem;color:var(--fg-sub);margin:8px 0 0}
.benefit-guide{grid-column:span 5;position:relative;align-self:stretch}
.benefit-guide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.benefit-guide .benefit-copy{position:relative;padding-block:18px}
.landing .benefit-guide .benefit-copy>p:not(.benefit-label){color:var(--fg)}
.benefit-explainer{margin-top:38px;padding:12px;background:var(--bg);border-radius:14px;box-shadow:var(--shadow-card)}
.benefit-explainer>div{display:flex;gap:6px;flex-wrap:wrap}
.benefit-explainer button{padding:9px 12px;font-size:.8125rem}
.landing .benefit-explainer p{font-size:.875rem;line-height:1.65;color:var(--fg);margin:8px 0 0;min-height:3.3em}
.benefit-choice{grid-column:span 7;background:var(--ok-soft);display:flex;flex-direction:column}
.benefit-choice .benefit-copy{padding-block:18px}
.benefit-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:auto 22px 18px}
.benefit-offers-title{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:0;font-size:.875rem;flex-wrap:wrap}
.benefit-offers-title>span{font-size:.75rem;color:var(--fg-sub)}
.benefit-offer{display:flex;align-items:center;min-width:0;gap:10px;border:1px solid var(--line-soft);background:var(--bg);border-radius:12px;padding:10px;margin-bottom:0}
.benefit-company{font-size:.8125rem;color:var(--ok);padding:8px;border-radius:8px;background:var(--ok-soft);white-space:nowrap}
.benefit-offer b{font-size:.9375rem;display:block}
.benefit-offer small{font-size:.8125rem;color:var(--fg-sub);display:block;margin-top:5px}
.benefit-offer-status{display:none}
.landing .benefit-offers>p{grid-column:1 / -1;color:var(--ok);font-size:.8125rem;margin:0}
@media(max-width:900px){.benefit-grid{grid-template-columns:1fr}.benefit-card{grid-column:1}.benefit-estimate{max-width:500px}.benefit-room-image{height:360px;min-height:360px;flex:auto}.benefit-card h3{font-size:1.65rem}.benefit-copy{padding:20px}.benefit-offers{margin:0 20px 20px}}
@media(max-width:600px){.customer-benefits.landing-chapter{padding-block:56px}.benefit-grid{margin-top:26px;gap:14px}.benefit-copy{padding:20px 18px}.benefit-room-image{height:300px;min-height:300px}.benefit-room-pin{font-size:.8125rem;left:14px;max-width:calc(100% - 28px)}.benefit-estimate{margin-inline:16px;padding:14px}.benefit-estimate>strong{font-size:1.9rem}.benefit-offers{margin:0 18px 18px}.benefit-offer{gap:10px;padding:10px}.benefit-company{padding:7px;font-size:.75rem}.benefit-offer-status{display:none}.benefit-offer small{font-size:.75rem}}


@media(max-width:600px){.benefit-offers{grid-template-columns:1fr}}

/* 선택과 결과를 한 흐름으로 보여준다. */
.solution-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.solution-input{padding:22px;border:1px solid var(--ok-line);border-radius:20px;background:var(--bg)}
.solution-step{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.solution-step>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ok);color:var(--fg-on-dark);font-size:.75rem;flex-shrink:0}
.solution-step h3{font-size:1.0625rem;line-height:1.4;margin:0;letter-spacing:-.03em;word-break:keep-all}
.solution-plan{display:flex;align-items:center;gap:18px;color:var(--ok)}
.solution-plan svg{width:48%;max-width:190px;height:auto;flex-shrink:0}
.landing .solution-plan p{font-size:.9375rem;line-height:1.5;margin:0;color:var(--fg)}
.solution-plan small{display:block;font-size:.75rem;color:var(--fg-sub);margin-top:8px}
.solution-materials{display:flex;gap:16px}
.solution-materials>span{display:flex;align-items:center;gap:9px;font-size:.875rem;line-height:1.5;flex:1}
.solution-materials i{width:46px;height:56px;border-radius:8px;border:1px solid var(--line);flex-shrink:0}
.solution-oak{background:url('assets/bento/material-board.png') 48% 50% / 240px auto}
.solution-ivory{background:var(--bg);box-shadow:inset 0 0 14px var(--line-soft)}
.solution-works{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.solution-works li{padding:8px 12px;border-radius:8px;background:var(--ok-soft);color:var(--ok);font-size:.875rem;font-weight:600}
.landing .solution-input-note{font-size:.875rem;line-height:1.5;margin:12px 0 0;color:var(--fg-sub)}
.solution-connection{text-align:center;margin:22px 0 0;color:var(--ok)}
.solution-connection>span{font-size:1.75rem}
.landing .solution-connection p{margin:6px 0 0;font-size:1.0625rem;line-height:1.6;color:var(--fg)}
@media(max-width:1100px){.solution-input{padding:18px}.solution-materials{gap:8px}.solution-materials i{width:32px}.solution-step h3{font-size:1rem}}
@media(max-width:900px){.solution-inputs{grid-template-columns:1fr}.solution-plan svg{max-width:150px}.solution-materials>span{flex:0 1 auto}.solution-materials{gap:24px}.solution-step{margin-bottom:12px}.solution-materials i{width:46px}.benefit-room,.benefit-budget{grid-column:1}.benefit-estimate{margin-top:0}}
@media(max-width:600px){.solution-inputs{margin-top:28px;gap:12px}.solution-input{padding:18px}.landing .solution-connection p{font-size:1rem}.benefit-room-pin{line-height:1.5}.customer-benefits.landing-chapter{padding-inline:7%}}