:root {
  --paper: #F7F5F2;
  --white: #FFFFFF;
  --warm: #EFEBE6;
  --ink: #111111;
  --ink-2: #1D1D1F;
  --mid: #6E6E73;
  --soft: #A1A1A6;
  --line: #E4E0DA;
  --rose: #A87764;
  --rose-light: #D2A894;
  --rose-grad: linear-gradient(120deg, #C99A88 0%, #A87764 45%, #D2A894 75%, #8E6252 100%);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--ink-2);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 880px; }
.center { text-align: center; margin-top: 56px; }
.small { font-size: 15px; color: var(--mid); margin-top: 40px; }
.mo { display: none; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  transition: transform .3s var(--ease), background .3s, color .3s, box-shadow .3s;
}
.btn--sm { height: 36px; padding: 0 18px; font-size: 14px; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.btn--line { border: 1px solid var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 17px; font-weight: 600; color: var(--rose);
}
.link-arrow::after { content: "→"; transition: transform .3s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--light { color: var(--rose-light); }

/* ---------- 상단 메뉴 ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 60px;
  background: rgba(247, 245, 242, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.is-scrolled { border-bottom-color: rgba(0,0,0,.08); }
.nav.is-dark { background: rgba(17, 17, 17, .72); border-bottom-color: rgba(255,255,255,.08); }
.nav.is-dark .nav__menu { color: #f5f5f7; }
.nav.is-dark .nav__logo img { filter: invert(1); }
.nav.is-dark .btn--dark { background: #f5f5f7; color: var(--ink); }
.nav__inner { max-width: var(--wrap); height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 40px; }
.nav__logo img { height: 22px; width: auto; }
.nav__menu { display: flex; align-self: stretch; align-items: stretch; gap: 32px; margin-left: auto; font-size: 14px; color: var(--ink-2); }
.nav__menu > a, .nav__item > a { display: flex; align-items: center; opacity: .8; transition: opacity .2s; }
.nav__menu > a:hover, .nav__menu > a.is-on, .nav__item > a:hover, .nav__item > a.is-on { opacity: 1; }
.nav__menu > a.is-on, .nav__item > a.is-on { font-weight: 700; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item > a::after { content: ""; width: 0; height: 0; margin-left: 6px; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: .55; }
.nav__sub {
  position: absolute; top: 100%; left: 50%; z-index: 2; min-width: 168px; padding: 8px;
  border-radius: 14px; background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.06); box-shadow: 0 18px 40px rgba(17,17,17,.12);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(6px);
  transition: opacity .2s, transform .2s;
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub, .nav__item.is-open .nav__sub { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__sub a { padding: 10px 14px; border-radius: 10px; color: var(--ink); font-weight: 500; white-space: nowrap; opacity: 1; }
.nav__sub a:hover, .nav__sub a.is-on { background: #f4f0eb; }
.nav__sub a.is-on { font-weight: 700; }
.nav.is-dark .nav__sub { background: rgba(28,28,30,.94); border-color: rgba(255,255,255,.08); }
.nav.is-dark .nav__sub a { color: #f5f5f7; }
.nav.is-dark .nav__sub a:hover, .nav.is-dark .nav__sub a.is-on { background: rgba(255,255,255,.08); }
.nav__toggle {
  display: none; width: 42px; height: 42px; margin-left: auto; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; position: relative;
}
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }
.nav.is-dark .nav__toggle { color: #f5f5f7; }

/* ---------- 공통 섹션 ---------- */
.section { padding: 160px 0; }
.section--white { background: var(--white); }
.section--paper { background: var(--paper); }
.section--warm { background: var(--warm); }
.section--ink { background: var(--ink); color: #F5F5F7; }

.eyebrow { font-size: 15px; font-weight: 600; color: var(--rose); letter-spacing: 0; margin-bottom: 18px; }
.eyebrow--rose { color: var(--rose-light); }
.h2 {
  font-size: clamp(36px, 5.6vw, 72px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.04em;
}
.lead { margin-top: 24px; max-width: 720px; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; color: var(--mid); }
.section--ink .lead { color: var(--soft); }

/* ---------- 히어로 ---------- */
.hero { position: relative; min-height: 100vh; padding: 180px 0 0; background: var(--paper); overflow: hidden; text-align: center; }
.hero .eyebrow { margin-bottom: 22px; }
.hero__title {
  font-size: clamp(48px, 8.4vw, 112px);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.05em; color: var(--ink);
}
.hero__sub { margin: 32px auto 0; max-width: 760px; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.55; color: var(--mid); }
.hero__cta { display: flex; gap: 28px; justify-content: center; align-items: center; margin-top: 44px; flex-wrap: wrap; }
.hero__mark { margin: 96px auto 0; width: min(680px, 80vw); padding-bottom: 120px; will-change: transform, opacity; }
.hero__tagline { margin-top: 22px; font-size: 15px; letter-spacing: .32em; text-transform: uppercase; color: var(--rose); opacity: 0; animation: fadeIn 1.1s 3.85s var(--ease) forwards; }

.mark-write { position: relative; }
.mark-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mark-pen {
  fill: none; stroke: #fff; stroke-width: 200; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: penWrite var(--dur) var(--delay) linear forwards;
}
.mark-sheen {
  position: absolute; inset: 0;
  -webkit-mask: url(/assets/img/logo/gws-symbol-black.svg) center / 100% 100% no-repeat;
          mask: url(/assets/img/logo/gws-symbol-black.svg) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  animation: sheen 1.8s 4.25s var(--ease) forwards;
}
@keyframes penWrite { to { stroke-dashoffset: 0; } }
@keyframes sheen { to { background-position: -150% 0; } }
@keyframes fadeIn { to { opacity: 1; } }

/* ---------- 공감 ---------- */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; }
.pain { padding: 40px 36px 44px; border-radius: 28px; background: var(--paper); }
.pain__no { display: block; font-size: 56px; font-weight: 200; line-height: 1; color: var(--rose); letter-spacing: -0.04em; margin-bottom: 40px; }
.pain h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; }
.pain p { color: var(--mid); }

/* ---------- 4단계 ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 88px; }
.steps__line { position: absolute; top: 11px; left: 12px; right: calc((100% - 96px) / 4 - 12px); height: 2px; background: var(--line); }
.steps__fill { position: absolute; inset: 0; background: var(--rose-grad); transform: scaleX(0); transform-origin: left; transition: transform 2.4s var(--ease); }
.steps.is-in .steps__fill { transform: scaleX(1); }
.step { position: relative; z-index: 1; opacity: .25; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.steps.is-in .step { opacity: 1; transform: none; }
.steps.is-in .step:nth-child(2) { transition-delay: .6s; }
.steps.is-in .step:nth-child(3) { transition-delay: 1.2s; }
.steps.is-in .step:nth-child(4) { transition-delay: 1.8s; }
.step__dot { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); margin-bottom: 36px; transition: border-color .6s, background .6s; transition-delay: inherit; }
.steps.is-in .step__dot { border-color: var(--rose); background: var(--rose); box-shadow: 0 0 0 6px rgba(168,119,100,.14); }
.step__en { font-size: 14px; font-weight: 600; color: var(--rose); letter-spacing: .02em; }
.step h3 { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; margin: 2px 0 12px; }
.step p { color: var(--mid); font-size: 16px; }

/* ---------- 근거 (노티) ---------- */
.proof { text-align: center; overflow: hidden; }
.proof .lead { margin-left: auto; margin-right: auto; }
.note { margin-top: 20px; font-size: 13px; color: #6e6e73; }

.laptop { margin: 88px auto 0; max-width: 1040px; }
.proof-stage { position: relative; height: 100%; }
.proof-pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; }
.proof-pane.is-on { opacity: 1; visibility: visible; }
.proof-pane .app { height: 100%; }
.proof-switch { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.proof-switch button { border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.72); border-radius: 99px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.proof-switch button.is-on { background: #fff; color: var(--ink); border-color: #fff; }
.laptop__screen {
  position: relative; aspect-ratio: 16 / 10; padding: 2.2% 2.2% 2.6%;
  border-radius: 22px 22px 0 0; background: #2a2a2c;
  box-shadow: inset 0 0 0 1px #3a3a3c, 0 40px 120px rgba(168, 119, 100, .18);
}
.laptop__base { height: 18px; margin: 0 -7%; border-radius: 0 0 22px 22px; background: linear-gradient(#bdbdc0, #8d8d91); position: relative; }
.laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 7px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #9e9ea2; }

.app { height: 100%; border-radius: 6px; overflow: hidden; background: #F6F6F8; color: #1d1d1f; text-align: left; display: flex; flex-direction: column; font-size: 12px; }
.app__top { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px; background: #fff; border-bottom: 1px solid #ececf0; flex-shrink: 0; }
.app__brand { font-weight: 700; color: var(--rose); }
.app__search { flex: 0 1 260px; height: 26px; line-height: 26px; padding: 0 12px; border-radius: 8px; background: #f1f1f4; color: #a1a1a6; font-size: 11px; }
.app__user { margin-left: auto; color: var(--mid); font-size: 11px; }
.app__body { display: grid; grid-template-columns: 120px minmax(0, 1fr) 270px; flex: 1; min-height: 0; overflow: hidden; }
.app__body--live { grid-template-columns: minmax(0, 1fr) 250px; }
.app__body--live > .hn, .app__body--live > .ilbo { min-width: 0; min-height: 0; }
.app__side { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: #fff; border-right: 1px solid #ececf0; }
.app__side span { padding: 7px 10px; border-radius: 7px; color: #515154; }
.app__side .is-on { background: #F3ECE8; color: var(--rose); font-weight: 600; }
.app__main { padding: 18px 20px; overflow: hidden; }
.app__h { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.app__h em { font-style: normal; font-weight: 400; color: var(--mid); font-size: 12px; margin-left: 6px; }
.app__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.app__cards div { background: #fff; border-radius: 10px; padding: 12px 14px; }
.app__cards b { display: block; font-size: 22px; letter-spacing: -0.03em; }
.app__cards span { color: var(--mid); font-size: 11px; }
.app__table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.app__table th, .app__table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #f0f0f3; }
.app__table th { font-weight: 500; color: var(--mid); font-size: 11px; background: #fafafb; }
.app__table i { font-style: normal; font-size: 10px; padding: 2px 8px; border-radius: 99px; background: #F3ECE8; color: var(--rose); }
.app__table i.ok { background: #EEF1EE; color: #5c7a62; }

.noti { display: flex; flex-direction: column; background: #fff; border-left: 1px solid #ececf0; transform: translateX(100%); transition: transform 1s var(--ease); }
.laptop.is-in .noti { transform: none; transition-delay: .4s; }
.noti__head { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; font-weight: 700; border-bottom: 1px solid #f0f0f3; flex-shrink: 0; }
.noti__head em { font-style: normal; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--rose-grad); color: #fff; }
.noti__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose-grad); box-shadow: 0 0 0 4px rgba(168,119,100,.15); }
.noti__log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: hidden; }
.noti__input { margin: 0 12px 12px; height: 32px; line-height: 32px; padding: 0 12px; border-radius: 10px; background: #f3f3f6; color: #a1a1a6; font-size: 11px; flex-shrink: 0; }
.msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; line-height: 1.5; font-size: 11.5px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.msg.is-show { opacity: 1; transform: none; }
.msg.is-gone { display: none; }
.msg--me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.msg--ai { align-self: flex-start; background: #F4F1EE; border-bottom-left-radius: 4px; }
.msg--ai ul { margin: 6px 0; }
.msg--ai li { padding: 2px 0; }
.msg--ai b { color: var(--rose); margin-right: 4px; }
.msg--ai a { display: inline-block; margin-top: 2px; color: var(--rose); font-weight: 600; }
.msg--typing { align-self: flex-start; display: flex; gap: 4px; background: #F4F1EE; }
.msg--typing span { width: 6px; height: 6px; border-radius: 50%; background: #b9a59b; animation: dot 1s infinite; }
.msg--typing span:nth-child(2) { animation-delay: .15s; }
.msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- 자체 솔루션 ---------- */
.tiles__label { margin: 72px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--rose); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.own-more { display: flex; align-items: center; gap: 36px; margin-top: 24px; padding: 40px 48px; border-radius: 32px; background: var(--white); text-align: left; }
.own-more__num { font-size: 64px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.own-more__body { flex: 1; min-width: 0; }
.own-more__body strong { display: block; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.04em; }
.own-more__body span { display: block; margin-top: 8px; color: var(--mid); font-size: 17px; line-height: 1.5; }
.own-more .link-arrow { flex-shrink: 0; }
.own-more:hover .link-arrow::after { transform: translateX(4px); }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 40px 0; border-radius: 32px; background: var(--white); overflow: hidden; min-height: 640px; }
.tile__since { font-size: 14px; font-weight: 600; color: var(--rose); }
.tile__name { font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -0.045em; margin: 6px 0 12px; }
.tile__desc { color: var(--mid); font-size: 19px; line-height: 1.5; margin-bottom: 20px; }
.tile__visual { margin-top: auto; width: 100%; padding-top: 48px; display: flex; justify-content: center; }

.sheet { width: 100%; max-width: 460px; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -2px 0 #f0ece8, 0 30px 80px rgba(17,17,17,.12); padding: 18px 18px 22px; font-size: 12px; text-align: left; transform: translateY(24px); transition: transform 1.2s var(--ease); }
.tile.is-in .sheet { transform: none; }
.sheet__h { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.sheet__h em { font-style: normal; font-weight: 400; color: var(--mid); font-size: 12px; }
.sheet__row { display: grid; grid-template-columns: 1fr 1.8fr 1.2fr .7fr 1.1fr; gap: 6px; padding: 9px 8px; border-bottom: 1px solid #f2efec; border-radius: 6px; transition: background .6s; }
.sheet__row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.sheet__row--h { color: var(--mid); font-size: 11px; }
.tile.is-in .sheet__row.is-edit { background: #F6EEEA; transition-delay: 1.2s; }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: var(--mid); }
.sheet__foot b { padding: 7px 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; }

.sheet--ag { padding-bottom: 14px; }
.ag-legend { display: grid; gap: 4px; margin: 2px 0 10px; font-size: 11px; color: var(--mid); }
.ag-legend p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ag-legend b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; }
.ag-legend em { font-style: normal; font-weight: 700; margin-right: 4px; }
.ag-legend .is-r b, .ag-legend .is-r em, .ag-legend .is-r span { color: var(--rose); }
.ag-legend .is-r b { background: var(--rose); color: #fff; }
.ag-legend .is-l b, .ag-legend .is-l em, .ag-legend .is-l span { color: #6d7f92; }
.ag-legend .is-l b { background: #6d7f92; color: #fff; }
.audiogram { width: 100%; overflow: visible; }
.ag-grid line { stroke: #eeeae6; stroke-width: 1; }
.ag-label text { font-size: 9px; fill: #a1a1a6; text-anchor: middle; font-family: var(--mono); }
.ag-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2s var(--ease); }
.ag-line--r { stroke: var(--rose); }
.ag-line--l { stroke: #6d7f92; stroke-dasharray: none; stroke-dashoffset: 0; }
.tile.is-in .ag-line--r { stroke-dashoffset: 0; transition-delay: .4s; }
.ag-line--l { opacity: 0; transition: opacity 1s 1.8s; }
.tile.is-in .ag-line--l { opacity: 1; }
.ag-r circle { fill: #fff; stroke: var(--rose); stroke-width: 2; opacity: 0; transition: opacity .4s 2s; }
.tile.is-in .ag-r circle { opacity: 1; }
.ag-l text { fill: #6d7f92; font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; opacity: 0; transition: opacity .4s 2s; }
.tile.is-in .ag-l text, .reveal.is-in .ag-l text, .hnhear .ag-l text { opacity: 1; }

/* ---------- 숫자 ---------- */
.numbers { text-align: center; }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 88px; }
.num b { display: block; font-size: clamp(56px, 8vw, 112px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, #b9b3ae); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num span { display: block; margin-top: 16px; color: var(--soft); font-size: 16px; }

/* ---------- 약속 ---------- */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 80px; }
.promise { padding-top: 28px; border-top: 1px solid var(--ink); }
.promise h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; }
.promise p { color: var(--mid); }

/* ---------- 고객사 띠 ---------- */
.clients .wrap:first-child { text-align: center; }
.clients .lead { margin-left: auto; margin-right: auto; }
.ticker { margin-top: 88px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker__row { display: flex; gap: 14px; width: max-content; animation: ticker 70s linear infinite; }
.ticker__row[data-dir="right"] { animation-direction: reverse; animation-duration: 90s; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker__row span { display: inline-flex; align-items: center; gap: 18px; padding: 18px 26px; border-radius: 999px; border: 1px solid #2c2c2e; white-space: nowrap; font-size: 17px; color: #e8e8ed; }
.ticker__row em { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--rose-light); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- 최근 소식 ---------- */
.news { margin-top: 64px; border-top: 1px solid var(--line); }
.news li { border-bottom: 1px solid var(--line); }
.news a { display: grid; grid-template-columns: 110px 96px 1fr auto; align-items: center; gap: 16px; padding: 26px 4px; transition: padding .3s var(--ease); }
.news a::after { content: "→"; color: var(--soft); transition: transform .3s var(--ease), color .3s; }
.news a:hover { padding-left: 12px; }
.news a:hover::after { transform: translateX(4px); color: var(--rose); }
.news time { font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; }
.news strong { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { justify-self: start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: #f1f1f3; color: var(--mid); }
.tag--in { background: #F3ECE8; color: var(--rose); }
.tag--hn { background: #EFEAF0; color: #8a6f86; }

/* ---------- CTA ---------- */
.cta { text-align: center; padding: 180px 0; }
.cta .lead { margin-left: auto; margin-right: auto; }

/* ---------- 푸터 ---------- */
.footer { background: var(--paper); padding: 64px 0 40px; font-size: 13px; color: var(--mid); border-top: 1px solid var(--line); }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer__logo { height: 52px; width: auto; }
.footer__menu { display: flex; flex-wrap: wrap; gap: 24px; color: var(--ink-2); font-size: 14px; }
.footer__demo { margin: 28px 0 12px; color: var(--ink-2); }
.footer__demo a { color: var(--rose); font-weight: 600; }
.footer__info { font-style: normal; line-height: 1.9; }
.footer__bottom { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- 나타나기 ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.pains .reveal:nth-child(2), .promises .reveal:nth-child(2), .nums .reveal:nth-child(2), .tiles .reveal:nth-child(2) { transition-delay: .12s; }
.pains .reveal:nth-child(3), .promises .reveal:nth-child(3), .nums .reveal:nth-child(3) { transition-delay: .24s; }
.nums .reveal:nth-child(4) { transition-delay: .36s; }

/* ---------- 일보관리 화면 (실제 화면과 비슷한 구성) ---------- */
.ilbo { height: 100%; display: flex; flex-direction: column; background: #f6f6f8; font-size: 11px; overflow: hidden; }
.ilbo__bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; background: #fff; color: var(--ink); border-bottom: 1px solid #ececf0; flex-shrink: 0; }
.ilbo__bar b { font-size: 14px; letter-spacing: -0.03em; color: var(--rose); }
.ilbo__bar .find { flex: 1; height: 22px; line-height: 22px; padding: 0 10px; border-radius: 99px; background: #f1f1f4; color: #a1a1a6; font-size: 10px; }
.ilbo__bar .pay { height: 22px; line-height: 22px; padding: 0 10px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; }
.ilbo__date { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.ilbo__date strong { font-size: 20px; letter-spacing: -0.04em; }
.ilbo__date em { font-style: normal; color: var(--mid); }
.ilbo__sum { margin-left: auto; color: var(--mid); font-size: 10px; }
.chip { padding: 3px 8px; border-radius: 7px; color: var(--mid); font-size: 10px; font-weight: 700; font-style: normal; background: #f1f1f4; }
.chip--teal { background: #f3ece8; color: #6b5348; }
.chip--purp { background: #f1f1f4; color: var(--mid); }
.ilbo__tools, .ilbo__sites { display: flex; gap: 6px; padding: 0 12px 8px; }
.ilbo__tools span, .ilbo__sites span { padding: 4px 8px; border-radius: 8px; background: #fff; border: 1px solid #ececf0; font-size: 10px; font-weight: 600; }
.ilbo__tools span.is-fill { background: var(--ink); color: #fff; border-color: var(--ink); }
.ilbo__sites .is-on { background: #f3ece8; color: var(--ink); border-color: #f3ece8; }
.ilbo__grp { display: flex; align-items: center; gap: 6px; margin: 0 12px; padding: 6px 8px; border-radius: 8px; background: #fff; font-size: 10px; }
.ilbo__grp i { font-style: normal; padding: 2px 6px; border-radius: 6px; background: #f4f1ee; color: var(--mid); }
.ilbo__grp .co, .ilbo__grp .site { background: #f4f1ee; color: var(--ink-2); }
.ilbo__grp em { margin-left: auto; font-style: normal; color: var(--mid); font-weight: 700; }
.ilbo table { width: calc(100% - 24px); margin: 8px 12px 0; border-collapse: collapse; background: #fff; }
.ilbo th, .ilbo td { padding: 5px 6px; text-align: left; border-bottom: 1px solid #f0ebe6; font-size: 10px; }
.ilbo th { background: #f6f6f8; color: var(--mid); font-weight: 600; }
.ilbo tr.is-pink td { background: #faf7f5; }
.ilbo td.site { color: var(--ink-2); }
.s-hero .ilbo table { width: calc(100% - 24px); }

.sheet--ilbo .iboard__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sheet--ilbo .iboard__top b { font-size: 18px; letter-spacing: -0.04em; }
.sheet--ilbo .iboard__top span { color: var(--mid); }
.sheet--ilbo .iboard__sites { display: flex; gap: 6px; margin-bottom: 10px; }
.sheet--ilbo .iboard__sites span { padding: 4px 8px; border-radius: 99px; background: #f6f3f0; font-size: 11px; }
.sheet--ilbo .iboard__sites .is-on { background: #f3ece8; color: var(--ink); }
.sheet--ilbo .iboard__grp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 11px; }
.sheet--ilbo .iboard__grp i { font-style: normal; padding: 2px 7px; border-radius: 6px; background: #f4f1ee; color: var(--mid); }
.sheet--ilbo .iboard__grp .co, .sheet--ilbo .iboard__grp .site { background: #f4f1ee; color: var(--ink-2); }
.sheet--ilbo .iboard__grp em { margin-left: auto; font-style: normal; color: var(--mid); font-weight: 700; }
.sheet--ilbo .iboard__h, .sheet--ilbo .iboard__r { display: grid; grid-template-columns: .8fr .8fr 1.3fr 1fr .9fr .5fr; gap: 4px; padding: 7px 4px; }
.sheet--ilbo .iboard__h { color: var(--mid); font-size: 11px; background: #f6f6f8; border-radius: 6px; }
.sheet--ilbo .iboard__r { border-bottom: 1px solid #f3efe9; }
.sheet--ilbo .iboard__r.is-pink { background: #faf7f5; }
.sheet--ilbo .iboard__r span:nth-child(3) { color: var(--ink-2); }

/* ---------- 보청기 고객 상세 (실제 화면과 비슷한 구성) ---------- */
.hn { height: 100%; display: flex; flex-direction: column; background: #f6f6f8; overflow: hidden; font-size: 11px; }
.hn__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: #fff; color: var(--ink); border-bottom: 1px solid #ececf0; flex-shrink: 0; }
.hn__bar b { font-size: 13px; color: var(--rose); }
.hn__bar .due { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: #f3ece8; color: var(--rose); font-size: 10px; }
.hn__bar .q { width: 22px; height: 22px; border-radius: 50%; background: #f1f1f4; }
.hnsum { margin: 10px 12px 0; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(20,24,40,.06); }
.hnsum__name { font-size: 18px; font-weight: 800; letter-spacing: -0.04em; }
.hnsum__name em { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: #f1f1f4; color: var(--mid); font-style: normal; font-size: 11px; font-weight: 600; }
.hnsum__line { display: flex; gap: 14px; margin-top: 8px; color: #444; }
.hnsum__line span { color: var(--mid); }
.ear { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; font-style: normal; background: #c4b8b2; }
.ear.l { background: var(--rose); }
.ear.r { background: #c4b8b2; }
.wait { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 99px; background: #f6f1ec; color: var(--rose); font-style: normal; font-size: 10px; font-weight: 700; }
.hnband { margin: 10px 12px 0; padding: 8px 12px; border-radius: 10px 10px 0 0; background: #efebe6; color: var(--ink); font-weight: 700; }
.hngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 12px 12px; }
.hngrid div { padding: 10px; border-radius: 10px; background: #fff; }
.hngrid b { display: block; margin-bottom: 6px; }
.hngrid p { color: #555; line-height: 1.45; }
.hngrid .oknote { margin-top: 6px; padding: 4px 6px; border-radius: 6px; background: #eef1ee; color: #5c7a62; font-size: 10px; }
.hnpanel { margin: 0 12px 12px; border-radius: 0 0 12px 12px; background: #fff; overflow: hidden; }
.hntabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px 0; }
.hntabs span { padding: 4px 7px; border-radius: 7px; background: #f4f1ee; color: var(--mid); font-size: 10px; font-weight: 600; }
.hntabs .is-on { background: var(--ink); color: #fff; }
.hnhear { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px 10px; }
.hnhear ul { display: flex; flex-direction: column; gap: 4px; }
.hnhear li { padding: 5px 7px; border-radius: 8px; background: #f6f6f8; }
.hnhear li.is-on { background: #f3ece8; }
.hnhear b { display: block; font-size: 10px; letter-spacing: -0.02em; }
.hnhear li span { color: var(--mid); font-size: 9px; }
.hnhear__plot { min-width: 0; }
.ag-key { display: flex; gap: 10px; margin: 0 0 2px; font-size: 9px; font-weight: 700; letter-spacing: -0.02em; }
.ag-key .r { color: var(--rose); }
.ag-key .l { color: #6d7f92; }
.hnhear .ag-line--r { stroke-dashoffset: 0; }
.hnhear .ag-line--l { opacity: 1; }
.hnhear .ag-r circle { opacity: 1; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .app__body { grid-template-columns: minmax(0, 1fr) 240px; }
  .app__side { display: none; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .pc { display: none; }
  .mo { display: inline; }
  .nav__toggle { display: grid; place-items: center; margin-left: 0; order: 3; }
  .nav__menu { display: none; }
  .nav.is-open .nav__menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 60px; left: 0; right: 0; margin: 0; padding: 8px 16px 18px;
    background: #f7f5f2; border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .nav.is-dark.is-open .nav__menu { background: #111; }
  .nav.is-open .nav__menu > a, .nav.is-open .nav__item > a { height: 48px; padding: 0 8px; font-size: 17px; }
  .nav.is-open .nav__item { flex-direction: column; align-items: stretch; }
  .nav.is-open .nav__sub {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    min-width: 0; padding: 0 0 8px 18px; background: transparent; border: 0; box-shadow: none;
  }
  .nav.is-dark.is-open .nav__sub { background: transparent; }
  .nav__inner { justify-content: space-between; gap: 12px; padding: 0 16px; }
  .nav__inner .btn--sm { height: 34px; padding: 0 12px; font-size: 13px; margin-left: auto; order: 2; }
  .section { padding: 112px 0; }
  .hero { padding-top: 140px; }
  .pains, .promises { grid-template-columns: 1fr; gap: 16px; }
  .promises { gap: 36px; }
  .steps { grid-template-columns: 1fr; gap: 40px; padding-left: 48px; }
  .steps__line { top: 12px; bottom: 12px; left: 11px; right: auto; width: 2px; height: auto; }
  .steps__fill { transform: scaleY(0); transform-origin: top; }
  .steps.is-in .steps__fill { transform: scaleY(1); }
  .step__dot { position: absolute; left: -48px; top: 0; margin: 0; }
  .tiles { grid-template-columns: 1fr; }
  .own-more { flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 28px; }
  .tile { min-height: 560px; padding-top: 52px; }
  .nums { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .laptop { margin-top: 64px; }
  .app__body { grid-template-columns: 1fr; }
  .app__main, .app__body--live > .hn, .app__body--live > .ilbo { display: none; }
  .noti { transform: none; }
  .laptop__screen { aspect-ratio: 3 / 4; }
  .news a { grid-template-columns: 1fr auto; row-gap: 6px; }
  .news time { grid-column: 1; }
  .news .tag { grid-column: 1; grid-row: 2; }
  .news strong { grid-column: 1; grid-row: 3; white-space: normal; }
  .news a::after { grid-column: 2; grid-row: 1 / 4; }
  .footer__top { flex-direction: column; }
  .footer__bottom { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .mark-pen { animation: none; stroke-dashoffset: 0; }
  .hero__tagline { opacity: 1; animation: none; }
  .mark-sheen { animation: none; }
  .ticker__row { animation: none; }
}