@charset "UTF-8";

:root{

  --o-50 : #fff9f2;
  --o-100: #ffeeda;
  --o-200: #ffdcb4;
  --o-300: #ffc184;
  --o-400: #ff9b2f;
  --o-500: #f58220;
  --o-600: #e06c10;
  --o-700: #b5540a;

  --n-0  : #ffffff;
  --n-50 : #fffaf3;
  --n-100: #faf4ec;
  --n-200: #f0e6d8;
  --n-300: #eadbc9;
  --n-500: #a89684;
  --n-600: #756a61;
  --n-800: #453a32;
  --n-900: #28201b;

  --d-900: #241d18;
  --d-800: #332a23;
  --d-700: #453a31;

  --ok   : #2f9e5f;
  --off  : #c0392b;

  --btn-a: #d2620c;
  --btn-b: #dd6f13;

}

:root{
  --font: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR",
          "Apple SD Gothic Neo", "Segoe UI", sans-serif;

  --fs-popup: 1.25;
  --fs-scale: 1;

  --fs-xs  : calc(0.8125rem * var(--fs-scale));
  --fs-sm  : calc(0.9375rem * var(--fs-scale));
  --fs-base: calc(1.0625rem * var(--fs-scale));
  --fs-md  : calc(clamp(1.125rem, 1.4vw, 1.25rem) * var(--fs-scale));
  --fs-lg  : calc(clamp(1.375rem, 2vw, 1.75rem) * var(--fs-scale));
  --fs-xl  : calc(clamp(1.75rem, 3vw, 2.5rem) * var(--fs-scale));
  --fs-2xl : calc(clamp(2.25rem, 4.2vw, 3.5rem) * var(--fs-scale));

  --fs-sec : calc(clamp(2rem, 3.7vw, 3.1rem) * var(--fs-scale));

  --fs-3xl : calc(clamp(2.75rem, 6vw, 5rem) * (1 + (var(--fs-scale) - 1) * 0.5));
}

:root{
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10:128px;

  --r-sm: 12px;  --r-md: 20px;  --r-lg: 28px;  --r-xl: 36px;  --r-full: 999px;

  --sh-1: 0 2px 8px rgba(88,61,35,.05);
  --sh-2: 0 8px 24px rgba(88,61,35,.07);
  --sh-3: 0 20px 48px rgba(88,61,35,.10);
  --sh-4: 0 32px 72px rgba(88,61,35,.14);

  --section-y: var(--sp-9);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

[id]{ scroll-margin-top: 96px; }

body{
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--n-900);
  background: var(--n-50);
  line-height: 1.7;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; height: auto; display: block; }

h1,h2,h3,h4{ margin: 0; letter-spacing: -.045em; line-height: 1.18; font-weight: 900; }
p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }

a:focus-visible, button:focus-visible{
  outline: 3px solid var(--o-500); outline-offset: 3px; border-radius: 6px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{ width: min(1240px, calc(100% - var(--sp-6))); margin-inline: auto; }
.container-wide{ width: min(1480px, calc(100% - var(--sp-6))); margin-inline: auto; }

.ico{
  display:inline-block; width:22px; height:22px; flex:none;
  background-color: currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.ico-lg{ width:26px; height:26px; }

.ico-clock{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
}

.ico-pin{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

.ico-calendar{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E");
}

.ico-stetho{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v6a4.2 4.2 0 0 0 8.4 0V3'/%3E%3Cpath d='M5 3h2M11.4 3h2'/%3E%3Cpath d='M9.2 13.2v1.3a5.3 5.3 0 0 0 5.3 5.3'/%3E%3Ccircle cx='17.6' cy='17.6' r='2.8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v6a4.2 4.2 0 0 0 8.4 0V3'/%3E%3Cpath d='M5 3h2M11.4 3h2'/%3E%3Cpath d='M9.2 13.2v1.3a5.3 5.3 0 0 0 5.3 5.3'/%3E%3Ccircle cx='17.6' cy='17.6' r='2.8'/%3E%3C/svg%3E");
}

.ico-building{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='2.4'/%3E%3Cpath d='M12 8v5M9.5 10.5h5'/%3E%3Cpath d='M10 20.5v-3.6h4v3.6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='2.4'/%3E%3Cpath d='M12 8v5M9.5 10.5h5'/%3E%3Cpath d='M10 20.5v-3.6h4v3.6'/%3E%3C/svg%3E");
}

.ico-arrow{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E");
  width:18px; height:18px;
}

.ico-subway{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.6' width='14' height='13.8' rx='3.4'/%3E%3Cpath d='M5 10.6h14M9 16.4h6M8.6 20.4l-1.6 1.6M15.4 20.4l1.6 1.6'/%3E%3Ccircle cx='9' cy='13.5' r='.95' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='13.5' r='.95' fill='%23000' stroke='none'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.6' width='14' height='13.8' rx='3.4'/%3E%3Cpath d='M5 10.6h14M9 16.4h6M8.6 20.4l-1.6 1.6M15.4 20.4l1.6 1.6'/%3E%3Ccircle cx='9' cy='13.5' r='.95' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='13.5' r='.95' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.ico-parking{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='4'/%3E%3Cpath d='M9.6 17V7.6h3.1a3.05 3.05 0 0 1 0 6.1H9.6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='4'/%3E%3Cpath d='M9.6 17V7.6h3.1a3.05 3.05 0 0 1 0 6.1H9.6'/%3E%3C/svg%3E");
}

.ico-phone{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 16.9v2.9a2 2 0 0 1-2.2 2 19.6 19.6 0 0 1-8.5-3 19.3 19.3 0 0 1-6-6 19.6 19.6 0 0 1-3-8.6 2 2 0 0 1 2-2.2h2.9a2 2 0 0 1 2 1.7c.13 1 .36 1.9.7 2.8a2 2 0 0 1-.45 2.1L7.6 9.9a15.8 15.8 0 0 0 5.9 5.9l1.3-1.25a2 2 0 0 1 2.1-.45c.9.34 1.8.57 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 16.9v2.9a2 2 0 0 1-2.2 2 19.6 19.6 0 0 1-8.5-3 19.3 19.3 0 0 1-6-6 19.6 19.6 0 0 1-3-8.6 2 2 0 0 1 2-2.2h2.9a2 2 0 0 1 2 1.7c.13 1 .36 1.9.7 2.8a2 2 0 0 1-.45 2.1L7.6 9.9a15.8 15.8 0 0 0 5.9 5.9l1.3-1.25a2 2 0 0 1 2.1-.45c.9.34 1.8.57 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

.todo{
  position:relative;
  border:1.5px dashed var(--n-300); border-radius: var(--r-md);
  background: linear-gradient(135deg, #fdfaf6, #faf5ee);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  margin-top: var(--sp-5);
}
.todo::before{
  content:"원장님 작성";
  position:absolute; top:-11px; left: var(--sp-5);
  background: var(--n-800); color:#fff;
  font-size:11px; font-weight:900; letter-spacing:.02em;
  padding: 4px 11px; border-radius: var(--r-full);
}
.todo.is-check::before{ content:"확인 필요"; background: var(--o-600); }
.todo p{ color: var(--n-600); font-size: var(--fs-sm); line-height:1.75; }
.todo p + p{ margin-top: var(--sp-3); }
.todo b{ color: var(--n-800); }

section{ padding-block: var(--section-y); }

.sec-bg-white{ background: var(--n-0); }
.sec-bg-cream{ background: var(--n-50); }
.sec-bg-soft { background: var(--n-100); }

.eyebrow{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 900;
  letter-spacing: .18em; color: var(--o-600);
  text-transform: uppercase;
}
.eyebrow::before{
  content:""; width: 22px; height: 2px;
  background: var(--o-500); border-radius: 2px;
}

.sec-head{ margin-bottom: var(--sp-8); max-width: 760px; }
.sec-head h2{ font-size: var(--fs-sec); margin-block: var(--sp-4) var(--sp-4); }
.sec-head p { font-size: var(--fs-md); color: var(--n-600); }

.sec-head-split{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: var(--sp-7); margin-bottom: var(--sp-8); max-width: none;
}
.sec-head-split h2{ font-size: var(--fs-sec); margin-block: var(--sp-4) 0; }
.sec-head-split p { font-size: var(--fs-md); color: var(--n-600); max-width: 420px; }

.sec-lead{
  font-size: var(--fs-md); color: var(--n-600); line-height:1.85;
  max-width: 760px; margin: calc(var(--sp-7) * -1) 0 var(--sp-7);
}

.note-box{
  border:1px solid var(--o-200); border-left:4px solid var(--o-500);
  border-radius: var(--r-sm); padding: var(--sp-5) var(--sp-5);
  background: var(--o-50); color: var(--n-700);
  font-size: var(--fs-sm); font-weight:500; line-height:1.85; max-width:880px;
}
.note-box b{ color: var(--o-700); font-weight:900; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 900;
  border: 1px solid transparent; background: var(--n-0); color: var(--n-800);
  white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }

.btn-primary{
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: #fff; box-shadow: 0 12px 28px rgba(210,98,12,.30);
}
.btn-primary:hover{ box-shadow: 0 18px 38px rgba(210,98,12,.38); }

.btn-ghost{ background: var(--n-0); border-color: var(--n-300); color: var(--n-800); box-shadow: var(--sh-1); }
.btn-ghost:hover{ box-shadow: var(--sh-2); }

.btn-onDark{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color:#fff; }
.btn-onDark:hover{ background: rgba(255,255,255,.18); }

.btn-lg{ padding: var(--sp-5) var(--sp-7); font-size: var(--fs-base); }

.btn-row{ display:flex; flex-wrap:wrap; gap: var(--sp-3); align-items:center; }

.topbar{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,250,243,.82);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.topbar.is-stuck{
  border-bottom-color: var(--n-300);
  box-shadow: 0 4px 20px rgba(88,61,35,.06);
}

.nav{ height: 76px; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-5); }

.brand{ display:flex; align-items:center; gap: var(--sp-3); font-weight:900; letter-spacing:-.04em; }
.brand .mark{ font-size: 30px; color: var(--o-500); font-weight: 950; line-height: 1; }
.brand .name{ font-size: var(--fs-sm); line-height: 1.3; }
.brand small{
  display:block; font-size: 10.5px; letter-spacing: .12em;
  color: var(--n-500); font-weight: 700;
}

.menu{ display:flex; align-items:center; gap: var(--sp-5); font-size: var(--fs-sm); font-weight: 800; color: var(--n-800); }
.menu a:not(.btn){ position: relative; padding-block: var(--sp-2); }
.menu a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background: var(--o-500); border-radius:2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.menu a:not(.btn):hover::after{ transform: scaleX(1); }
.menu a.is-active{ color: var(--o-600); }
.menu a.is-active::after{ transform: scaleX(1); }

.menu-item{ position:relative; display:flex; align-items:center; padding-block: var(--sp-3); }

.submenu{
  position:absolute; top:100%; left:50%; transform: translateX(-50%);
  min-width:172px; padding: var(--sp-3);
  background: var(--n-0); border:1px solid var(--n-200);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  display:grid; gap:2px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s var(--ease), visibility .18s;
}
.menu-item:hover .submenu,
.menu-item:focus-within .submenu{
  opacity:1; visibility:visible; pointer-events:auto;
}
.submenu a{
  display:block; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); white-space:nowrap;
  font-size: var(--fs-sm); font-weight:700; color: var(--n-800);
}
.submenu a:hover{ background: var(--o-100); color: var(--o-700); }
.submenu a.is-active{ background: var(--o-100); color: var(--o-700); }

.menu .submenu a::after{ content:none; }

.hamburger{
  display:none; width:46px; height:46px; padding:0; cursor:pointer;
  border:1px solid var(--n-300); border-radius: var(--r-sm);
  background: var(--n-0); position: relative; box-shadow: var(--sh-1);
}
.hamburger span{
  position:absolute; left:13px; width:20px; height:2px;
  background: var(--n-800); border-radius:2px;
  transition: transform .28s var(--ease), opacity .2s ease, top .28s var(--ease);
}
.hamburger span:nth-child(1){ top:16px; }
.hamburger span:nth-child(2){ top:22px; }
.hamburger span:nth-child(3){ top:28px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ top:22px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ top:22px; transform: rotate(-45deg); }

.drawer{
  position: fixed; inset: 0; z-index: 55;
  background: rgba(36,29,24,.5); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  overflow: hidden;
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer-panel{
  position:absolute; top:0; right:0; width: min(340px, 86%); height:100%;
  background: var(--n-50); padding: 92px var(--sp-6) var(--sp-6);
  box-shadow: -24px 0 60px rgba(60,40,25,.24);
  transform: translateX(100%);
  transition: transform .36s var(--ease);
  overflow-y: auto;
}
.drawer.is-open .drawer-panel{ transform: none; }
.drawer-panel a:not(.btn){
  display:block; padding: var(--sp-4) var(--sp-1);
  font-size: var(--fs-md); font-weight: 850;
  border-bottom: 1px solid var(--n-300);
}

.drawer-panel a.sub{
  padding-left: var(--sp-5); font-size: var(--fs-sm);
  font-weight: 800; color: var(--n-600);
}
.drawer-panel a.sub::before{ content:"· "; color: var(--o-400); }
.drawer-panel .btn{ width:100%; margin-top: var(--sp-4); }
.drawer-panel .btn + .btn{ margin-top: var(--sp-2); }

.hero{
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--n-900);
}

.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit: cover;
  object-position: 72% center;

  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform: scale(1.02); }
  to  { transform: scale(1.12); }
}

.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg,
      rgba(28,22,18,.94) 0%,
      rgba(28,22,18,.86) 26%,
      rgba(28,22,18,.42) 52%,
      rgba(28,22,18,.06) 76%),
    linear-gradient(to top, rgba(28,22,18,.55), transparent 42%);
}

.hero-inner{ position:relative; z-index:2; width:100%; padding-block: var(--sp-10) var(--sp-9); }

.hero .hero-copy{ color: #fff; }
.hero-copy{ max-width: 620px; }
.hero .hero-copy .eyebrow{ color: var(--o-300); }
.hero .hero-copy .eyebrow::before{ background: var(--o-400); }

.hero h1{
  font-size: var(--fs-3xl); margin-block: var(--sp-5) var(--sp-5);
  letter-spacing: -.06em; text-shadow: 0 2px 30px rgba(0,0,0,.28);
}
.hero .hero-sub{
  font-size: var(--fs-lg); font-weight: 850; color: #ffe6cb;
  margin-bottom: var(--sp-3);
}
.hero .hero-desc{
  font-size: var(--fs-md); color: rgba(255,255,255,.86);
  margin-bottom: var(--sp-7); max-width: 520px;
}

.status-pill{
  display:inline-flex; align-items:center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  font-size: var(--fs-sm); font-weight: 850; color:#fff;
}
.status-dot{
  width:9px; height:9px; border-radius:50%; background: var(--n-500);
  box-shadow: 0 0 0 0 rgba(47,158,95,.6);
}
.status-pill.is-open  .status-dot{ background: #52d68a; animation: pulse 2.4s infinite; }
.status-pill.is-closed .status-dot{ background: #ff7a6b; }
.status-pill.is-break  .status-dot{ background: #ffc46b; }

.status-pill.is-lastcall .status-dot{ background: #ffc46b; }

.popup-now{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4); margin-bottom: var(--sp-5);
  border-radius: var(--r-md); text-align:center; line-height:1.5;
  background: var(--n-100); border:1px solid var(--n-200);
  font-size: var(--fs-base); font-weight:900; color: var(--n-600);
}
.popup-now.is-open  { background:#e9f8ef; border-color:#bde5cd; color:#1c6440; }
.popup-now.is-open   .status-dot{ background:#2f9e5f; animation: pulse 2.4s infinite; }
.popup-now.is-closed{ background:#fdeeee; border-color:#f2cccc; color:#9d2f2f; }
.popup-now.is-closed .status-dot{ background:#c0392b; }
.popup-now.is-break { background:#fff6e0; border-color:#f0dfb4; color:#8a6100; }
.popup-now.is-break  .status-dot{ background:#d08700; }
.popup-now.is-lastcall{ background:#fff6e0; border-color:#f0dfb4; color:#8a6100; }
.popup-now.is-lastcall .status-dot{ background:#d08700; }

@keyframes pulse{
  0%  { box-shadow: 0 0 0 0 rgba(82,214,138,.55); }
  70% { box-shadow: 0 0 0 12px rgba(82,214,138,0); }
  100%{ box-shadow: 0 0 0 0 rgba(82,214,138,0); }
}
.status-sub{ opacity:.72; font-weight:400; }

.quickbar{
  position: relative; z-index: 3; margin-top: calc(var(--sp-8) * -1);
}
.quickbar-inner{
  display:grid; grid-template-columns: repeat(3, 1fr);
  background: var(--n-0); border-radius: var(--r-lg);
  box-shadow: var(--sh-4); overflow:hidden;
}
.quick-item{
  padding: var(--sp-6); display:flex; gap: var(--sp-4); align-items:center;
  border-right: 1px solid var(--n-200);
  transition: background .2s ease;
}
.quick-item:last-child{ border-right: 0; }
.quick-item:hover{ background: var(--o-50); }

.quick-ico{
  width:26px; height:26px; flex:none; margin-top:3px;
  background-color: var(--o-600);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.quick-t{ font-size: var(--fs-xs); color: var(--n-500); font-weight:850; letter-spacing:.06em; }
.quick-v{ font-size: var(--fs-md); font-weight:900; letter-spacing:-.03em; }

.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.feature{
  background: var(--n-0); border:1px solid var(--n-200);
  border-radius: var(--r-lg); padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.feature:hover{ border-color: var(--o-300); }

.feature-ico{
  width:30px; height:30px; margin-bottom: var(--sp-5);
  display:grid; place-items:center;
  color: var(--o-600);
}
.feature h3{ font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.feature p { font-size: var(--fs-sm); color: var(--n-600); }

.clinic-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

.clinic-card{
  position:relative; display:flex; flex-direction:column;
  background: var(--n-0); border-radius: var(--r-lg); overflow:hidden;
  border: 1px solid var(--n-200); box-shadow: var(--sh-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.clinic-card:hover{ transform: translateY(-8px); box-shadow: var(--sh-4); }

.clinic-thumb{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.clinic-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.clinic-card:hover .clinic-thumb img{ transform: scale(1.07); }
.clinic-thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(30,22,16,.42), transparent 55%);
}
.clinic-no{
  position:absolute; left: var(--sp-4); top: var(--sp-4); z-index:1;
  width:34px; height:34px; border-radius: var(--r-full);
  display:grid; place-items:center;
  background: rgba(255,255,255,.92); color: var(--o-600);
  font-size: var(--fs-xs); font-weight: 950;
}
.clinic-body{ padding: var(--sp-5); display:flex; flex-direction:column; flex:1; }
.clinic-body h3{ font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.clinic-body p { font-size: var(--fs-sm); color: var(--n-600); }
.tag-row{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.tag{
  font-size: 12px; font-weight:850; color: var(--o-700);
  background: var(--o-50); border:1px solid var(--o-200);
  border-radius: var(--r-full); padding: 5px 10px;
}
.clinic-more{
  margin-top:auto; padding-top: var(--sp-4);
  font-size: var(--fs-sm); font-weight:900; color: var(--o-600);
  display:flex; align-items:center; gap: var(--sp-2);
}
.clinic-more span{ transition: transform .25s var(--ease); }
.clinic-card:hover .clinic-more span{ transform: translateX(5px); }

.clinic-card.is-feature{ border-color: var(--o-300); box-shadow: 0 14px 34px rgba(245,130,32,.16); }

.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 252px; gap: var(--sp-4);
}
.g-item{
  position:relative; margin:0; overflow:hidden;
  border-radius: var(--r-md); background: var(--n-200);
  cursor: zoom-in;
}
.g-item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.g-item:hover img{ transform: scale(1.06); }

.g-item figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top,
              rgba(28,22,18,.88) 0%, rgba(28,22,18,.55) 45%, transparent 100%);
  color:#fff; font-size: var(--fs-sm); font-weight:400;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  opacity:0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s var(--ease);
}
.g-item:hover figcaption{ opacity:1; transform:none; }

@media (hover: none){
  .g-item figcaption{ opacity:1; transform:none; }
}
.g-wide{ grid-column: span 2; }

.gallery-more{ display:none; }
.g-tall{ grid-row: span 2; }

.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap: var(--sp-5); padding: var(--sp-6);
  background: rgba(20,15,12,.92); backdrop-filter: blur(6px);
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width:min(1100px,92vw); max-height:78vh;
  border-radius: var(--r-md); box-shadow: var(--sh-4);
}
.lightbox-close{
  position:absolute; top: var(--sp-5); right: var(--sp-5);
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1);
  color:#fff; font-size:22px; line-height:1;
}
.lightbox-cap{
  position:static; text-align:center; max-width:min(1100px,92vw);
  color: rgba(255,255,255,.82); font-size: var(--fs-sm); font-weight:400;
}

.doctor-wrap{ display:grid; grid-template-columns: .85fr 1.15fr; gap: var(--sp-8); align-items:center; }
.doctor-photo{ position:relative; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-3); }
.doctor-photo img{ width:100%; aspect-ratio: 4/3.4; object-fit:cover; }
.doctor-copy h2{ font-size: var(--fs-sec); margin-block: var(--sp-4) var(--sp-2); }
.doctor-role{ font-size: var(--fs-md); font-weight:900; color: var(--o-600); margin-bottom: var(--sp-5); }
.doctor-copy > p{ font-size: var(--fs-md); color: var(--n-600); margin-bottom: var(--sp-6); }

.career{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); }

.career li{
  background: var(--n-0); border:1px solid var(--n-200);
  border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-4);
  font-weight:400; font-size: var(--fs-sm); color: var(--n-800);
  display:flex; align-items:center; gap: var(--sp-3);
}

.sec-bg-white .career li{ background: var(--n-50); }

.career li::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background: var(--o-400);
}

.info-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

.card{
  background: var(--n-0); border:1px solid var(--n-200);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: var(--sp-7);
}
.card h3{ font-size: var(--fs-lg); margin-bottom: var(--sp-5); }

.hours{ display:grid; }

.hour-head,
.hour-row{
  display:grid;
  grid-template-columns: 82px 1fr 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  margin-inline: calc(var(--sp-4) * -1);
  padding-inline: var(--sp-4);
}
.hour-day{ white-space: nowrap; }

.hour-head{
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--n-300);
  font-size: var(--fs-xs); font-weight: 800; color: var(--n-600);
  letter-spacing: -.02em;
}

.hour-row{
  padding-block: var(--sp-4); border-bottom: 1px solid var(--n-200);
  font-weight: 850; font-size: var(--fs-sm);
}
.hour-row:last-child{ border-bottom:0; }

.hour-day{ color: var(--n-600); }
.hour-row.is-weekend .hour-day{ color: var(--o-600); }

.hour-time,
.hour-row .hour-lunch{ font-variant-numeric: tabular-nums; }

.hour-time{ color: var(--n-800); }

.hour-row .hour-lunch{ font-weight: 700; color: var(--n-600); }
.hour-row .hour-lunch.is-none{ font-weight: 400; }

.hour-row.is-today{ background: var(--o-50); border-radius: var(--r-sm); }
.hour-row.is-today .hour-day::after{
  content:"오늘"; display:inline-block; font-size:10px; font-weight:900;
  color:#fff; background: var(--o-500); border-radius: var(--r-full);
  padding: 1px 6px; margin-left: 5px; vertical-align: 2px;
}

.hours-reception{
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--o-50); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; color: var(--o-700);
}

@media (max-width: 480px){
  .hour-head,
  .hour-row{
    grid-template-columns: 74px 1fr 1fr;
    gap: var(--sp-2);
    margin-inline: 0; padding-inline: 0;
  }
  .hour-row{ font-size: var(--fs-xs); }
}

@media (max-width: 400px){
  .hour-head,
  .hour-row{ grid-template-columns: 54px 1fr 1fr; }
  .hour-time,
  .hour-lunch{ white-space: nowrap; }
  .hour-row.is-today .hour-day::after{ display:none; }
}

.note{
  margin-top: var(--sp-5); background: var(--o-50); border:1px solid var(--o-200);
  border-radius: var(--r-sm); padding: var(--sp-4);
  color: var(--o-700); font-weight:400; font-size: var(--fs-sm);
}

.closed-banner{
  display:none; margin-bottom: var(--sp-5);
  background: #fdeeee; border:1px solid #f2cccc; border-left: 4px solid var(--off);
  border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5);
  color: #9d2f2f; font-weight:900; font-size: var(--fs-sm);
}
.closed-banner.is-on{ display:block; }

.closed-banner .demo-note{
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed #e0b9b9;
  font-size: 12px; font-weight:700; color:#a97b7b; line-height:1.6;
}

.addr-list{ display:grid; gap:0; margin-block: var(--sp-5); }
.addr-list > div{
  display:grid; grid-template-columns: 62px 1fr; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--n-200);
  font-size: var(--fs-sm);
}
.addr-list > div:last-child{ border-bottom:0; }
.addr-list dt, .addr-list .k{
  color: var(--n-500); font-weight:850; letter-spacing:-.02em;
}
.addr-list dd, .addr-list .v{
  margin:0; color: var(--n-800); font-weight:400;
}
@media (max-width:760px){
  .addr-list > div{ grid-template-columns: 52px 1fr; gap: var(--sp-3); }
}

.map-thumb{ border-radius: var(--r-md); overflow:hidden; border:1px solid var(--n-200); }

.cal-head{ display:flex; align-items:baseline; gap: var(--sp-4); flex-wrap:wrap; margin-bottom: var(--sp-5); }
.cal-head h3{ margin:0; }
.cal-legend{
  margin-left:auto; font-size: var(--fs-xs); font-weight:400; color: var(--n-500);
  display:flex; align-items:center; gap: var(--sp-4); flex-wrap:wrap;
}
.cal-legend span{ display:inline-flex; align-items:center; gap: var(--sp-2); }
.cal-legend i{ width:12px; height:12px; border-radius:4px; }
.cal-legend i.lg-closed{ background:#fbdcdc; border:1px solid #eeaeae; }
.cal-legend i.lg-today { background: var(--o-500); border-radius:50%; }

table.calendar{ width:100%; border-collapse:separate; border-spacing:3px; table-layout:fixed; }
table.calendar th{
  background: var(--o-500); color:#fff; font-weight:900; font-size: var(--fs-xs);
  padding: var(--sp-3) 2px; border-radius: var(--r-sm);
}
table.calendar th:first-child{ background: var(--o-600); }

table.calendar td{
  vertical-align:top; height:60px; padding: 6px 3px; text-align:center;
  background: var(--n-50); border-radius: var(--r-sm);
  border: 1px solid var(--n-200);
}

table.calendar td.cal-other{ background: transparent; border-color: var(--n-100); }
table.calendar td.cal-other .cal-day{ color: var(--n-300); font-weight:400; }
table.calendar td.empty{ background: transparent; border-color: transparent; }

.cal-day{
  font-weight:900; font-size: var(--fs-sm);
  width:26px; height:26px; line-height:26px;
  margin: 0 auto var(--sp-1); border-radius:50%;
}

.cal-time{
  display:block; height:18px; line-height:18px;
  font-size: 10.5px; color: var(--n-600); font-weight:400;
}
.cal-sun .cal-day{ color:#c63e3e; }
.cal-sat .cal-day{ color:#3f6fd0; }

table.calendar td.cal-closed{ background:#fbdcdc; border-color:#eeaeae; }
td.cal-closed .cal-day{ color:#8f2626; }

table.calendar td.cal-other.cal-closed .cal-day{ color:#8f2626; font-weight:900; }

td.cal-closed .cal-time{
  width:fit-content; margin:0 auto;
  background: var(--off); color:#fff;
  font-size:10px; font-weight:900; letter-spacing:.02em;
  padding: 0 9px; border-radius: var(--r-full);
}

table.calendar td.cal-today{ border-color: var(--o-400); box-shadow: 0 0 0 2px var(--o-200) inset; }
td.cal-today .cal-day{
  background: var(--o-500); color:#fff;
  box-shadow: 0 3px 10px rgba(245,130,32,.4);
}

.closed-list{ display:flex; flex-wrap:wrap; gap: var(--sp-2); }

.closed-chip{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-width:56px;
  padding: var(--sp-3) var(--sp-3);
  background: var(--n-0); border:1px solid var(--n-200); border-radius: var(--r-sm);
}
.closed-chip em{
  font-style:normal; font-size:11px; font-weight:850;

  color: var(--n-600); letter-spacing:.02em;
}
.closed-chip b{
  font-size:19px; font-weight:900; line-height:1.15;
  color: var(--n-800); font-variant-numeric: tabular-nums;
}
.closed-chip.is-sat em, .closed-chip.is-sat b{ color:#3f6fd0; }
.closed-chip.is-sun em, .closed-chip.is-sun b{ color:#c63e3e; }
.closed-none{ color: var(--n-500); font-size: var(--fs-sm); font-weight:400; }

.closed-box{
  background: var(--n-50); border:1px solid var(--n-200);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.closed-box h4{
  margin:0 0 var(--sp-4); font-size: var(--fs-sm); font-weight:900;
  color: var(--n-600); letter-spacing:-.02em;
}

.cta-band{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--d-900), var(--d-700));
  border-radius: var(--r-xl); padding: var(--sp-9) var(--sp-8);
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-7); flex-wrap:wrap;
}
.cta-band::after{
  content:""; position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,130,32,.26), transparent 68%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.cta-band p{ color: rgba(255,255,255,.72); font-size: var(--fs-sm); }

.footer{ background: var(--d-900); color: rgba(255,255,255,.62); padding-block: var(--sp-8); font-size: var(--fs-sm); }
.footer-inner{ display:flex; justify-content:space-between; gap: var(--sp-6); flex-wrap:wrap; }
.footer b{ color:#fff; }
.footer a:hover{ color:#fff; }

.fixed-mobile{ display:none; }

.popup-overlay{
  position:fixed; inset:0; z-index:150; display:none;
  align-items:center; justify-content:center; padding: var(--sp-4);
  background: rgba(28,22,18,.62); backdrop-filter: blur(4px);

}

.popup-promo{
  --fs-xs  : calc(0.8125rem * var(--fs-scale) * var(--fs-popup));
  --fs-sm  : calc(0.9375rem * var(--fs-scale) * var(--fs-popup));
  --fs-base: calc(1.0625rem * var(--fs-scale) * var(--fs-popup));
  --fs-md  : calc(clamp(1.125rem, 1.4vw, 1.25rem) * var(--fs-scale) * var(--fs-popup));
  --fs-lg  : calc(clamp(1.375rem, 2vw, 1.75rem)  * var(--fs-scale) * var(--fs-popup));
  --fs-xl  : calc(clamp(1.75rem, 3vw, 2.5rem)    * var(--fs-scale) * var(--fs-popup));
}
.popup-overlay.is-open{ display:flex; animation: fadeIn .25s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.popup-box{
  width:min(460px,100%); max-height:90vh; overflow-y:auto;
  background: var(--n-0); border-radius: var(--r-lg);
  padding: var(--sp-7); box-shadow: var(--sh-4);
  animation: popIn .34s var(--ease) both;
}
@keyframes popIn{ from{opacity:0; transform: translateY(18px) scale(.98)} to{opacity:1; transform:none} }
.popup-box h2{ font-size: var(--fs-xl); color: var(--o-600); text-align:center; margin-bottom: var(--sp-5); }

.popup-schedule{ width:min(760px,100%); padding: var(--sp-6) var(--sp-6) var(--sp-5); }

.popup-schedule h2{ font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.popup-schedule .popup-now{ margin-bottom: var(--sp-3); }
.popup-schedule .popup-cal{ margin-top: var(--sp-3); }
.popup-schedule .popup-hours{ margin-top: var(--sp-3); }
.popup-schedule .popup-buttons{ margin-top: var(--sp-4); }

.popup-cal{ margin-top: var(--sp-4); }

.popup-hours{
  margin: var(--sp-4) 0 0; text-align:center;
  font-size: var(--fs-xs); color: var(--n-600); font-weight:400;
}
.popup-hours b{ font-weight:850; color: var(--n-800); }

.popup-promo{ width:min(600px,100%); }

@media (max-width: 520px){
  .popup-box{ padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .popup-promo .promo-list{ gap: var(--sp-3); }
  .popup-promo .promo-card{ padding: var(--sp-4); }
  .popup-head{ margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); }
}

.popup-head{
  margin: 0 0 var(--sp-5); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--n-200);
  text-align:center; font-size: var(--fs-lg); font-weight:900;
  color: var(--btn-a); letter-spacing:-.03em;
}

.popup-promo-title{ margin-bottom: var(--sp-5); }
.popup-head + .popup-promo-title:not([hidden]){
  margin-top: calc(var(--sp-3) * -1);
  font-size: var(--fs-md); color: var(--o-700);
}

.promo-list{
  display:grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.promo-list > .promo-card:last-child:nth-child(odd){ grid-column: 1 / -1; }

.promo-card{
  display:flex; flex-direction:column; gap: var(--sp-2);
  padding: var(--sp-5);
  border:1px solid var(--n-200); border-radius: var(--r-md);
  background: var(--n-50); text-align:left;
  transition: border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
a.promo-card:hover{
  border-color: var(--o-300); background: var(--n-0);
  transform: translateY(-2px); box-shadow: var(--sh-2);
}
.promo-name{ font-size: var(--fs-md); font-weight:900; color: var(--d-800); }
.promo-desc{ font-size: var(--fs-sm); font-weight:400; color: var(--n-600); line-height:1.6; }
.promo-sub{ font-size: var(--fs-xs); font-weight:700; color: var(--o-700); }

.promo-go{
  margin-top:auto; padding-top: var(--sp-3);
  font-size: var(--fs-xs); font-weight:850;

  color: var(--o-700);
}

.popup-actions{ text-align:center; margin-top: var(--sp-5); }

.popup-buttons{
  display:flex; gap: var(--sp-3); justify-content:center; margin-top: var(--sp-5);
  position: sticky; bottom: 0;
  padding-top: var(--sp-3); background: var(--n-0);
}
.popup-buttons button{
  border:none; border-radius: var(--r-full); padding: var(--sp-3) var(--sp-5);
  cursor:pointer; font-weight:850; font-family:inherit; font-size: var(--fs-sm);
}
.popup-close{ background: var(--n-200); color: var(--n-800); }
.popup-hide { background: var(--o-500); color:#fff; }

.c-hero{
  position:relative; overflow:hidden;
  background: linear-gradient(140deg, var(--o-50) 0%, var(--n-50) 55%, var(--o-100) 100%);
  padding-block: var(--sp-9);
}
.c-hero::after{
  content:""; position:absolute; right:-180px; top:-180px;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,130,32,.13), transparent 70%);
}
.c-hero .container{ position:relative; z-index:1; }
.c-hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items:center; }
.c-hero h1{ font-size: var(--fs-2xl); margin-block: var(--sp-5) var(--sp-5); }
.c-hero p.lead{ font-size: var(--fs-md); color: var(--n-600); margin-bottom: var(--sp-7); max-width:520px; }
.c-hero-photo{ border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-3); }
.c-hero-photo img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }

.crumb{ font-size: var(--fs-xs); font-weight:400; color: var(--n-600); }
.crumb a:hover{ color: var(--o-600); }

.symptom-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }

.symptom-grid.is-2{ grid-template-columns: repeat(2,1fr); }

.symptom{
  position:relative; overflow:hidden;
  background: var(--n-0); border:1px solid var(--n-200); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--sh-1);
  transition: border-color .2s var(--ease);
}

.symptom:hover{ border-color: var(--o-300); }

.symptom h3{ font-size: var(--fs-md); margin-bottom: var(--sp-3); letter-spacing:-.04em; }
.symptom p { color: var(--n-600); font-size: var(--fs-sm); }

.timeline{ position:relative; padding-left: 46px; }
.timeline::before{
  content:""; position:absolute; left:17px; top:10px; bottom:10px; width:2px;
  background: linear-gradient(to bottom, var(--o-300), var(--n-200));
}
.tl-item{ position:relative; padding-bottom: var(--sp-7); }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:-46px; top:0;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-weight:950; font-size: var(--fs-sm);
  background: linear-gradient(135deg, var(--o-500), var(--o-400)); color:#fff;
  box-shadow: 0 6px 16px rgba(245,130,32,.3);
}
.tl-item h3{ font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.tl-item p { color: var(--n-600); font-size: var(--fs-sm); }

.faq{ display:grid; gap: var(--sp-3); max-width: 880px; }
.faq-item{
  background: var(--n-0); border:1px solid var(--n-200);
  border-radius: var(--r-md); overflow:hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item.is-open{ border-color: var(--o-300); box-shadow: var(--sh-2); }
.faq-q{
  width:100%; text-align:left; cursor:pointer;
  background:none; border:none; font-family:inherit;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-base); font-weight:850; color: var(--n-900);
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
}
.faq-q::after{
  content:"+"; flex:none; font-size:22px; font-weight:400; color: var(--o-600);
  transition: transform .3s var(--ease);
}
.faq-item.is-open .faq-q::after{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }

.faq-item.is-open .faq-a{ max-height: 1600px; }
.faq-a-inner{
  padding: 0 var(--sp-6) var(--sp-6);
  color: var(--n-600); font-size: var(--fs-sm); line-height:1.75;
}
.faq-a-inner p{ margin-bottom: var(--sp-4); }
.faq-a-inner p:last-child{ margin-bottom:0; }
.faq-a-inner b{ color: var(--n-800); font-weight:800; }

.faq-todo{
  border:1px solid var(--n-200); border-left:3px solid var(--o-400);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5); background: var(--n-50); color: var(--n-600);
  font-size: 14px; font-weight:400; line-height:1.75;
}
.faq-todo b{ color: var(--n-800); font-weight:900; }

.symptom ul{ list-style:none; margin: var(--sp-4) 0 0; padding:0; display:grid; gap: var(--sp-3); }
.symptom ul li{
  position:relative; padding-left: 16px;
  font-size: var(--fs-sm); color: var(--n-600); line-height:1.7;
}
.symptom ul li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:6px; height:6px; border-radius:50%; background: var(--o-400);
}

.tool > p.chk-group{
  font-size: var(--fs-xs); font-weight:900; color: var(--o-700);
  line-height:1.6; margin: var(--sp-5) 0 var(--sp-3);
}
.tool > p.chk-group:first-of-type{ margin-top: var(--sp-4); }

.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-5); }

@media (min-width:1081px) and (max-height:820px){
  .hero-inner{ padding-block: var(--sp-8) var(--sp-7); }
}

@media (max-width:1080px){
  .c-hero-grid{ grid-template-columns:1fr; }
  .c-hero-photo{ order:-1; }

  .symptom-grid,
  .symptom-grid.is-2{ grid-template-columns:1fr; }
  .visit-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .c-hero{ padding-block: var(--sp-8); }
}

.js .reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s var(--ease);
}
.js .reveal.is-visible{ opacity:1; transform:none; }
.js .reveal[data-d="1"]{ transition-delay:.08s }
.js .reveal[data-d="2"]{ transition-delay:.16s }
.js .reveal[data-d="3"]{ transition-delay:.24s }
.js .reveal[data-d="4"]{ transition-delay:.32s }
.js .reveal[data-d="5"]{ transition-delay:.40s }

.hero-copy > *{ animation: fadeUp .9s var(--ease) both; }
.hero-copy > *:nth-child(1){ animation-delay:.10s }
.hero-copy > *:nth-child(2){ animation-delay:.22s }
.hero-copy > *:nth-child(3){ animation-delay:.34s }
.hero-copy > *:nth-child(4){ animation-delay:.46s }
.hero-copy > *:nth-child(5){ animation-delay:.58s }
.hero-copy > *:nth-child(6){ animation-delay:.70s }
@keyframes fadeUp{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

@media (max-width: 1080px){
  .menu{ display:none; }
  .hamburger{ display:block; }

  .clinic-grid{ grid-template-columns: repeat(2,1fr); }
  .feature-grid{ grid-template-columns: 1fr; }
  .doctor-wrap{ grid-template-columns: 1fr; }
  .info-grid  { grid-template-columns: 1fr; }
  .sec-head-split{ display:block; }
  .sec-head-split p{ margin-top: var(--sp-3); }

  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 190px; }
  .quickbar-inner{ grid-template-columns: 1fr; }
  .quick-item{ border-right:0; border-bottom:1px solid var(--n-200); }
  .quick-item:last-child{ border-bottom:0; }
}

@media (max-width: 760px){
  :root{ --section-y: var(--sp-7); }

  .nav{ height: 64px; }
  .brand small{ display:none; }

  .hero{ min-height: 88vh; }
  .hero-media img{ object-position: 66% center; }
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(28,22,18,.72) 0%, rgba(28,22,18,.55) 40%, rgba(28,22,18,.92) 100%);
  }

  .hero-inner{ padding-block: var(--sp-9) calc(var(--sp-8) + 56px); }
  .hero-copy{ max-width:none; }
  .btn-row .btn{ flex: 1 1 auto; }

  .clinic-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 230px; }

  .gallery-grid .g-item:nth-child(n+4){ display:none; }
  .gallery-more{ display:block; margin-top: var(--sp-5); text-align:center; }
  .g-wide{ grid-column:auto; }
  .career{ grid-template-columns: 1fr; }
  .card{ padding: var(--sp-5); }
  .cta-band{ padding: var(--sp-7) var(--sp-5); border-radius: var(--r-lg); }
  .popup-box{ padding: var(--sp-5); }

  table.calendar td{ height:56px; }
  .cal-time{ font-size: 9px; }

  .fixed-mobile{
    position:fixed; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); z-index:50;
    display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-2);
  }
  .fixed-mobile a{
    padding: var(--sp-4); border-radius: var(--r-full); text-align:center;
    font-weight:950; font-size: var(--fs-sm); box-shadow: 0 10px 28px rgba(0,0,0,.18);
  }
  .fixed-mobile a:first-child{ background: var(--o-500); color:#fff; }
  .fixed-mobile a:last-child { background: var(--n-0); color: var(--n-900); }

  .js .fixed-mobile{
    transform: translateY(calc(100% + var(--sp-3)));
    transition: transform .32s var(--ease);
  }
  .js .fixed-mobile.is-on{ transform:none; }
  .footer{ padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

.channels{ display:flex; gap: var(--sp-3); flex-wrap:wrap; margin-top: var(--sp-4); }
.channels a{
  display:inline-flex; align-items:center; gap:6px;
  padding: 7px 14px; border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.28);
  font-size: var(--fs-xs); font-weight:900; letter-spacing:-.02em;
  color: rgba(255,255,255,.88); transition: .2s var(--ease);
}
.channels a:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

.top-banner{
  background: var(--o-500); color:#fff;
  text-align:center; padding: 13px var(--sp-5);
  font-size: clamp(14px, 1.6vw, 16px); font-weight:900;
  letter-spacing:-.02em; line-height:1.5;
}
.top-banner a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.top-banner .sep{ opacity:.55; margin-inline: 8px; }
@media (max-width:520px){
  .top-banner .sep{ display:block; height:0; margin:2px 0; overflow:hidden; }
}

.addr-tel{ color: var(--o-700); text-decoration: underline; text-underline-offset: 3px; }
.addr-tel:hover{ color: var(--o-500); }

@media (hover:hover){ .addr-tel{ text-decoration:none; } }

.tools, .tool, .data-warn{
  --surface     : var(--n-0);
  --bg          : var(--n-50);
  --bg-alt      : var(--n-100);
  --line        : var(--n-200);
  --card-border : 1px solid var(--n-200);
  --ink         : var(--d-800);
  --ink-2       : var(--n-600);
  --ink-3       : var(--n-600);
  --brand       : var(--o-500);
  --brand-d     : var(--o-700);
  --brand-l     : var(--o-100);
  --r           : var(--r-sm);
  --sh          : var(--sh-2);
}

.tools{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:900px){ .tools{ grid-template-columns:1fr; } }

.tool{
  background:var(--surface); border:var(--card-border); border-radius:var(--r-lg);
  padding: var(--sp-6); box-shadow:var(--sh); display:flex; flex-direction:column;
}
.tool h3{ font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.tool > p{ font-size: var(--fs-sm); color:var(--ink-2); font-weight:400; line-height:1.75; margin-bottom: var(--sp-5); }

.fld{ display:grid; gap: var(--sp-4); max-width:560px; }
.seg{ max-width:340px; }
.fld .line{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-3); }

.fld .line[hidden]{ display:none; }

@media (max-width:520px){
  .fld .line{ grid-template-columns:1fr; }
}
.fld label{ display:grid; gap:6px; font-size: var(--fs-xs); font-weight:850; color:var(--ink-2); }
.fld input, .fld select{
  font:inherit; font-size: var(--fs-sm); font-weight:700;
  padding: var(--sp-3) var(--sp-4);
  border:1px solid var(--n-300); border-radius:var(--r); background:var(--bg);
  color:var(--ink); width:100%; transition:.2s;
}
.fld input:focus, .fld select:focus{
  outline:none; border-color:var(--brand); background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-l);
}
.fld .unit{ position:relative; }
.fld .unit input{ padding-right:44px; }
.fld .unit em{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:14px; font-weight:850; color:var(--ink-3); pointer-events:none;
}

.seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg label{
  display:block; text-align:center; padding: var(--sp-3); border-radius:var(--r);
  border:1px solid var(--n-300); font-size: var(--fs-sm); font-weight:800;
  color:var(--ink-2); cursor:pointer; transition:.2s; background:var(--bg);
}
.seg input{ position:absolute; opacity:0; width:0; height:0; }

.seg label.is-on,
.seg label:has(input:checked){
  border-color:var(--brand); background:var(--brand-l); color:var(--brand-d);
}
.seg label:hover{ border-color:var(--brand); }

.tool button[type=submit]{
  align-self:flex-start; margin-top: var(--sp-5);
  background:var(--brand); color:#fff; border:0; border-radius:var(--r-full);
  padding: var(--sp-4) var(--sp-7); font-family:inherit;
  font-size: var(--fs-sm); font-weight:900; cursor:pointer; transition:.2s;
}
.tool button[type=submit]:hover{ background:var(--brand-d); }

.tool-out{ margin-top:22px; padding-top:22px; border-top:1px dashed var(--line); }
.tool-out[hidden]{ display:none; }
.warn-line{ color:#b03a2e; font-weight:850; font-size:15px; }
.res-lead{ font-size:15px; font-weight:850; color:var(--ink-2); margin-bottom:16px; }
.res-sub{ font-size:14px; font-weight:800; color:var(--ink-3); margin-top:14px; }
.res-h{ font-size:14px; font-weight:900; color:var(--brand-d); margin:18px 0 10px; }

.res-h.res-now{
  display:inline-block; margin-top:4px;
  background: var(--brand); color:#fff;
  padding:5px 13px; border-radius: var(--r-full); font-size:13px;
}

.res-row{ margin-bottom:26px; }
.res-row:last-of-type{ margin-bottom:14px; }
.res-top{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:baseline; margin-bottom:10px; }
.res-top b{ font-size:17px; }
.res-p{ font-size:14.5px; font-weight:800; color:var(--brand-d); }
.res-bar{
  position:relative; height:12px; border-radius:999px;
  background:linear-gradient(90deg,#e8eef3,var(--brand-l),#e8eef3);
  border:1px solid var(--line);
}
.res-bar span{
  position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  background:var(--brand); border:3px solid var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.18); transform:translate(-50%,-50%);
}
.res-scale{ display:flex; justify-content:space-between; margin-top:7px; }
.res-scale i{ font-style:normal; font-size:11.5px; font-weight:800; color:var(--ink-3); }

.res-note{
  margin-top:16px; padding:14px 16px; background:var(--bg-alt); border-radius:var(--r);
  font-size:13.5px; font-weight:750; color:var(--ink-2); line-height:1.7;
}
.res-note b{ color:var(--ink); font-weight:900; }

.res-src{
  margin-top:10px; font-size:12.5px; font-weight:400; color:var(--ink-2);
  text-align:right;
}

.way-tab{
  display:inline-flex; gap:2px; padding:3px; margin-bottom:8px;
  background:var(--n-200); border:1px solid var(--n-300); border-radius: var(--r-full);
}
.way-tab label{
  padding:5px 13px; border-radius: var(--r-full); cursor:pointer;
  font-size:12.5px; font-weight:850; color:var(--n-600); transition:.15s;
}
.way-tab input{ position:absolute; opacity:0; width:0; height:0; }

.way-tab label.on,
.way-tab label:has(input:checked){
  background:var(--n-0); color:var(--btn-a);
  box-shadow:0 1px 4px rgba(88,61,35,.18);
}
.way-tab label:hover{ color:var(--btn-a); }

.chk-list{ display:grid; gap:9px; }
.chk-list label{
  display:grid; grid-template-columns:20px 1fr; gap: var(--sp-3); align-items:start;
  padding: var(--sp-3) var(--sp-4); border:1px solid var(--n-300); border-radius:var(--r);
  font-size: var(--fs-sm); font-weight:400; line-height:1.6; cursor:pointer;
  background:var(--bg); transition:.2s;
}
.chk-list label:hover{ border-color:var(--brand); }

.chk-list label.is-on,
.chk-list label:has(input:checked){ border-color:var(--brand); background:var(--brand-l); }
.chk-list input{ width:19px; height:19px; margin:2px 0 0; accent-color:var(--brand); }

.chk-res{ padding:18px 20px; border-radius:var(--r); font-size:15.5px; font-weight:750; line-height:1.7; }
.chk-res.go   { background:#fff4e6; border:1px solid #f0c489; }
.chk-res.watch{ background:#eef7f1; border:1px solid #c2e0cd; }

.chk-res.mid  { background:#fdf6ec; border:1px solid #e6d3b3; }
.chk-res b{ font-weight:900; }

.chk-head{ font-weight:900; margin:0 0 8px; }
.chk-body{ margin:0; }

.calc-panel form{ display:none; }
.calc-panel[hidden]{ display:none; }
.calc-panel .tool-out{ margin-top: var(--sp-5); }

.calc-birth label{ font-size: var(--fs-xs); font-weight:850; color: var(--ink-2); }
.calc-birth input[type=date]{
  font:inherit; font-size: var(--fs-sm); font-weight:600;
  padding: var(--sp-3) var(--sp-4); margin-top:6px;
  border:1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  width:100%; max-width:280px; display:block;
}

.calc-birth input[type=date]:focus{
  outline:none; border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-l);
}

.calc-go{
  margin-top: var(--sp-5);
  background: var(--brand); color:#fff; border:0; border-radius: var(--r-full);
  padding: var(--sp-4) var(--sp-7);
  font:inherit; font-size: var(--fs-sm); font-weight:900; cursor:pointer;
  transition:.2s;
}
.calc-go:hover{ background: var(--brand-d); }

.calc-tabs{
  display:flex; gap:0; margin: var(--sp-6) 0 0;
  border-bottom:2px solid var(--line);
}
.calc-tab{
  flex:1; border:0; background:none; cursor:pointer;
  font:inherit; font-size: var(--fs-sm); font-weight:900; color: var(--ink-3);
  padding: var(--sp-4) var(--sp-3); margin-bottom:-2px;
  border-bottom:2px solid transparent; transition:.18s;
}
.calc-tab:hover{ color: var(--brand-d); }
.calc-tab.is-on{ color: var(--brand-d); border-bottom-color: var(--brand); }

.age-now{
  display:inline-block; margin-left:10px;
  font-size:13px; font-weight:900; color: var(--brand-d);
}
.age-now:empty{ display:none; }

.age-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.age-chip{
  border:1px solid var(--line); background: var(--surface, #fff);
  border-radius: var(--r-full); padding:7px 14px;
  font:inherit; font-size:13px; font-weight:800; color: var(--ink-2);
  cursor:pointer; transition:.18s;
}
.age-chip:hover{ border-color: var(--brand); color: var(--brand-d); }
.age-chip:active{ background: var(--o-50); }

.vac{ display:grid; gap:9px; }
.vac li{
  display:grid; grid-template-columns:112px 1fr auto; gap:14px; align-items:center;
  padding:14px 16px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
}
.vac .vm{ font-size:12.5px; font-weight:900; color:var(--brand-d); }
.vac .vn{ font-size:14.5px; font-weight:800; line-height:1.5; }

.vac .vd{ font-size:12.5px; font-weight:800; color:var(--ink-3); white-space:normal; text-align:right; }
.vac .vd i{ font-style:normal; white-space:nowrap; }
@media (max-width:640px){
  .vac li{ grid-template-columns:1fr; gap:5px; }
}

.res-flag{
  margin-top:16px; padding:13px 16px 13px 15px;
  background:var(--o-50); border:1px solid var(--o-200);
  border-left:4px solid var(--brand); border-radius:var(--r);
  font-size:13.5px; font-weight:800; color:var(--ink-2); line-height:1.7;
}

.res-cta{ margin-top:18px; }
.res-cta .btn{ display:inline-flex; }

.bmi-big{
  font-size:52px; font-weight:950; letter-spacing:-.05em; color:var(--brand-d);
  line-height:1; margin-bottom:12px; font-variant-numeric:tabular-nums;
}

.ch-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:26px 0 12px; flex-wrap:wrap; font-size:15px;
}
.ch-sw{ display:inline-flex; gap:5px; background:var(--bg-alt); padding:4px; border-radius:999px; }
.ch-sw button{
  border:0; background:transparent; padding:7px 16px; border-radius:999px;
  font-size:13.5px; font-weight:900; color:var(--ink-2); transition:.2s;
}
.ch-sw button.on{ background:var(--brand); color:#fff; }

.ch-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px; }
.gchart{ width:100%; height:auto; display:block; }
.gchart .g-grid{ stroke:var(--line); stroke-width:1; }
.gchart .g-ax{ font-size:11px; font-weight:700; fill:var(--ink-3); font-family:inherit; }
.gchart .g-area.wide{ fill:var(--brand-l); opacity:.55; }
.gchart .g-area.mid { fill:var(--brand-l); opacity:.75; }
.gchart .g-line{ fill:none; stroke:var(--brand); stroke-width:1.2; opacity:.42; }
.gchart .g-line.mid50{ stroke-width:2; opacity:.8; stroke-dasharray:none; }
.gchart .g-pct{ font-size:10.5px; font-weight:800; fill:var(--brand-d); opacity:.7; font-family:inherit; }
.gchart .g-mine{ fill:none; stroke:#1f2c33; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.gchart .g-dot{ fill:#1f2c33; }
.gchart .g-dot.last{ fill:#e2622a; stroke:#fff; stroke-width:2.5; }
.gchart .g-lab{ font-size:13px; font-weight:900; fill:#c8501c; font-family:inherit; }

.ch-leg{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; font-weight:800; color:var(--ink-3); }
.ch-leg span{ display:inline-flex; align-items:center; gap:7px; }
.ch-leg i{ width:14px; height:11px; border-radius:3px; }
.ch-leg i.lg-wide{ background:var(--brand-l); opacity:.6; }
.ch-leg i.lg-mid { background:var(--brand-l); }
.ch-leg i.lg-dot { width:11px; height:11px; border-radius:50%; background:#e2622a; }

.rec{ margin-top:22px; padding:18px 20px; background:var(--bg-alt); border-radius:var(--r); }
.rec b{ font-size:14px; }
.rec ul{ display:grid; gap:6px; margin-top:10px; }
.rec li{ font-size:13.5px; font-weight:750; color:var(--ink-2); position:relative; padding-left:15px; }
.rec li::before{ content:"·"; position:absolute; left:3px; color:var(--brand); font-weight:900; }
.rec-clear{
  margin-top:14px; border:1px solid var(--line); background:var(--surface);
  padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:850; color:var(--ink-2);
}
.rec-clear:hover{ border-color:var(--brand); color:var(--brand-d); }

.mph-band{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center;
  background:var(--bg-alt); border-radius:var(--r); padding:22px; text-align:center;
}
.mph-band .lo, .mph-band .hi{ font-size:19px; font-weight:850; color:var(--ink-3); }
.mph-band .lo::after{ content:" cm"; font-size:12px; }
.mph-band .hi::after{ content:" cm"; font-size:12px; }
.mph-band .mid{
  font-size:44px; font-weight:950; color:var(--brand-d);
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.mph-band .mid em{ font-size:17px; font-style:normal; margin-left:2px; }

@media print{

  header, footer, .drawer, .popup-overlay, .fixed-mobile,
  .cta-band, .breadcrumb, .rec-clear, .ch-sw{ display:none !important; }
  main > section:not(.tool-print){ display:none !important; }
  .tool-print .sec-head, .tool-print .chart-wrap{ display:none !important; }
  .tool{ break-inside:avoid; box-shadow:none; border:1px solid #ccc; }
  .tools{ grid-template-columns:1fr; }
  body{ background:#fff; }
}

.data-warn{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff8e6; border:1px solid #ecd9a0; border-radius:var(--r);
  padding:16px 18px; font-size:13.5px; font-weight:750; color:#7a5c14; line-height:1.7;
  margin-bottom:26px;
}
.data-warn b{ color:#5c440c; font-weight:900; }
.data-warn::before{ content:"!"; font-weight:950; color:#c9962a; font-size:16px; flex:none; }

.todo-mark{
  display:inline-block; margin-left:6px; padding:3px 9px;
  background: var(--o-100); border:1px solid var(--o-200); border-radius: var(--r-full);
  font-size:12px; font-weight:900; color: var(--o-700); white-space:nowrap;
}

.load-fail{
  padding: var(--sp-6); border:1px dashed var(--n-300); border-radius: var(--r-md);
  background: var(--n-50); color: var(--n-600);
  font-size: var(--fs-sm); font-weight:400; line-height:1.8; text-align:center;
}
.load-fail a{ color: var(--o-700); font-weight:850; text-decoration:underline; }