/* 넥스트이비인후과 — no photographs. The name carries the page:
   N·E·X·T (Nose, Ear, X, Throat) from the logo becomes the structure, set on flat fields of the brand navy
   and a quiet bone ground. Orange #e68612 appears only where the logo has it: the X, and the live status dot.
   One face (Pretendard), five sizes. Local files only (CSP: self). */
@import url("/fonts/pretendard.css");

:root {
  color-scheme: light;
  /* Warm white ground, like hotel linen; navy and the logo orange carry the brand. */
  --bg: #f7f4ef;
  --paper: #fffdf9;
  --surface: #efe9e0;
  --surface-2: #e4ddd1;
  --line: #dcd3c6;
  --ink: #1c232b;
  --muted: #4d545b;
  --navy-tint: #dde6f0;
  --navy: #12487e;
  --navy-deep: #0d3760;
  --on-navy: #f3f2ef;
  --on-navy-soft: #b9c9db;
  --accent: #e68612;
  --closed: #9b3b2f;

  --t-small: 14px;
  --t-body: 17px;
  --t-lead: clamp(19px, 1.6vw, 22px);
  --t-head: clamp(30px, 4vw, 56px);
  --t-display: clamp(60px, 11.6vw, 200px);

  --margin: clamp(16px, 2.6vw, 40px);
  --gap: clamp(80px, 8.5vw, 140px);
  --face: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--face); font-size: var(--t-body); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--navy); color: #fff; }
a[href^="tel:"] { white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: #fff; color: var(--ink); padding: 12px 16px; }
.skip:focus { top: 12px; }
.wrap { padding-left: var(--margin); padding-right: var(--margin); max-width: 1520px; margin: 0 auto; }
.head { font-size: var(--t-head); }
.lead { font-size: var(--t-lead); line-height: 1.55; }
.muted { color: var(--muted); }
.section { padding-top: var(--gap); padding-bottom: var(--gap); }
.section.tint { background: var(--surface); }

/* Buttons: square corners, one fill */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; font: inherit; font-weight: 600; text-decoration: none; background: var(--navy); color: #fff; border: 0; cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.button:hover { background: var(--navy-deep); }
.button:active { transform: translateY(1px); }
.button.paper { background: var(--bg); color: var(--ink); }
.button.paper:hover { background: #fff; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(31,36,41,.35); transition: text-decoration-color .2s; }
.text-link:hover { text-decoration-color: currentColor; }

/* Header: a plain bar; white on the navy fields */
.site-header { position: relative; z-index: 10; }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.logo { display: block; flex: none; }
.logo img { height: 40px; width: auto; }
.logo .on-navy { display: none; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { text-decoration: underline 2px transparent; text-underline-offset: 8px; padding: 6px 0; transition: text-decoration-color .25s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { text-decoration-color: currentColor; }
.call { font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.menu { display: none; }
.on-navy-top .site-header { position: absolute; left: 0; right: 0; color: #fff; }
.on-navy-top .logo .on-paper { display: none; }
.on-navy-top .logo .on-navy { display: block; }

/* ---------- Navy title fields (home hero and page heads) ---------- */
.hero, .page-hero { position: relative; background: var(--navy); color: var(--on-navy); overflow: hidden; }
.hero { height: 100svh; min-height: 640px; }
.page-hero { height: 54svh; min-height: 440px; }
.hero-mark { position: absolute; right: calc(var(--margin) * 2); top: max(108px, 13svh); height: min(46svh, 30vw); width: auto; }
.page-hero .hero-mark { height: min(26svh, 18vw); top: max(104px, 16svh); }
.hero-text { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.hero-text, .page-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--margin) clamp(20px, 2.4vw, 34px); }
.film-title { font-size: clamp(44px, 6.6vw, 112px); font-weight: 700; letter-spacing: -0.06em; line-height: .9; white-space: nowrap; margin-left: -0.04em; color: #fff; }
.page-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.page-hero h1 { font-size: clamp(56px, 9vw, 150px); letter-spacing: -0.06em; line-height: .95; font-weight: 700; color: #fff; }
.page-hero p { font-size: var(--t-lead); line-height: 1.5; }

/* Signature move: sound spreads from the ear in the logo, slow and continuous, like a quiet film loop */
.hero-art { position: absolute; right: calc(var(--margin) * 2); top: max(104px, 12svh); height: min(38svh, 26vw); aspect-ratio: 1; }
.hero-art img { position: relative; z-index: 1; width: 100%; height: 100%; }
.ring { position: absolute; left: 79%; top: 29%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; background: rgba(243, 242, 239, .16); opacity: 0; transform: scale(.4); animation: ripple 10s cubic-bezier(.25, .6, .3, 1) infinite; will-change: transform, opacity; }
.ring:nth-child(2) { animation-delay: 2s; }
.ring:nth-child(3) { animation-delay: 4s; }
.ring:nth-child(4) { animation-delay: 6s; }
.ring:nth-child(5) { animation-delay: 8s; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: .9; } 100% { opacity: 0; transform: scale(9); } }
.js .hero-art img { animation: settle 1.6s var(--ease) both; }

/* The live thing: is the clinic open right now? */
.open-now { display: grid; gap: 6px; justify-items: end; text-align: right; }
.open-state { display: flex; align-items: center; gap: 10px; font-size: var(--t-lead); font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.open-now[data-state="closed"] .dot, .open-now[data-state="break"] .dot { background: #9aa6b2; }
.open-now[data-state="open"] .dot { animation: pulse 2.4s ease-in-out infinite; }
.open-detail { font-size: var(--t-body); max-width: 40ch; color: var(--on-navy); }
.open-now .button { margin-top: 10px; }
@keyframes pulse { 50% { opacity: .35; } }
.card-status { justify-items: start; text-align: left; margin-top: 18px; }
.card-status .open-detail { color: var(--muted); }
.card-status[data-state="closed"] .dot, .card-status[data-state="break"] .dot { background: #b3ada3; }

/* ---------- N·E·X·T: the four letters of the name hold the four parts of the clinic ---------- */
.next-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; margin-bottom: 64px; }
.next-head h2 { grid-column: 1 / 7; font-size: var(--t-head); }
.next-head p { grid-column: 7 / 12; align-self: end; font-size: var(--t-lead); }
.next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.letter-cell { background: var(--surface); padding: clamp(28px, 3.4vw, 56px); display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(24px, 3vw, 48px); align-items: start; min-height: 360px; transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .letter-cell:hover { transform: translateY(-4px); } }
/* The four tiles echo the logo's square: navy E, orange X on bone, two greige tones */
.letter-cell.e { background: var(--navy); color: var(--on-navy); }
.letter-cell.e .letter, .letter-cell.e h3 { color: #fff; }
.letter-cell.e h3 small { color: var(--on-navy-soft); }
.letter-cell.x { background: var(--paper); }
.letter-cell.t { background: var(--surface-2); }
.letter { font-size: clamp(120px, 15vw, 240px); font-weight: 800; line-height: .78; letter-spacing: -0.06em; color: var(--navy); }
.letter-cell.x .letter { color: var(--accent); }
.letter-cell h3 { font-size: var(--t-head); margin-top: 4px; }
.letter-cell h3 small { display: block; font-size: var(--t-small); font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 6px; }
.letter-cell ul { margin-top: 28px; display: grid; gap: 10px; }
.letter-cell li span { color: var(--muted); font-size: var(--t-small); margin-left: 8px; }

/* ---------- This week: who is in, by day (a real table) ---------- */
.week-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.week-head h2 { font-size: var(--t-head); }
.week-head p { color: var(--muted); max-width: 40ch; }

/* ---------- Doctors band ---------- */
.doctors-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.doctors-band .side { grid-column: 1 / 5; }
.doctors-band h2 { font-size: var(--t-head); }
.doctors-band .side p { margin-top: 16px; color: var(--muted); max-width: 26ch; }
.doctor-links { grid-column: 5 / 13; display: grid; gap: 0; border-top: 1px solid var(--ink); } /* taste-skill-ignore: rows of a list, ruled like a printed guest card */
.doctor-link { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 36px 8px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .25s var(--ease), padding .25s var(--ease); } /* taste-skill-ignore */
.doctor-link:hover { background: var(--surface); padding-left: 20px; padding-right: 20px; }
.doctor-link b { font-size: var(--t-head); letter-spacing: -0.05em; line-height: 1; }
.doctor-link b small { font-size: var(--t-body); letter-spacing: 0; font-weight: 500; margin-left: 12px; color: var(--muted); }
.doctor-link span { font-size: var(--t-small); color: var(--muted); text-align: right; }
.doctor-link .arrow { display: inline-block; margin-left: 6px; transition: transform .25s var(--ease); }
.doctor-link:hover .arrow { transform: translateX(6px); }

/* ---------- The printed sheet on a navy field ---------- */
.sheet-band { background: var(--navy); padding: var(--gap) var(--margin); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.sheet-aside { grid-column: 1 / 6; color: var(--on-navy); position: sticky; top: 48px; }
.sheet-aside h2 { font-size: var(--t-head); color: #fff; }
.sheet-aside p { margin-top: 18px; font-size: var(--t-lead); color: var(--on-navy); max-width: 26ch; }
.sheet { grid-column: 7 / 13; background: var(--bg); padding: 64px; }
.sheet-group + .sheet-group { margin-top: 48px; }
.sheet-group h3 { font-size: var(--t-lead); margin-bottom: 14px; }
.sheet-group li { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; }
.sheet-group li span + span { color: var(--muted); font-size: var(--t-small); text-align: right; padding-top: 2px; white-space: nowrap; }
.sheet-foot { margin-top: 48px; font-weight: 600; }
.sheet-foot span { display: block; font-weight: 400; color: var(--muted); }

/* ---------- Visit: the address set large, the card beside it ---------- */
.visit-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.visit-address { grid-column: 1 / 8; }
.visit-address h2 { font-size: var(--t-head); }
.visit-address address { font-style: normal; font-size: clamp(30px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; margin-top: 28px; }
.visit-address address span { display: block; color: var(--muted); font-weight: 500; }
.visit-address .actions { margin-top: 36px; }
.visit-card { grid-column: 9 / 13; background: var(--paper); }
.visit-body { padding: 32px; }
.visit-card h3 { font-size: var(--t-lead); }
.hours-rows { margin-top: 18px; display: grid; gap: 8px; }
.hours-rows div { display: flex; justify-content: space-between; gap: 16px; }
.hours-rows dd { font-variant-numeric: tabular-nums; font-weight: 600; }
.visit-card .tel { display: block; margin-top: 22px; font-size: var(--t-lead); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.visit-card .button { width: 100%; min-height: 54px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Footer: the name returns at full width ---------- */
.site-footer { background: var(--navy); color: var(--on-navy); padding: 96px 0 36px; }
.footer-logo img { width: min(100%, 1040px); height: auto; }
.footer-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 72px; font-size: var(--t-small); }
.footer-info { grid-column: 1 / 8; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; }
.footer-info dt { color: var(--on-navy-soft); }
.footer-links { grid-column: 9 / 13; display: grid; gap: 8px; align-content: start; font-size: var(--t-body); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.imprint { margin-top: 72px; font-size: var(--t-small); color: var(--on-navy-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Inner pages ---------- */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.split > .side { grid-column: 1 / 6; }
.split > .main { grid-column: 6 / 13; min-width: 0; }
.split h2 { font-size: var(--t-head); }
.split .side p { margin-top: 16px; color: var(--muted); }
.split + .split { margin-top: var(--gap); }

/* Tables keep their lines (they are real tables) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--surface-2); white-space: nowrap; }
thead th { background: var(--surface); font-weight: 600; }
tbody th { text-align: left; font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }
td.off { color: var(--closed); font-weight: 600; }
.table-left th, .table-left td { text-align: left; white-space: normal; }
.table-left td.num { white-space: nowrap; }
caption { caption-side: bottom; text-align: left; padding: 12px 16px; font-size: var(--t-small); color: var(--muted); background: var(--bg); }
.note { margin-top: 20px; color: var(--muted); font-size: var(--t-small); }
.note li + li { margin-top: 4px; }

.doctor { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.doctor + .doctor { margin-top: var(--gap); }
.doctor-name { grid-column: 1 / 5; }
.doctor-name h2 { font-size: clamp(56px, 7vw, 110px); letter-spacing: -0.06em; line-height: .98; color: var(--navy); }
.doctor-name p { margin-top: 14px; font-size: var(--t-lead); color: var(--muted); }
.doctor-body { grid-column: 5 / 13; min-width: 0; }
.career { display: grid; gap: 4px; }
.career li { padding: 14px 20px; background: var(--surface); }
.doctor-body h3 { font-size: var(--t-lead); margin: 48px 0 16px; }

/* Rows read like a printed guest card: hairlines between entries, no grey boxes. */
.info-rows { display: grid; gap: 0; border-top: 1px solid var(--ink); } /* taste-skill-ignore: key/value rows read as a table */
.info-rows > div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 4px; border-bottom: 1px solid var(--line); } /* taste-skill-ignore */
.info-rows dt { color: var(--muted); font-size: var(--t-small); padding-top: 3px; }
.info-rows dd { font-weight: 500; max-width: 62ch; }

.pending { background: var(--surface); padding: 40px 32px; }
.pending strong { display: block; font-size: var(--t-lead); margin-bottom: 6px; }
.fees-note { max-width: 62ch; margin-top: 24px; }

.not-found { min-height: 64vh; display: grid; align-content: center; gap: 22px; padding-top: 40px; padding-bottom: 40px; }
.not-found h1 { font-size: var(--t-head); }

/* ---------- Entrances (only when the script runs) ---------- */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].in > * { opacity: 1; transform: none; }
.js [data-reveal].in > :nth-child(2) { transition-delay: .08s; }
.js [data-reveal].in > :nth-child(3) { transition-delay: .16s; }
.js [data-reveal].in > :nth-child(4) { transition-delay: .24s; }
.js .hero-text > *, .js .page-hero-text > * { animation: rise 1s var(--ease) both; }
.js .hero-text > :nth-child(2), .js .page-hero-text > :nth-child(2) { animation-delay: .15s; }
.js .hero-mark { animation: settle 1.6s var(--ease) both; }
.js .letter { transition: transform .9s var(--ease); }
.js [data-reveal]:not(.in) .letter { transform: translateY(40px); }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes settle { from { opacity: 0; transform: translateY(24px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .ring { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] > *, .js [data-reveal]:not(.in) .letter { opacity: 1; transform: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .next-head h2, .next-head p { grid-column: 1 / -1; }
  .next-head p { margin-top: 16px; }
  .letter-cell { min-height: 0; }
  .letter { font-size: clamp(88px, 14vw, 140px); }
  .doctors-band .side, .doctor-links, .split > .side, .split > .main, .doctor-name, .doctor-body, .visit-address, .visit-card { grid-column: 1 / -1; }
  .sheet-aside, .sheet { grid-column: 1 / -1; position: static; }
  .visit-card { max-width: 480px; }
  .hero-mark, .hero-art { height: 30svh; }
}

/* ---------- Phone: its own composition ---------- */
@media (max-width: 720px) {
  :root { --t-head: clamp(28px, 8.4vw, 40px); }
  .nav, .site-header .call { display: none; }
  .header-inner { min-height: 68px; }
  .logo img { height: 30px; }
  .menu { display: block; margin-left: auto; }
  .menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 10px 0 10px 16px; position: relative; z-index: 3; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { color: var(--ink); }
  .menu-panel { position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: var(--bg); color: var(--ink); padding: 76px var(--margin) 28px; display: grid; gap: 2px; font-size: var(--t-lead); font-weight: 600; }
  .menu-panel a { text-decoration: none; padding: 10px 0; }
  .menu-panel .call { display: block; margin-top: 12px; }

  .hero { min-height: 600px; }
  .hero-mark, .hero-art { height: 28svh; right: var(--margin); top: 96px; }
  .page-hero .hero-mark { height: 15svh; top: 88px; }
  .open-now { justify-items: start; text-align: left; }
  .open-now .button { display: none; }
  .film-title { font-size: 11vw; letter-spacing: -0.05em; }
  .page-hero { height: 56svh; min-height: 400px; }
  .page-hero-text { flex-direction: column; align-items: flex-start; }
  .page-hero p { text-align: left; font-size: var(--t-body); }

  .next-grid { grid-template-columns: 1fr; }
  .letter { font-size: 84px; }
  .letter-cell { gap: 0 20px; padding: 28px 22px; }

  .doctor-link { padding: 24px 20px; grid-template-columns: 1fr; gap: 10px; }
  .doctor-link span { text-align: left; }

  .sheet-band { padding: 72px 10px; }
  .sheet-aside { padding: 0 6px; }
  .sheet { padding: 40px 22px; }
  .sheet-group li { flex-direction: column; gap: 0; }
  .sheet-group li span + span { text-align: left; }

  .info-rows > div { grid-template-columns: 1fr; gap: 2px; padding: 16px 18px; }
  .footer-info, .footer-links { grid-column: 1 / -1; }
  .footer-info { grid-template-columns: 1fr; gap: 0; }
  .footer-info dd { margin-bottom: 10px; }
  th, td { padding: 12px 7px; font-size: var(--t-small); }
  .table-left th, .table-left td { padding: 12px; }
  .visit-address address { font-size: var(--t-lead); }
}
.info-rows.tests > div { grid-template-columns: 200px 1fr; }
.info-rows.tests dt { color: var(--ink); font-size: var(--t-lead); font-weight: 600; padding-top: 0; letter-spacing: -0.02em; }
@media (max-width: 720px) { .info-rows.tests > div { grid-template-columns: 1fr; } }

/* ---------- Sleep study and facility pages ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.check-list { display: grid; gap: 4px; counter-reset: c; }
.check-list li { background: var(--surface); padding: 20px 24px 20px 64px; position: relative; font-size: var(--t-lead); letter-spacing: -0.02em; }
.check-list li::before { content: ""; position: absolute; left: 24px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--navy); }
.step-list { display: grid; gap: 0; counter-reset: step; }
.step-list li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 22px 0; }
.step-list li::before { content: counter(step); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.step-list b { font-size: var(--t-lead); letter-spacing: -0.02em; }
.step-list span { color: var(--muted); }
.measure-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.measure-list li { background: var(--bg); padding: 24px; display: grid; gap: 4px; }
.measure-list b { font-size: var(--t-lead); letter-spacing: -0.02em; }
.measure-list span { color: var(--muted); font-size: var(--t-small); }
.tour video { width: 100%; height: auto; display: block; background: var(--ink); }
.tour figcaption { margin-top: 16px; max-width: 60ch; }
@media (max-width: 1320px) { .site-header .call { display: none; } .nav { gap: 22px; } }
@media (max-width: 1080px) { .measure-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .check-list li { font-size: var(--t-body); padding: 18px 18px 18px 52px; }
  .check-list li::before { left: 18px; width: 16px; height: 16px; margin-top: -8px; }
  .step-list li { grid-template-columns: 44px 1fr; }
  .step-list li::before { width: 34px; height: 34px; }
  .measure-list { grid-template-columns: 1fr 1fr; }
}

/* Actual photographs on a shallow 3D card; no synthetic room geometry. */
.lab3d { margin: 0; min-width: 0; }
.lab-view { padding: 12px; perspective: 1400px; background: var(--surface-2); }
.lab-photo-card { transform: rotateY(-2deg) rotateX(1deg); transition: transform .45s var(--ease); }
.lab-photo { width: 100%; height: auto; }
.lab-photo[hidden] { display: none; }
.lab3d:focus-within .lab-photo-card { transform: none; }
@media (hover: hover) and (pointer: fine) { .lab-view:hover .lab-photo-card { transform: rotateY(2deg) rotateX(-1deg); } }
.lab3d figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; font-weight: 600; }
.lab-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-select { min-height: 44px; padding: 10px 18px; border: 0; font: inherit; font-size: var(--t-small); cursor: pointer; color: var(--ink); background: var(--surface); }
.lab-select[aria-pressed="true"] { background: var(--navy); color: white; }
.no-js .lab-controls { display: none; }
.no-js .lab-photo[hidden] { display: block; margin-top: 12px; }
@media (prefers-reduced-motion: reduce), (hover: none) { .lab-photo-card { transform: none !important; transition: none; } }
.lab-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.lab-split .lab3d { grid-column: 1 / 8; grid-row: 1; }
.lab-split .lab-text { grid-column: 9 / 13; grid-row: 1; }
.lab3d figcaption span { display: block; width: 100%; font-weight: 400; font-size: var(--t-small); color: var(--muted); }
.lab-split h2 { font-size: var(--t-head); }
.lab-split .lab-text > p { margin-top: 16px; font-size: var(--t-lead); max-width: 34ch; }
.lab-split .info-rows { margin-top: 32px; }
.lab-split .info-rows.tests > div { grid-template-columns: 120px 1fr; }

@media (max-width: 1080px) { .lab-split .lab3d, .lab-split .lab-text { grid-column: 1 / -1; grid-row: auto; } .lab-split .lab3d { margin-top: 16px; } }

/* Sleep study: the old page's four-step process, now as one row of numbered columns */
.flow-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.flow-head h2 { font-size: var(--t-head); }
.flow-head p { font-size: var(--t-lead); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: flow; }
.flow li { counter-increment: flow; background: var(--surface); padding: 32px 28px 36px; display: grid; gap: 10px; align-content: start; }
.flow li::before { content: counter(flow); width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: var(--t-lead); margin-bottom: 14px; }
.flow b { font-size: var(--t-lead); letter-spacing: -0.02em; }
.flow span { font-size: var(--t-body); }
.two-step .sheet-group p { margin-top: 4px; }
.two-step .sheet-group + .sheet-group { margin-top: 40px; }
.info-rows.on-tint > div { border-bottom-color: var(--surface-2); }
@media (max-width: 1080px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .flow { grid-template-columns: 1fr; } .flow li { padding: 26px 22px; } }

/* Today at the clinic: hours by session, reception cut-offs, and who is seeing patients (filled in by site.js) */
/* Like a hotel's front-desk card: today's date and state, who is in, the two sessions with their cut-offs. */
.today { width: min(100%, 460px); display: grid; gap: 0; color: var(--on-navy); background: var(--navy-deep); }
.today > * { padding-left: 26px; padding-right: 26px; }
.today-top { display: grid; gap: 6px; padding-top: 26px; padding-bottom: 8px; }
.today-date { font-size: var(--t-small); color: var(--on-navy-soft); font-variant-numeric: tabular-nums; }
.today-state { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; color: #fff; letter-spacing: -0.03em; }
.today[data-state="closed"] .dot, .today[data-state="break"] .dot, .today[data-state="unknown"] .dot { background: #9aa6b2; }
.today[data-state="open"] .dot { animation: pulse 2.4s ease-in-out infinite; }
.today-docs { display: grid; gap: 4px; padding-top: 18px; padding-bottom: 16px; }
.today-docs span { color: var(--on-navy-soft); font-size: var(--t-small); }
.today-docs b { font-size: var(--t-lead); color: #fff; letter-spacing: -0.02em; }
.today-hours { display: grid; gap: 2px; padding-bottom: 12px; }
.today-hours > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 14px; background: rgba(243, 242, 239, .06); }
.today-hours > div:has(dt:only-child) { grid-template-columns: 1fr; }
.today-hours dt { color: var(--on-navy-soft); font-size: var(--t-small); }
.today-hours dd { font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.today-hours dd + dd { font-weight: 500; color: var(--on-navy-soft); font-size: var(--t-small); }
.today-hours .is-now { background: rgba(243, 242, 239, .14); }
.today-hours .is-now dt { color: #fff; font-weight: 600; }
.today-note { font-size: var(--t-small); color: var(--on-navy-soft); padding-top: 4px; padding-bottom: 18px; }
.today-link { display: flex; justify-content: space-between; align-items: center; min-height: 54px; background: rgba(243, 242, 239, .08); color: #fff; font-weight: 600; text-decoration: none; transition: background-color .25s var(--ease); }
.today-link:hover { background: rgba(243, 242, 239, .16); }
.today-link .arrow, .text-link .arrow { display: inline-block; margin-left: 8px; transition: transform .25s var(--ease); }
.today-link:hover .arrow, .text-link:hover .arrow { transform: translateX(5px); }
@media (max-width: 720px) {
  .hero-text { flex-direction: column; align-items: flex-start; gap: 20px; }
  .today > * { padding-left: 18px; padding-right: 18px; }
  .today-top { padding-top: 18px; padding-bottom: 14px; }
  .today-hours > div { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 9px 12px; }
  .today-note { padding-bottom: 14px; }
}

/* This week: seven days in a row, today in navy. On phones, one line per day. */
.week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week-day { background: var(--paper); padding: 18px 16px 22px; display: grid; gap: 14px; align-content: start; min-height: 168px; }
.week-day.is-short { background: var(--bg); }
.week-day.is-today { background: var(--navy); color: #fff; }
.week-date { display: flex; align-items: baseline; gap: 8px; }
.week-date b { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.week-date span { font-size: var(--t-small); color: var(--muted); }
.week-day.is-today .week-date span { color: var(--on-navy-soft); }
.week-fallback, .week-more { margin-top: 24px; }
.week-head p { max-width: 46ch; }

/* Doctor chips: navy for the 대표원장, a pale navy for the 원장; names always written out. */
.docs { display: flex; flex-wrap: wrap; gap: 6px; }
.doc { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; font-size: var(--t-small); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.doc-jang { background: var(--navy); color: #fff; }
.doc-lee { background: var(--navy-tint); color: var(--navy-deep); }
.doc-pending { background: transparent; color: var(--muted); padding-left: 0; font-weight: 500; }
.is-today .doc-jang { background: #fff; color: var(--navy); }
.is-today .doc-lee { background: rgba(243, 242, 239, .2); color: #fff; }
.is-today .doc-pending, .is-today .day-none { color: var(--on-navy-soft); }
.day-none { font-size: var(--t-small); color: var(--muted); }
.day-none.is-closed { color: var(--closed); font-weight: 600; }
@media (max-width: 900px) {
  .week-days { grid-template-columns: 1fr; gap: 4px; }
  .week-day { grid-template-columns: 112px 1fr; align-items: center; min-height: 0; padding: 14px 16px; }
}

/* Month calendar */
.month-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.month-head h2 { font-size: var(--t-head); }
.month-head p { margin-top: 10px; color: var(--muted); }
.month-tools { display: flex; align-items: center; gap: 12px; position: relative; }
.month-tools label { font-size: var(--t-small); color: var(--muted); }
.month-tools select { min-height: 48px; padding: 0 44px 0 16px; font: inherit; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 0; appearance: none; cursor: pointer; }
.month-tools::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-bottom: 18px; font-size: var(--t-small); color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend-hours { margin-left: auto; }
.calendar { table-layout: fixed; background: var(--paper); }
.calendar th, .calendar td { white-space: normal; text-align: left; vertical-align: top; border: 1px solid var(--surface-2); }
.calendar thead th { background: transparent; padding: 14px 12px; font-size: var(--t-small); color: var(--muted); border-width: 0 0 1px; }
.calendar thead .is-sun { color: var(--closed); }
.calendar thead .is-sat { color: var(--navy); }
.calendar td { height: 116px; padding: 10px 10px 12px; }
.calendar td.is-short { background: var(--bg); }
.calendar td.is-empty { background: transparent; }
.calendar td.is-today { background: var(--navy); color: #fff; border-color: var(--navy); }
.cal-date { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal-date b { font-size: var(--t-lead); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cal-tag { font-size: 12px; font-weight: 600; padding: 1px 6px; background: var(--accent); color: #fff; }
.cal-tag.is-holiday { background: transparent; color: var(--closed); padding: 1px 0; }
.calendar td.is-holiday .cal-date b, .calendar td.is-sun .cal-date b { color: var(--closed); }
.calendar td.is-sat:not(.is-holiday) .cal-date b { color: var(--navy); }
.week-day.is-sun .week-date b { color: var(--closed); }
.week-day.is-sat .week-date b { color: var(--navy); }
.week-day.is-today .week-date b { color: #fff; }
.calendar td.is-today .cal-tag.is-holiday, .calendar td.is-today.is-holiday .cal-date b, .calendar td.is-today.is-sun .cal-date b { color: #ffd2c6; }
.calendar td.is-today.is-sat:not(.is-holiday) .cal-date b { color: #fff; }
.calendar .docs { flex-direction: column; align-items: flex-start; gap: 4px; }
.calendar caption { background: transparent; padding: 14px 0 0; }
.month-call { margin-top: 20px; }
@media (max-width: 720px) {
  .legend-hours { margin-left: 0; width: 100%; }
  .calendar thead th { padding: 10px 4px; text-align: center; }
  .calendar td { height: 92px; padding: 6px 3px; }
  .cal-date { justify-content: center; margin-bottom: 6px; flex-wrap: wrap; gap: 2px; }
  .cal-date b { font-size: var(--t-body); }
  .cal-tag { display: none; }
  .calendar .docs { align-items: stretch; }
  .calendar .doc { min-height: 22px; padding: 1px 2px; font-size: 12px; letter-spacing: -0.04em; justify-content: center; }
  .calendar .day-none { font-size: 12px; text-align: center; }
}

/* Doctors: two cards, name large, title beside it */
.doctor-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.doctor-card { background: var(--paper); padding: clamp(32px, 4vw, 64px); display: grid; gap: 18px; align-content: start; min-height: 340px; }
.doctor-card h2 { font-size: clamp(56px, 6.4vw, 104px); letter-spacing: -0.06em; line-height: 1; color: var(--navy); font-weight: 700; }
.doctor-card h2 span { display: inline-block; margin-left: 16px; font-size: var(--t-lead); letter-spacing: -0.01em; font-weight: 600; color: var(--ink); vertical-align: 0.6em; }
.doctor-wait { color: var(--muted); margin-top: auto; }
@media (max-width: 720px) { .doctor-pair { grid-template-columns: 1fr; } .doctor-card { min-height: 0; } }

/* Sensor guide: numbered illustration and the same numbered text. */
.sensor-section { padding-top: 72px; padding-bottom: 72px; }
.sensor-heading { display: grid; gap: 18px; margin-bottom: 36px; }
.sensor-heading p, .sensor-note, .sensor-figure figcaption { color: var(--muted); }
.sensor-layout { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sensor-figure img { width: 100%; }
.sensor-figure figcaption { margin-top: 16px; font-size: var(--t-small); }
.sensor-list { display: grid; gap: 26px; }
.sensor-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.sensor-list li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: white; font-weight: 700; }
.sensor-list h3, .after-study h3 { font-size: var(--t-lead); margin-bottom: 8px; }
.sensor-note { margin-top: 28px; font-size: var(--t-small); max-width: 64ch; }
.sensor-list p { max-width: 64ch; }
.sensor-source { display: inline-block; font-size: var(--t-small); margin-top: 12px; }
.after-study { padding: 24px; background: var(--surface); margin-top: 28px; }
@media (max-width: 720px) { .sensor-layout { grid-template-columns: 1fr; } .sensor-figure { max-width: 400px; width: 100%; margin: auto; } .sensor-section { padding-top: 48px; padding-bottom: 48px; } }

/* User-started logo film: no autoplay or loop, no crop. */
/* Home logo film: the clinic's own logo animation, cut to its moving area, sits straight on the navy field.
   Edges are feathered so the video frame never shows as a box. Rests on the last frame; still image under
   reduced motion or when the video cannot play. */
/* Home hero: the logo film and today's card share the navy field in two columns, so they never overlap.
   The WebM's navy ground is keyed out (alpha), so the film has no box even where a browser darkens the
   page on its own; it is drawn wider than its column because its sides are empty ground. */
.hero { height: auto; min-height: max(640px, 100svh); display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 34vw); align-items: center; gap: clamp(24px, 3vw, 48px); padding: 104px var(--margin) clamp(24px, 3vw, 40px); }
.hero .hero-text { position: relative; z-index: 1; padding: 0; display: block; }
.hero .today { width: 100%; margin: 0; }
.logo-film { position: relative; width: 130%; margin-left: -15%; aspect-ratio: 1920 / 648; }
.logo-film video, .logo-film img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-film-end { display: none !important; }
.logo-film.is-still video { display: none; }
.logo-film.is-still .logo-film-end { display: block !important; }
@media (prefers-reduced-motion: reduce) { .logo-film video { display: none; } .logo-film .logo-film-end { display: block !important; } }
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 12px; }
  .hero .hero-text { justify-self: center; width: min(100%, 520px); }
  .logo-film { width: 120%; margin-left: -10%; }
}
@media (max-width: 720px) {
  .hero { min-height: 0; padding-top: 76px; padding-bottom: 24px; align-content: start; gap: 4px; }
  .logo-film { width: 140%; margin-left: -20%; }
  .hero .hero-text { width: 100%; }
}
[data-month-schedule] table[hidden], [data-week][hidden], [data-week-fallback][hidden], [data-month-empty][hidden] { display: none; }
.info-rows + .actions { margin-top: 28px; }
/* Sleep page, room section: a one-line heading over the details and the picture. */
.lab-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.lab-head h2 { font-size: var(--t-head); }
.lab-head p { font-size: var(--t-lead); max-width: 60ch; }
.lab-head + .lab-split .info-rows { margin-top: 0; }
/* A chapter band: marks where a long page turns to its next subject (sleep page: the test itself). */
.section.chapter { background: var(--navy); color: var(--on-navy); padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); }
.section.chapter h2 { color: #fff; }
.section.chapter .lab-head { margin-bottom: 0; }
.list-title { font-size: var(--t-lead); margin: 40px 0 16px; letter-spacing: -0.02em; }
/* Specialty clinics: two large linked cards, navy and warm white. */
.clinic-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clinic-card { display: grid; gap: 14px; align-content: start; min-height: 340px; padding: clamp(32px, 4vw, 56px); background: var(--navy); color: var(--on-navy); text-decoration: none; transition: transform .35s var(--ease), background-color .25s var(--ease); }
.clinic-card.alt { background: var(--surface); color: var(--ink); }
.clinic-card h3 { font-size: var(--t-head); color: #fff; letter-spacing: -0.04em; }
.clinic-card.alt h3 { color: var(--navy); }
.clinic-card > p { font-size: var(--t-lead); font-weight: 600; }
.clinic-card ul { display: grid; gap: 6px; margin-top: 6px; }
.clinic-card li::before { content: "·"; margin-right: 8px; color: var(--accent); font-weight: 700; }
.clinic-more { margin-top: auto; padding-top: 18px; font-weight: 600; }
.clinic-card:hover { background: var(--navy-deep); }
.clinic-card.alt:hover { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .clinic-card:hover { transform: translateY(-4px); } .clinic-card:hover .arrow { transform: translateX(5px); } }
.clinic-card .arrow { display: inline-block; margin-left: 8px; transition: transform .25s var(--ease); }
@media (max-width: 720px) { .clinic-cards { grid-template-columns: 1fr; } .clinic-card { min-height: 0; } }
.alert { margin-top: 24px; padding: 16px 20px; background: var(--paper); border-left: 4px solid var(--closed); font-weight: 600; } /* taste-skill-ignore: a safety notice needs its edge */
/* Seven menu items: the full menu needs desktop width; tablets use the menu button as phones do. */
@media (max-width: 1080px) {
  .nav, .site-header .call { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 10px 0 10px 16px; position: relative; z-index: 3; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { color: var(--ink); }
  .menu-panel { position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: var(--bg); color: var(--ink); padding: 84px var(--margin) 28px; display: grid; gap: 2px; font-size: var(--t-lead); font-weight: 600; }
  .menu-panel a { text-decoration: none; padding: 10px 0; }
  .menu-panel .call { display: block; margin-top: 12px; }
}
@media (min-width: 1081px) and (max-width: 1240px) { .nav { gap: 16px; font-size: 16px; } }
/* Home, under the hero: four facts a first-time visitor asks, on one line. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.facts li { padding: 22px var(--margin); text-align: center; font-weight: 600; font-size: var(--t-body); background: var(--paper); }
.facts a { text-decoration: none; color: var(--navy); }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } .facts li { padding: 16px 12px; font-size: var(--t-small); } }

/* Home: symptoms lead to the right page. Rows, each with the clinic it belongs to. */
.symptoms { display: grid; border-top: 1px solid var(--ink); } /* taste-skill-ignore: list rows */
.symptom { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 8px 24px; align-items: center; padding: 26px 8px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .25s var(--ease), padding .25s var(--ease); } /* taste-skill-ignore */
.symptom b { font-size: var(--t-lead); letter-spacing: -0.02em; }
.symptom b small { display: block; margin-top: 4px; font-size: var(--t-small); font-weight: 600; color: var(--navy); letter-spacing: 0; }
.symptom > span:not(.arrow) { color: var(--muted); }
.symptom .arrow { font-size: var(--t-lead); color: var(--navy); transition: transform .25s var(--ease); }
.symptom:hover { background: var(--surface); padding-left: 20px; padding-right: 20px; }
.symptom:hover .arrow { transform: translateX(6px); }
@media (max-width: 720px) { .symptom { grid-template-columns: 1fr auto; padding: 20px 4px; } .symptom > span:not(.arrow) { grid-column: 1; grid-row: 2; } .symptom .arrow { grid-row: 1 / 3; grid-column: 2; } }

/* Home: the tests as a compact grid; details live on the clinic page. */
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.test-grid li { background: var(--paper); padding: 26px 24px; display: grid; gap: 4px; }
.test-grid b { font-size: var(--t-lead); letter-spacing: -0.02em; }
.test-grid span { color: var(--muted); font-size: var(--t-small); }
@media (max-width: 720px) { .test-grid { grid-template-columns: 1fr 1fr; } .test-grid li { padding: 18px 16px; } }

/* Home: the doctors' names beside the heading, the week below. */
.doctor-names { display: flex; gap: 28px; flex-wrap: wrap; }
.doctor-names a { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.05em; line-height: 1.1; text-decoration: none; color: var(--navy); }
.doctor-names small { margin-left: 8px; font-size: var(--t-body); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.doctor-names a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
#week .week-head p { margin-top: 10px; }
#week .week-day { background: var(--surface); }
#week .week-day.is-short { background: var(--surface-2); }
#week .week-day.is-today { background: var(--navy); }
/* Equipment photo beside the test list (manufacturer's product photo, transparent ground). */
.equip-figure { margin-top: 32px; max-width: 380px; }
.equip-figure img { width: 100%; height: auto; background: var(--paper); }
.equip-figure figcaption { margin-top: 12px; font-weight: 600; font-size: var(--t-small); }
.equip-figure figcaption span { display: block; font-weight: 400; color: var(--muted); }
/* Sleep study sensors: front view beside the head-from-above and shins, then the nine numbered items. */
.sensor-figures { display: grid; grid-template-columns: 640fr 340fr; gap: 8px; max-width: 1000px; }
.sensor-figures img { width: 100%; height: auto; display: block; }
.sensor-figures figcaption { margin-top: 10px; font-size: var(--t-small); color: var(--muted); }
.sensor-grid { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.sensor-links { margin-top: 12px; font-size: var(--t-small); }
@media (max-width: 900px) { .sensor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sensor-figures, .sensor-grid { grid-template-columns: 1fr; } }
/* Sleep study sensors: the photo beside a short list of what each sensor measures. */
.sensor-purpose { display: grid; border-top: 1px solid var(--ink); align-self: start; } /* taste-skill-ignore: list rows */
.sensor-purpose li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); } /* taste-skill-ignore */
.sensor-purpose h3 { font-size: var(--t-body); font-weight: 700; }
@media (max-width: 720px) { .sensor-purpose li { grid-template-columns: 96px 1fr; } }

/* Tests page: one card per instrument, the manufacturer's photo on paper above the name and model. */
.equip-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
@media (max-width: 1100px) { .equip-list { grid-template-columns: 1fr 1fr; } }
.equip-list figure { background: var(--paper); aspect-ratio: 3 / 2; padding: 18px; overflow: hidden; }
.equip-list figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.equip-list h3 { margin-top: 20px; font-size: var(--t-lead); letter-spacing: -0.02em; }
.equip-list .equip-model { margin-top: 4px; font-size: var(--t-small); font-weight: 600; color: var(--navy); }
.equip-list p:not(.equip-model) { margin-top: 10px; color: var(--muted); }
@media (max-width: 900px) { .equip-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .equip-list { grid-template-columns: 1fr; gap: 28px; } }

/* Dizziness: explanatory film of the right Dix-Hallpike test, steps listed under it for reading and screen readers. */
.film video { width: 100%; height: auto; display: block; background: var(--paper); }
.film-steps { margin-top: 18px; display: grid; gap: 8px; padding-left: 1.3em; list-style: decimal; color: var(--muted); }

/* Location: hand-tidied 약도 drawn from OpenStreetMap data (scripts/make-location-map.cjs). */
.location-map { margin: 0; align-self: start; }
.location-map img { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); }
.location-map figcaption { margin-top: 10px; font-size: var(--t-small); color: var(--muted); }