:root {
  color-scheme: light;
  --navy: #111111;
  --navy-soft: #111111;
  --gold: #aaaaaa;
  --gold-light: #dddddd;
  --ink: #111111;
  --muted: #333333;
  --paper: #f5f5f5;
  --line: #dddddd;
  --card: #ffffff;
  --shadow: 0 18px 45px rgba(17,17,17, .08);
}
* { box-sizing: border-box; }
html { font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0; color: var(--ink); background: #dddddd; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #aaaaaa; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .5; }
.app-shell { width: min(1440px, 100%); margin: auto; min-height: 100vh; display: grid; grid-template-columns: minmax(310px, 35%) minmax(0,1fr); box-shadow:none; }
.brand-pane { position: relative; overflow: hidden; min-height: 100vh; padding: 40px 37px 34px; color: #f5f5f5; background: linear-gradient(145deg,#111111 0%,#111111 48%,#111111 100%); display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.brand-pane:before { content: ""; position: absolute; width: 510px; height: 510px; left: -220px; top: 15%; border-radius:var(--eve-radius); border: 1px solid rgba(17,17,17, .13); box-shadow:none; z-index: -1; }
.brand-pane:after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 98% 81%,rgba(17,17,17,.11),transparent 48%); pointer-events: none; z-index: -1; }
.brand-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.brand-wordmark { display: flex; gap: 13px; align-items: center; letter-spacing: .14em; }
.brand-icon { border: 1px solid rgba(17,17,17,.72); border-radius:var(--eve-radius); width: 43px; height: 43px; display: grid; place-items: center; font-family: Georgia, serif; font-size: 25px; color: var(--gold-light); }
.brand-wordmark strong { display: block; font-size: 17px; font-family: Georgia,serif; font-weight: 500; }
.brand-wordmark small { display: block; letter-spacing: .3em; font-size: 8px; margin-top: 5px; color: rgba(17,17,17,.63); }
.demo-badge { border-radius:var(--eve-radius); border: 1px solid rgba(17,17,17,.22); padding: 9px 11px; font-size: 8px; letter-spacing: .14em; color: #aaaaaa; }
.brand-middle { padding: 34px 0 23px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #666666; }
.eyebrow.light { color: #aaaaaa; }
.brand-middle h1 { font-size: clamp(32px,3vw,45px); font-weight: 450; line-height: 1.37; letter-spacing: -.06em; margin: 20px 0 21px; }
.brand-middle h1 em { color: var(--gold-light); font-family: Georgia, "Noto Serif KR", serif; font-style: normal; }
.brand-middle p { font-size: 15px; line-height: 1.9; color: rgba(17,17,17,.7); word-break: keep-all; }
.portrait-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 28px; transform: rotate(-2deg); }
.portrait-strip img { display: block; width: 100%; height: clamp(106px,13vw,164px); object-fit: cover; object-position: center 13%; border-radius:var(--eve-radius); border: 2px solid rgba(17,17,17,.13); filter: saturate(.83); }
.portrait-strip img:nth-child(2) { transform: translateY(13px); }
.portrait-strip img:nth-child(3) { transform: translateY(5px); }
.side-divider { height: 1px; background: rgba(17,17,17,.16); margin-bottom: 21px; }
.side-status { color: #f5f5f5; font-size: 15px; line-height: 1.6; }
.side-note { margin-top: 12px; color: rgba(17,17,17,.48); font-size: 11px; line-height: 1.65; }
.content-pane { padding: 30px 5.1% 26px; background: var(--paper); display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 18px; }
.topbar-label { font-size: 10px; font-weight: 700; letter-spacing: .15em; color: #666666; }
.tiny-dot { display: inline-block; width: 7px; height: 7px; border-radius:var(--eve-radius); background: var(--gold); vertical-align: 1px; margin-right: 6px; }
.reset-link { border: none; background: transparent; color: #333333; font-size: 12px; padding: 8px; white-space: nowrap; }
.reset-link:hover { color: var(--ink); }
.progress-wrap { margin: 27px 0 6px; }
.progress-wrap[hidden] { display: none; }
.progress-caption { display: flex; justify-content: space-between; color: #666666; font-size: 11px; font-weight: 700; letter-spacing: .03em; margin-bottom: 12px; }
.progress-caption span:first-child { color: #666666; letter-spacing: .1em; }
.progress-track { background: #dddddd; height: 4px; width: 100%; border-radius:var(--eve-radius); overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, #666666,#aaaaaa); height: 100%; width: 0; border-radius:var(--eve-radius); transition: width .3s ease; }
.screen { flex: 1; display: flex; flex-direction: column; justify-content: center; animation: fade-in .25s ease; padding: 22px 0 10px; }
@keyframes fade-in { from { opacity: .3; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.app-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line); padding-top: 17px; margin-top: 22px; color: #666666; font-size: 10px; }
.welcome-wrap { max-width: 700px; }
.headline { letter-spacing: -.065em; font-size: clamp(34px,4vw,57px); font-weight: 570; line-height: 1.28; margin: 17px 0 23px; word-break: keep-all; }
.headline b { color: #666666; font-weight: 570; }
.welcome-copy { color: var(--muted); font-size: 16px; line-height: 1.95; margin: 0 0 28px; word-break: keep-all; }
.feature-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 32px; }
.feature-chips span { background: #f5f5f5; border: 1px solid #dddddd; color: #333333; padding: 10px 13px; font-size: 13px; border-radius:var(--eve-radius); }
.primary-btn { display: inline-flex; justify-content: center; align-items: center; gap: 19px; background: var(--navy); border: 1px solid var(--navy); color: white; padding: 17px 24px; min-height: 55px; border-radius:var(--eve-radius); font-size: 16px; font-weight: 750; box-shadow:none; transition: transform .15s, background .15s; }
.primary-btn:hover { transform: translateY(-2px); background: #111111; }
.primary-btn:active { transform: translateY(0); }
.primary-btn svg { width: 18px; height: 18px; }
.ghost-btn { border: 1px solid #dddddd; background: white; border-radius:var(--eve-radius); padding: 17px 22px; min-height: 55px; color: #333333; font-weight: 700; }
.ghost-btn:hover { background: #f5f5f5; }
.step-content { max-width: 900px; }
.step-content h2 { font-size: clamp(27px,3vw,39px); letter-spacing: -.055em; line-height: 1.35; font-weight: 680; margin: 13px 0 10px; word-break: keep-all; }
.step-subtitle { color: var(--muted); line-height: 1.75; font-size: 14px; margin: 0 0 24px; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.choice-item { position: relative; width: 100%; text-align: left; background: white; border: 1.5px solid #dddddd; border-radius:var(--eve-radius); padding: 19px 18px; min-height: 94px; display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.04em; transition: border-color .15s, background .15s, box-shadow .15s; word-break: keep-all; }
.choice-item:hover { border-color: #666666; background: #ffffff; }
.choice-item.selected { border-color: #666666; background: #f5f5f5; box-shadow:none; }
.choice-mark { flex: 0 0 25px; width: 25px; height: 25px; border-radius:var(--eve-radius); border: 1.5px solid #dddddd; display: grid; place-items: center; color: transparent; font-size: 13px; font-weight: 900; }
.choice-item.selected .choice-mark { background: #666666; border-color: #666666; color: white; }
.styles-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.style-card { position: relative; min-width: 0; border: 1.5px solid #dddddd; overflow: hidden; background: white; border-radius:var(--eve-radius); text-align: left; padding: 0; transition: border-color .15s, transform .15s; }
.style-card:hover { transform: translateY(-2px); }
.style-card.selected { border: 2px solid #666666; box-shadow:none; }
.style-card .photo-wrap { overflow: hidden; height: clamp(170px,23vw,265px); background: #dddddd; position: relative; }
.style-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 14%; transition: transform .2s; }
.style-card:hover img { transform: scale(1.025); }
.style-card .selected-badge { position: absolute; top: 10px; right: 10px; background: var(--navy); color: white; border-radius:var(--eve-radius); width: 30px; height: 30px; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.style-label { display: block; padding: 15px 13px 17px; font-size: 15px; font-weight: 740; text-align: center; letter-spacing: -.04em; }
.style-unknown { margin-top: 14px; width: 100%; text-align: center; border-radius:var(--eve-radius); background: #f5f5f5; color: #333333; border: 1px solid #dddddd; min-height: 50px; font-weight: 650; }
.style-unknown.selected { background: #f5f5f5; border-color: #666666; color: #333333; }
.step-actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 30px; }
.step-actions .primary-btn { margin-left: auto; }
.note { margin-top: 19px; display: flex; gap: 8px; align-items: center; font-size: 12px; color: #666666; }
.note-icon { display: inline-grid; place-items: center; background: #f5f5f5; color: #666666; border-radius:var(--eve-radius); width: 20px; height: 20px; font-size: 12px; font-weight: 800; flex: 0 0 20px; }
.result-wrap { padding-top: 6px; width: 100%; }
.result-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.result-heading h2 { margin: 9px 0 8px; font-size: clamp(26px,3vw,37px); letter-spacing: -.055em; line-height: 1.28; }
.result-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.pill-success { font-size: 11px; padding: 9px 12px; border-radius:var(--eve-radius); color: #333333; background: #f5f5f5; font-weight: 800; }
.result-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tab-btn { border: none; padding: 14px 14px 15px; background: transparent; color: #666666; font-size: 14px; font-weight: 750; border-bottom: 3px solid transparent; }
.tab-btn.active { color: var(--ink); border-bottom-color: #666666; }
.recommend-hero { border: 1px solid #dddddd; border-radius:var(--eve-radius); background: linear-gradient(130deg,#f5f5f5,#f5f5f5); padding: 22px; display: grid; gap: 7px; }
.recommend-hero .eyebrow { font-size: 10px; }
.recommend-hero h3 { margin: 0; font-size: 25px; letter-spacing: -.05em; }
.recommend-hero p { color: #333333; font-size: 13px; line-height: 1.8; margin: 1px 0 0; }
.plans-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 13px; }
.plan-card { padding: 18px 17px; border: 1px solid var(--line); border-radius:var(--eve-radius); background: #ffffff; }
.plan-chip { display: inline-block; font-size: 10px; font-weight: 750; color: #666666; background: #f5f5f5; padding: 6px 10px; border-radius:var(--eve-radius); }
.plan-card h4 { font-size: 17px; margin: 12px 0 6px; letter-spacing: -.03em; }
.plan-card p { color: #333333; font-size: 12px; line-height: 1.72; margin: 0; }
.result-lower { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.small-panel { border: 1px solid var(--line); border-radius:var(--eve-radius); padding: 17px; background: white; }
.small-panel h4 { margin: 0 0 10px; font-size: 14px; }
.small-panel ul { margin: 0; padding-left: 18px; color: #333333; line-height: 1.72; font-size: 12px; }
.small-panel li + li { margin-top: 5px; }
.warning-panel { margin-top: 13px; padding: 13px 17px; background: #f5f5f5; border: 1px solid #dddddd; border-radius:var(--eve-radius); color: #333333; font-size: 12px; line-height: 1.75; }
.brief-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.brief-card { padding: 17px; border-radius:var(--eve-radius); background: white; border: 1px solid var(--line); }
.brief-card.wide { grid-column: 1 / -1; }
.brief-card .brief-label { font-size: 11px; color: #666666; font-weight: 800; margin-bottom: 10px; }
.brief-card strong { font-size: 16px; line-height: 1.65; }
.brief-card p { color: #333333; font-size: 13px; line-height: 1.8; margin: 0; }
.brief-card ul { margin: 0; padding-left: 18px; color: #333333; font-size: 13px; line-height: 1.8; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.result-actions .primary-btn { padding: 14px 20px; min-height: 48px; font-size: 13px; }
.result-actions .ghost-btn { padding: 14px 20px; min-height: 48px; font-size: 13px; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(240px,31%) minmax(0,1fr); }
  .brand-pane { padding: 27px 22px; }
  .brand-wordmark strong { font-size: 14px; }
  .demo-badge { display: none; }
  .content-pane { padding: 22px 4%; }
  .choice-item { font-size: 14px; min-height: 83px; padding: 13px; }
  .style-card .photo-wrap { height: 190px; }
  .style-label { font-size: 12px; padding: 11px 7px; }
}
@media (max-width: 680px) {
  .app-shell { display: block; }
  .brand-pane { min-height: auto; padding: 15px 20px; }
  .brand-top { gap: 10px; }
  .brand-wordmark strong { font-size: 14px; }
  .brand-icon { width: 32px; height: 32px; font-size: 21px; }
  .brand-middle, .brand-bottom { display: none; }
  .content-pane { min-height: calc(100dvh - 70px); padding: 20px 18px 18px; }
  .topbar-label { font-size: 9px; }
  .screen { justify-content: flex-start; padding-top: 35px; }
  .headline { font-size: 37px; }
  .welcome-copy { font-size: 14px; }
  .feature-chips span { font-size: 12px; }
  .step-content h2 { font-size: 28px; }
  .choice-grid { gap: 9px; }
  .choice-item { min-height: 89px; padding: 11px; font-size: 13px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .choice-mark { width: 20px; height: 20px; flex-basis: 20px; }
  .styles-grid { gap: 8px; }
  .style-card .photo-wrap { height: 160px; }
  .style-label { font-size: 11px; }
  .plans-grid, .result-lower { grid-template-columns: 1fr; }
  .brief-grid { grid-template-columns: 1fr; }
  .brief-card.wide { grid-column: auto; }
  .app-footer { font-size: 9px; }
}
@media print {
  .brand-pane, .topbar, .progress-wrap, .app-footer, .result-tabs, .result-actions { display: none !important; }
  .app-shell { display: block; min-height: auto; box-shadow:none; }
  .content-pane { padding: 0; }
  .screen { padding: 0; }
  .result-wrap { width: 100%; }
}

/* EVE v18 순서 기반 고객경험 통합 데모 */
.hub-wrap { max-width: 850px; }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; margin-top: 25px; }
.portal-card { position: relative; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; border: 1px solid #dddddd; background: white; border-radius:var(--eve-radius); padding: 21px 22px 22px; min-height: 198px; box-shadow:none; transition: transform .16s, border-color .16s; }
.portal-card:hover { transform: translateY(-3px); border-color: #aaaaaa; }
.portal-card.featured { background: linear-gradient(132deg,#111111,#111111); border-color: #111111; color: #ffffff; }
.portal-card .portal-symbol { width: 40px; height: 40px; border-radius:var(--eve-radius); background: #f5f5f5; color: #666666; display: grid; place-items: center; font-size: 23px; }
.portal-card.featured .portal-symbol { background: #dddddd; color: #111111; }
.portal-card .portal-kicker { position: absolute; top: 28px; right: 22px; color: #aaaaaa; font-size: 10px; letter-spacing: .19em; font-weight: 800; }
.portal-card strong { font-size: 20px; font-weight: 780; letter-spacing: -.045em; }
.portal-card small { font-size: 13px; color: #666666; line-height: 1.6; word-break: keep-all; }
.portal-card.featured small { color: #dddddd; }
.portal-card .portal-arrow { position: absolute; bottom: 20px; right: 22px; font-size: 21px; color: #666666; }
.portal-card.featured .portal-arrow { color: #dddddd; }
.inline-link { margin-top: 14px; }
.gender-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.gender-card-v2 { min-height: 245px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1.5px solid #dddddd; border-radius:var(--eve-radius); background: white; padding: 25px; text-align: left; transition: background .15s,border-color .15s; }
.gender-card-v2:hover,.gender-card-v2.selected { background: #f5f5f5; border-color: #666666; }
.gender-illustration { display: grid; place-items: center; width: 62px; height: 62px; border-radius:var(--eve-radius); background: #f5f5f5; color: #666666; font: 32px Georgia,serif; margin-bottom: 22px; }
.gender-card-v2 strong { font-size: 22px; letter-spacing: -.04em; }
.gender-card-v2 small { color: #666666; font-size: 13px; margin-top: 7px; }
.gender-card-v2 span:last-child { color: #666666; font-weight: 750; margin-top: 20px; }
.length-grid-v2 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.length-card { min-width: 0; border: 1.5px solid #dddddd; background: white; border-radius:var(--eve-radius); padding: 15px 9px 19px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: border-color .15s, background .15s; }
.length-card:hover,.length-card.selected { border-color: #666666; background: #f5f5f5; }
.length-card .length-code { font-family: Georgia,serif; font-size: 12px; color: #666666; margin: 15px 0 8px; }
.length-card strong { font-size: 15px; letter-spacing: -.04em; min-height: 38px; line-height: 1.35; word-break: keep-all; }
.length-card small { font-size: 11px; color: #666666; margin-top: 7px; line-height: 1.5; word-break: keep-all; }
.length-silhouette { position: relative; display: block; width: 100%; max-width: 140px; height: 150px; border-radius:var(--eve-radius); overflow: hidden; background: linear-gradient(160deg,#f5f5f5,#dddddd); }
.head-shape { position: absolute; width: 61px; height: 83px; border-radius:var(--eve-radius); background: #aaaaaa; left: 50%; transform: translateX(-50%); top: 33px; z-index: 2; box-shadow:none; }
.head-shape:after { content: ""; position: absolute; width: 76px; height: 58px; top: 81px; left: -7px; background: #666666; border-radius:var(--eve-radius); }
.hair-shape { position: absolute; z-index: 3; width: 84px; height: 89px; left: 50%; transform: translateX(-50%); top: 20px; background: #111111; border-radius:var(--eve-radius); clip-path: polygon(11% 0,89% 0,100% 69%,85% 93%,81% 26%,68% 18%,46% 24%,20% 18%,20% 88%,0 70%); }
.female-M .hair-shape { height: 125px; clip-path: polygon(11% 0,89% 0,100% 96%,79% 100%,81% 26%,65% 18%,45% 24%,20% 18%,20% 100%,0 96%); }
.female-L .hair-shape { height: 155px; clip-path: polygon(11% 0,89% 0,100% 100%,79% 100%,81% 26%,65% 18%,45% 24%,20% 18%,20% 100%,0 100%); }
.female-XL .hair-shape { height: 180px; width: 93px; clip-path: polygon(11% 0,89% 0,100% 100%,79% 100%,81% 26%,65% 18%,45% 24%,20% 18%,20% 100%,0 100%); }
.male-S .hair-shape,.male-M .hair-shape,.male-L .hair-shape { width: 73px; height: 66px; border-radius:var(--eve-radius); clip-path: polygon(11% 0,89% 0,100% 68%,80% 78%,81% 30%,65% 18%,45% 25%,20% 18%,20% 82%,0 70%); }
.male-M .hair-shape { height: 83px; width: 79px; }
.male-L .hair-shape { height: 115px; width: 88px; }
.subheading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 16px; margin: 12px 0 13px; }
.subheading strong { font-size: 16px; letter-spacing: -.04em; }
.subheading span { font-size: 11px; color: #666666; }
.space-top { margin-top: 28px !important; }
.style-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.style-chip { border-radius:var(--eve-radius); padding: 13px 16px; background: white; border: 1px solid #dddddd; color: #111111; font-weight: 650; font-size: 13px; }
.style-chip:hover,.style-chip.selected { background: #f5f5f5; color: #333333; border-color: #666666; }
.field-block { display: flex; flex-direction: column; gap: 9px; margin-top: 19px; min-width: 0; }
.field-block > span { font-size: 12px; font-weight: 700; color: #333333; }
.plain-input { display: block; min-width: 0; width: 100%; padding: 14px 15px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); border: 1px solid #dddddd; border-radius:var(--eve-radius); background: #ffffff; outline: none; }
.plain-input:focus { border-color: #666666; box-shadow:none; }
textarea.plain-input { resize: vertical; min-height: 78px; }
.info-ribbon { border-radius:var(--eve-radius); padding: 15px 16px; background: #f5f5f5; border: 1px solid #dddddd; color: #333333; font-size: 13px; line-height: 1.75; }
.two-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.option-tile { border: 1px solid #dddddd; background: #ffffff; text-align: left; border-radius:var(--eve-radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.option-tile strong { font-size: 15px; }
.option-tile small { color: #666666; font-size: 12px; line-height: 1.6; }
.option-tile.selected { background: #f5f5f5; border-color: #666666; }
.form-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.file-chooser { position: relative; display: inline-flex; align-items: center; justify-content: center; background: white; padding: 12px 18px; border-radius:var(--eve-radius); border: 1px dashed #aaaaaa; cursor: pointer; font-size: 13px; font-weight: 750; color: #333333; margin: 12px 0 0; }
.file-chooser input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chosen-file { border: 1px solid #dddddd; border-radius:var(--eve-radius); padding: 10px; display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.chosen-file img { width: 55px; height: 66px; object-fit: cover; border-radius:var(--eve-radius); }
.chosen-file span { min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: #333333; flex: 1; }
.chosen-file button { border: none; color: #333333; background: transparent; }
.result-feature { display: grid; grid-template-columns: 1fr 165px; align-items: stretch; gap: 16px; border-radius:var(--eve-radius); border: 1px solid #dddddd; background: linear-gradient(120deg,#f5f5f5,#f5f5f5); padding: 17px; }
.result-feature > div:first-child { padding: 13px 8px; }
.result-feature h3 { margin: 12px 0 7px; font-size: 24px; letter-spacing: -.05em; }
.result-feature p { color: #333333; font-size: 13px; line-height: 1.8; margin: 0 0 18px; }
.result-feature img { height: 204px; width: 100%; object-fit: cover; object-position: center 16%; border-radius:var(--eve-radius); }
.result-illustration { display: grid; place-items: center; background: #111111; color: #aaaaaa; font: 75px Georgia,serif; border-radius:var(--eve-radius); }
.small-panel p { color: #333333; font-size: 12px; line-height: 1.8; margin: 0; }
.module-wrap { max-width: 760px; }
.back-home { padding-left: 0; margin: 0 0 20px; }
.demo-confirm { padding: 16px 20px; border-radius:var(--eve-radius); background: #f5f5f5; border: 1px solid #dddddd; margin-top: 23px; color: #333333; }
.demo-confirm p { font-size: 13px; line-height: 1.7; margin: 7px 0 0; }
.file-label { font-size: 12px; font-weight: 700; letter-spacing: .01em; color: #333333; margin: 12px 0 8px; }
.tick-label { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #111111; cursor: pointer; margin: 14px 0 7px; }
.tick-label input { width: 17px; height: 17px; accent-color: #333333; }
@media (max-width: 900px) {
  .length-grid-v2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .length-silhouette { width: 100%; max-width: 170px; }
  .portal-card { min-height: 180px; padding: 17px; }
  .portal-card strong { font-size: 17px; }
  .result-feature { grid-template-columns: 1fr 130px; }
}
@media (max-width: 680px) {
  .portal-grid { gap: 10px; }
  .portal-card { min-height: 175px; padding: 15px; }
  .portal-card strong { font-size: 16px; }
  .portal-card small { font-size: 11px; }
  .portal-card .portal-symbol { width: 34px; height: 34px; font-size: 18px; }
  .gender-card-v2 { padding: 16px; min-height: 200px; }
  .gender-card-v2 strong { font-size: 18px; }
  .gender-illustration { width: 50px; height: 50px; font-size: 28px; }
  .length-card strong { font-size: 13px; }
  .result-feature { grid-template-columns: 1fr 92px; gap: 7px; padding: 10px; }
  .result-feature > div:first-child { padding: 5px; }
  .result-feature img { height: 154px; }
  .result-feature h3 { font-size: 20px; }
  .result-illustration { font-size: 46px; }
  .two-options, .form-two { grid-template-columns: 1fr; }
  .style-chip { font-size: 12px; padding: 11px 13px; }
  .result-tabs { gap: 2px; }
  .tab-btn { padding: 11px 8px 13px; font-size: 11px; }
  .screen { padding-top: 28px; }
}
@media print {
  .portal-grid, .back-home { display: none; }
}
/* Check-in opens its existing CSP-protected kiosk in a separate tab. */
.external-checkin-button{display:flex;justify-content:center;align-items:center;min-height:54px;background:#111111;color:#ffffff;border-radius:var(--eve-radius);text-decoration:none;font-weight:700;margin-top:20px}

/* 근거 기반 고객 홈케어 Q&A */
.homecare-notice{background:#f5f5f5;border:1px solid #dddddd;border-radius:var(--eve-radius);padding:17px 19px;margin-bottom:18px}
.homecare-notice strong{font-size:14px;color:#333333}
.homecare-notice p{font-size:13px;line-height:1.78;color:#333333;margin:7px 0 0}
.homecare-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 29px}
.homecare-tab{display:flex;align-items:flex-start;flex-direction:column;text-align:left;gap:8px;background:#ffffff;border:1.5px solid #dddddd;padding:20px 21px;border-radius:var(--eve-radius);min-height:145px;transition:border-color .15s,background .15s}
.homecare-tab span{font:15px Georgia,serif;color:#666666}
.homecare-tab strong{font-size:21px;letter-spacing:-.055em;color:#111111}
.homecare-tab small{font-size:12px;line-height:1.7;color:#666666}
.homecare-tab.active{background:#f5f5f5;border-color:#666666;box-shadow:none}
.homecare-faq-head{display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin-bottom:15px}
.homecare-faq-head strong{font-size:18px;letter-spacing:-.04em}
.homecare-faq-head span{font-size:12px;color:#666666}
.homecare-faq-list{display:grid;gap:10px}
.homecare-faq{border:1px solid #dddddd;background:#ffffff;border-radius:var(--eve-radius);overflow:hidden}
.homecare-faq[open]{border-color:#aaaaaa;box-shadow:none}
.homecare-faq summary{cursor:pointer;list-style:none;padding:18px 17px 18px 20px;display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center}
.homecare-faq summary::-webkit-details-marker{display:none}
.homecare-faq-topic{grid-column:1;display:block;color:#666666;font-size:11px;font-weight:750}
.homecare-faq summary strong{grid-column:1;display:block;font-size:15px;line-height:1.5;letter-spacing:-.03em;color:#111111}
.homecare-faq-arrow{grid-column:2;grid-row:1/3;font-size:22px;color:#666666;transition:transform .2s}
.homecare-faq[open] .homecare-faq-arrow{transform:rotate(45deg)}
.homecare-faq-body{padding:0 20px 19px}
.homecare-faq-body>p{font-size:14px;line-height:1.87;color:#333333;margin:4px 0 16px;word-break:keep-all}
.homecare-evidence{border-top:1px solid #f5f5f5;padding-top:13px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.homecare-evidence-title{font-size:11px;font-weight:800;color:#333333;margin-bottom:1px}
.homecare-evidence a{font-size:12px;line-height:1.65;color:#333333;text-decoration:underline;text-underline-offset:3px}
.homecare-evidence a:focus-visible{outline:2px solid #aaaaaa;outline-offset:2px}
.homecare-foot{background:linear-gradient(135deg,#111111,#111111);color:#ffffff;border-radius:var(--eve-radius);padding:23px;margin-top:24px}
.homecare-foot strong{font-size:17px;letter-spacing:-.04em}
.homecare-foot p{color:#dddddd;font-size:13px;line-height:1.85;margin:9px 0 0}
@media(max-width:680px){.homecare-tabs{gap:9px}.homecare-tab{padding:15px 13px;min-height:144px}.homecare-tab strong{font-size:17px}.homecare-tab small{font-size:11px}.homecare-faq summary{padding:16px 13px}.homecare-faq-body{padding:0 14px 16px}.homecare-faq-body>p{font-size:13px}}

/* 응답에 맞춰 다음 질문이 바뀌는 홈케어 문진 */
.homecare-journey{margin:20px 0 22px;display:flex;align-items:center;gap:17px;font-size:12px;font-weight:800;color:#333333}
.homecare-progress{flex:1;background:#dddddd;height:7px;border-radius:var(--eve-radius);overflow:hidden}
.homecare-progress i{height:100%;display:block;background:linear-gradient(90deg,#666666,#333333);border-radius:var(--eve-radius);transition:width .25s}
.homecare-history-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.homecare-history{max-width:94%;align-self:flex-end;display:flex;flex-direction:column;align-items:flex-start;gap:6px;border-radius:var(--eve-radius);background:#f5f5f5;padding:13px 17px}
.homecare-history span{font-size:11px;color:#666666}
.homecare-history strong{font-size:13px;color:#111111}
.homecare-question{border:1px solid #dddddd;background:linear-gradient(145deg,#ffffff,#f5f5f5);padding:26px;border-radius:var(--eve-radius);box-shadow:none}
.homecare-question h3{font-size:clamp(22px,2.5vw,29px);line-height:1.42;letter-spacing:-.05em;margin:12px 0 8px;word-break:keep-all}
.homecare-question>p{font-size:13px;line-height:1.8;color:#666666;margin:0 0 19px}
.homecare-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.homecare-option{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:7px;position:relative;border:1px solid #dddddd;background:white;padding:18px 42px 18px 17px;border-radius:var(--eve-radius);min-height:89px;transition:border-color .15s,background .15s}
.homecare-option:hover,.homecare-option:focus-visible{border-color:#666666;background:#f5f5f5}
.homecare-option strong{font-size:14px;line-height:1.52;color:#111111;letter-spacing:-.03em}
.homecare-option small{font-size:11px;color:#666666;line-height:1.5}
.homecare-option>span{position:absolute;right:15px;top:19px;color:#666666;font-size:19px}
.homecare-result-hero{padding:27px 25px;border-radius:var(--eve-radius);background:linear-gradient(135deg,#111111,#111111);color:#ffffff;margin:17px 0 8px}
.homecare-result-hero span{color:#aaaaaa;font-size:11px;font-weight:800;letter-spacing:.08em}
.homecare-result-hero h3{font-size:25px;line-height:1.4;letter-spacing:-.05em;margin:13px 0 8px}
.homecare-result-hero p{margin:0;color:#dddddd;font-size:13px;line-height:1.7}
.homecare-summary{display:grid;gap:8px}
.homecare-summary-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;border:1px solid #dddddd;background:white;padding:12px 15px;border-radius:var(--eve-radius)}
.homecare-summary-item span{color:#666666;font-size:12px;max-width:55%}
.homecare-summary-item strong{color:#111111;font-size:13px;text-align:right;flex:1}
.homecare-advice-list{display:grid;gap:11px}
.homecare-advice{border:1px solid #dddddd;border-radius:var(--eve-radius);background:#ffffff;padding:18px 20px}
.homecare-advice p{color:#111111;font-size:14px;line-height:1.82;margin:0 0 15px;word-break:keep-all}
.homecare-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.homecare-product{border:1px solid #dddddd;border-radius:var(--eve-radius);padding:19px;background:#ffffff}
.homecare-product-meta{font-size:11px;color:#666666;font-weight:800;margin-bottom:9px}
.homecare-product h4{margin:0 0 9px;line-height:1.45;font-size:17px;letter-spacing:-.04em}
.homecare-product>span{font-size:12px;color:#666666;font-weight:700}
.homecare-product p{font-size:13px;line-height:1.7;color:#333333;margin:11px 0}
.homecare-product small{display:block;border-top:1px solid #dddddd;padding-top:11px;font-size:11px;line-height:1.75;color:#666666}
.homecare-product-state{padding:18px;border-radius:var(--eve-radius);border:1px solid #dddddd;background:#f5f5f5;color:#333333;font-size:13px;line-height:1.8}
.homecare-product-state.emphasis{border-color:#aaaaaa;background:#f5f5f5;color:#333333}
.homecare-product-state button{display:block;margin-top:12px;font-size:12px;min-height:44px;padding:10px 15px}
.homecare-related{border:1px solid #dddddd;background:#f5f5f5;border-radius:var(--eve-radius);margin-top:26px;padding:14px}
.homecare-related>summary{cursor:pointer;font-size:13px;font-weight:800;color:#333333;padding:7px 9px}
.homecare-related .homecare-faq-list{padding-top:14px}
@media(max-width:680px){.homecare-question{padding:20px 15px}.homecare-option{min-height:96px;padding:13px 32px 13px 12px}.homecare-option strong{font-size:12px}.homecare-option>span{right:11px;top:14px}.homecare-options{gap:8px}.homecare-product-grid{grid-template-columns:1fr}.homecare-summary-item{display:block}.homecare-summary-item span{max-width:none;display:block;margin-bottom:5px}.homecare-summary-item strong{text-align:left;display:block}}

/* Shared ELYSEE check-in visual language, 2026-11-03. */
:root{--elysee-font:"Malgun Gothic",system-ui,sans-serif;--navy:#111;--navy-soft:#333;--gold:#666;--gold-light:#ddd;--ink:#191919;--muted:#666;--paper:#fff;--bg:#fff;--text:#191919;--sub:#666;--line:#ddd;--card:#fff;--shadow:0 8px 24px rgba(0,0,0,.05)}
html,body,button,input,select,textarea,h1,h2,h3,h4,em,.brand-en,.brand-icon,.brand-wordmark strong,.brand-middle h1 em{font-family:var(--elysee-font);font-style:normal}
body{background:#fff;color:#191919}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #777;outline-offset:3px}
h1,h2,.headline{font-weight:700;line-height:1.3;letter-spacing:-.04em}
button,input,select,textarea{border-radius:var(--eve-radius)}
.brand-pane{background:#111;color:#fff}.brand-pane:before,.brand-pane:after{display:none}.brand-wordmark strong{font-weight:700}.brand-icon{color:#fff;border-color:#aaa}.brand-middle h1 em{color:#fff}.brand-wordmark small,.demo-badge,.eyebrow.light{color:#ccc}.content-pane{background:#fff}.headline b{color:#191919}.progress-fill,.homecare-progress i{background:#111}.homecare-foot,.homecare-result-hero{background:#111}.homecare-result-hero span{color:#ddd}.homecare-question{background:#fff}.homecare-option:hover,.homecare-option:focus-visible{background:#f5f5f5;border-color:#111}

/* Service-first tablet layout. */
.app-shell{display:block;width:100%;min-height:100dvh;box-shadow:none}
.brand-pane{display:none}
.content-pane{min-height:100dvh;padding:18px clamp(18px,4vw,64px) 14px}
.topbar{min-height:32px}
.topbar-label{font-size:14px;color:#111;letter-spacing:.12em}
.screen{width:100%;max-width:1200px;margin:0 auto;padding:18px 0;min-height:0}
.hub-wrap{width:100%;max-width:none}
.hub-wrap>.eyebrow{display:none}
.hub-wrap>.headline{font-size:clamp(28px,3.2vw,42px);margin:0 0 10px}
.hub-wrap>.headline br{display:none}
.hub-wrap>.welcome-copy{font-size:17px;line-height:1.5;margin-bottom:22px}
.portal-grid{gap:18px;margin-top:0}
.portal-card{min-height:clamp(200px,29dvh,310px);padding:28px 32px;justify-content:center;border:2px solid #ddd;box-shadow:none}
.portal-card strong{font-size:clamp(25px,3vw,36px);line-height:1.3}
.portal-card small{font-size:17px;line-height:1.5}
.portal-card .portal-symbol{width:48px;height:48px;font-size:28px;margin-bottom:5px}
.portal-card .portal-arrow{font-size:30px;right:28px;bottom:24px}
.portal-kicker{display:none}
.hub-wrap>.info-note{display:none}
.app-footer{margin-top:0;padding-top:10px;font-size:11px}
@media(max-width:680px){.content-pane{padding:14px 16px}.screen{padding:16px 0}.portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.portal-card{min-height:210px;padding:20px 15px}.portal-card strong{font-size:23px}.portal-card small{font-size:14px}.portal-card .portal-arrow{right:14px;bottom:12px}.hub-wrap>.welcome-copy{font-size:16px}.app-footer span:last-child{display:none}}
@media(max-width:380px){.portal-grid{grid-template-columns:1fr}.portal-card{min-height:160px}}

.beverage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.beverage-card{border:1px solid #ddd;border-radius:var(--eve-radius);padding:24px;background:#fff}.beverage-card h3{font-size:26px;margin:0 0 16px}.beverage-temperatures{display:flex;gap:10px;flex-wrap:wrap}.beverage-temperatures span{padding:8px 12px;border-radius:var(--eve-radius);background:#f5f5f5;color:#333;font-size:15px}.beverage-help{color:#666;line-height:1.6}@media(max-width:500px){.beverage-grid{grid-template-columns:1fr}.beverage-card{padding:20px}}