@charset "UTF-8";
/* ==========================================================
   neroweb20 layout.css
   공통 토큰 · 기본 · 헤더 · 메뉴 · 서브 공통 · 푸터
   기준 : 의료기관 홈페이지 테마 디자인 정의서
   ========================================================== */

:root {
  /* 색상 (속튼튼내과 벤치마킹 정의서 4.1) */
  --n20-gold: #C39244;
  --n20-gold-dark: #B1883C;
  --n20-gold-soft: #E8D8BC;
  --n20-green: #244821;
  --n20-ink: #222222;
  --n20-text: #666666;
  --n20-paper: #FCFAF8;
  --n20-paper2: #F3EDE3;
  --n20-line: #F0EDE5;
  --n20-dark: #47423C;
  --n20-contact: #2C2825;
  --n20-white: #FFFFFF;
  --n20-notice: #F6EFE1;
  --n20-notice-h: 36px;
  /* 게시판 스킨 호환 이름 */
  --n20-primary: #C39244;
  --n20-accent: #C39244;
  --n20-accent-d: #B1883C;
  --n20-accent-l: #F3EDE3;
  --n20-strong: #222222;
  --n20-muted: #8B8579;
  --n20-surface: #FCFAF8;
  --n20-error: #C0392B;
  --n20-success: #244821;
  /* 규격 (정의서 6장·7장) */
  --n20-hd-h: 110px;
  --n20-max: 1400px;
  --n20-mmax: 1600px;
  --n20-gap: 20px;
  --n20-gutter: 40px;
  --n20-radius: 10px;
  --n20-radius-lg: 30px;
  --n20-shadow: 0 16px 40px rgba(71, 66, 60, .12);
  /* 폰트 (정의서 5장) */
  /* 글꼴 (정의서 5.1 · 5.5) */
  --n20-font: "SUIT", "Noto Sans KR", "Noto Sans Korean", sans-serif;   /* 본문 기본 */
  --n20-hero: "esamanru", "SUIT", "Noto Sans KR", sans-serif;           /* 메인·서브 대표 제목 */
  --n20-num: "Paperozi", "SUIT", "Noto Sans KR", sans-serif;            /* 숫자·전화·클리닉 제목 */
  --n20-hand: "KyoboHandwriting2020ParkDoYeon", "SUIT", sans-serif;     /* 의료진 한 줄 메시지 */
  --n20-en: "Roboto", "SUIT", sans-serif;                               /* 장비명·검진 번호 */
  --n20-brand: "Montserrat", "Roboto", sans-serif;                      /* 클리닉 영문 워터마크 */
  --n20-badge: "Oswald", "Roboto", sans-serif;                          /* 원형 번호 */
  --n20-ease: cubic-bezier(.22, 1, .36, 1);
}

/* 기본 (요소 선택자만 사용 : 아래 클래스 스타일이 항상 우선하도록) */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body.n20 { margin: 0; font-family: var(--n20-font); font-size: 1.8rem; word-break: keep-all; color: var(--n20-text); line-height: 1.7; letter-spacing: -0.01em; color: var(--n20-text); background: var(--n20-white); word-break: keep-all; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
p { word-break: keep-all; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: top; border: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; font-size: 18px; }
body.n20 :focus-visible { outline: 2px solid var(--n20-primary); outline-offset: 3px; }
body.n20-lock { overflow: hidden; }
.sound_only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.n20-skip { position: absolute; left: 16px; top: -60px; z-index: 2000; padding: 10px 16px; background: var(--n20-accent); color: #fff; border-radius: 6px; transition: top .2s; }
.n20-skip:focus { top: 12px; }

.n20-wrapall { overflow-x: clip; }
.n20-wrap { width: 100%; max-width: calc(var(--n20-max) + var(--n20-gutter) * 2); margin: 0 auto; padding: 0 var(--n20-gutter); }
.n20-container { display: block; min-height: 50vh; }
.n20-center { text-align: center; }
.n20-mb8 { margin-bottom: 8px; }
.n20-pc { display: inline; }

/* 버튼 (정의서 4.3 : 라운드 999px) */
.n20-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; min-height: 48px; padding: 0 24px; border-radius: 48px; font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.n20-btn--point { background: var(--n20-accent); color: #fff; }
.n20-btn--point:hover { background: var(--n20-accent-d); }
.n20-btn--line { border-color: var(--n20-line); color: var(--n20-strong); background: #fff; }
.n20-btn--line:hover { border-color: var(--n20-strong); }
.n20-btn--line-w { border-color: rgba(255, 255, 255, .6); color: #fff; }
.n20-btn--line-w:hover { background: #fff; color: var(--n20-primary); }
.n20-btn--white { background: #fff; color: var(--n20-ink); }
.n20-btn--white:hover { background: var(--n20-teal); color: #fff; }
.n20-btn:active { transform: translateY(1px); }
.n20-btn small { font-size: 12px; font-weight: 400; opacity: .7; }
.n20-btn--sm { height: 44px; min-height: 44px; padding: 0 18px; font-size: 16px; }
.n20-btn i { font-size: .9em; line-height: 1; }
.n20-btn[disabled] { opacity: .55; cursor: default; }
.n20-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; font-weight: 600; color: var(--n20-strong); }
.n20-more i { transition: transform .25s; }
.n20-more:hover i { transform: translateX(4px); }

/* 라벨 (Caption 14px / 500) · 상태 (색 + 글자 + 점 아이콘을 함께 사용) */
.n20-label { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--n20-accent-l); color: var(--n20-accent-d); font-size: 14px; font-weight: 500; line-height: 1.4; }
.n20-label--line { background: none; border: 1px solid var(--n20-line); color: var(--n20-muted); }
.n20-label--pin { background: var(--n20-primary); color: #fff; }
.n20-st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 14px; font-weight: 600; line-height: 1.4; border: 1px solid currentColor; background: #fff; }
.n20-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.n20-st--draft { color: #4B5563; }
.n20-st--review { color: #9A5B00; }
.n20-st--reviewing { color: #1D4ED8; }
.n20-st--revise { color: var(--n20-error); }
.n20-st--scheduled { color: #6D28D9; }
.n20-st--publish { color: var(--n20-success); }
.n20-st--private { color: #374151; }
.n20-st--archive { color: var(--n20-muted); }
.n20-st--main { color: var(--n20-primary); }


/* ---------- 상단 안내 띠 · 헤더 (정의서 7장 : 110px, 투명 → 흰색) ---------- */
.n20-notice { position: fixed; left: 0; right: 0; top: 0; z-index: 910; display: flex; align-items: center; justify-content: center; height: var(--n20-notice-h); padding: 0 50px; background: var(--n20-notice); font-size: 14px; color: #6B5A38; text-align: center; }
.n20-notice b { margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--n20-gold); color: #fff; font-size: 13px; }
.n20-notice__close { position: absolute; right: 14px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); color: #6B5A38; }
body.is-notice-off .n20-notice { display: none; }
.n20-hd { position: fixed; left: 0; right: 0; top: 0; z-index: 150; transition: background .3s ease, box-shadow .3s; }
.n20-hd.has-notice { top: var(--n20-notice-h); }
body.is-notice-off .n20-hd.has-notice { top: 0; }
.n20-hd__bar { display: flex; align-items: center; justify-content: space-between; height: var(--n20-hd-h); padding: 0 50px; }
.n20-hd__logo img { width: 240px; }
.n20-logo-white { display: none; }
.n20-gnb { align-self: stretch; }
.n20-gnb__list { display: flex; height: 100%; }
.n20-gnb__item { position: relative; }
.n20-gnb__link { display: flex; align-items: center; height: 100%; padding: 0 30px; font-size: 20px; font-weight: 600; color: var(--n20-ink); transition: color .2s; }
.n20-gnb__item:hover .n20-gnb__link, .n20-gnb__item.is-on .n20-gnb__link { color: var(--n20-gold); }
.n20-gnb__sub { position: absolute; left: 50%; top: 100%; min-width: 200px; padding: 10px 0; border-radius: 5px; background: var(--n20-gold); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: all .22s var(--n20-ease); }
.n20-gnb__item:hover .n20-gnb__sub, .n20-gnb__item:focus-within .n20-gnb__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.n20-gnb__sub a { display: block; padding: .5em 20px; font-size: 18px; color: #fff; white-space: nowrap; }
.n20-gnb__sub a:hover, .n20-gnb__sub a.is-on { text-decoration: underline; }
.n20-hd__util { display: flex; align-items: center; gap: 16px; }
.n20-hd__tel { display: inline-flex; align-items: center; gap: 8px; font-family: var(--n20-num); font-size: 1.9rem; letter-spacing: .02em; font-weight: 600; color: var(--n20-ink); }
.n20-hd__tel i { font-size: 16px; color: var(--n20-gold); }
.n20-hd__burger { display: none; position: relative; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.n20-hd__burger span { display: block; width: 26px; height: 2px; background: var(--n20-ink); }
/* 히어로 위 투명 상태 */
.n20-hd.is-over:not(.is-scrolled) { background: transparent; }
.n20-hd.is-over:not(.is-scrolled) .n20-logo-dark { display: none; }
.n20-hd.is-over:not(.is-scrolled) .n20-logo-white { display: block; }
.n20-hd.is-over:not(.is-scrolled) .n20-gnb__link, .n20-hd.is-over:not(.is-scrolled) .n20-hd__tel { color: #fff; }
.n20-hd.is-over:not(.is-scrolled) .n20-hd__tel i { color: #fff; }
.n20-hd.is-over:not(.is-scrolled) .n20-hd__burger span { background: #fff; }
.n20-hd.is-scrolled, .n20-hd.is-solid { background: #fff; box-shadow: 0 4px 20px rgba(71, 66, 60, .08); }

/* 모바일 메뉴 */
.n20-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; display: flex; flex-direction: column; width: min(420px, 100%); background: var(--n20-dark); color: #fff; transform: translateX(100%); visibility: hidden; transition: transform .4s var(--n20-ease), visibility .4s; overflow-y: auto; }
.n20-drawer.is-open { transform: translateX(0); visibility: visible; }
.n20-drawer__top { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 12px 0 22px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.n20-drawer__logo img { width: 170px; }
.n20-drawer__close { position: relative; width: 50px; height: 50px; }
.n20-drawer__close span { position: absolute; left: 14px; top: 50%; width: 24px; height: 2px; background: #fff; }
.n20-drawer__close span:nth-child(1) { transform: rotate(45deg); }
.n20-drawer__close span:nth-child(2) { transform: rotate(-45deg); }
.n20-drawer__body { flex: 1; padding: 22px 22px 40px; }
.n20-drawer__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.n20-drawer__quick .n20-btn { width: 100%; padding: 0 12px; font-size: 15px; }
.n20-drawer__menu { margin-top: 24px; }
.n20-drawer__dep1 { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); font-size: 19px; font-weight: 600; color: #fff; text-align: left; }
.n20-drawer__dep1::after { content: "+"; font-weight: 300; }
.n20-drawer__item.is-open .n20-drawer__dep1 { color: var(--n20-gold); }
.n20-drawer__item.is-open .n20-drawer__dep1::after { content: "\2212"; }
.n20-drawer__dep2 { display: none; padding: 10px 0 14px 10px; }
.n20-drawer__item.is-open .n20-drawer__dep2 { display: block; }
.n20-drawer__dep2 a { display: block; padding: 8px 0; font-size: 16px; color: rgba(255, 255, 255, .75); }
.n20-drawer__dep2 a:hover, .n20-drawer__dep2 a.is-on { color: var(--n20-gold); }
.n20-drawer__call { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.n20-drawer__util { margin-top: 24px; }
.n20-drawer__search { display: flex; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.n20-drawer__search input { flex: 1; height: 46px; border: 0; background: none; color: #fff; font-size: 16px; }
.n20-drawer__search input::placeholder { color: rgba(255, 255, 255, .5); }
.n20-drawer__search button { width: 46px; color: #fff; }
.n20-drawer__member { display: flex; gap: 20px; margin-top: 18px; font-size: 15px; }
.n20-drawer__member a { color: rgba(255, 255, 255, .75); }
.n20-dim { position: fixed; inset: 0; z-index: 990; background: rgba(34, 34, 34, .5); opacity: 0; visibility: hidden; transition: all .3s; }
.n20-dim.is-on { opacity: 1; visibility: visible; }

/* ---------- 서브 공통 : 서브 히어로 · 서브 메뉴 (정의서 17장) ---------- */
.n20-svisual { position: relative; display: flex; align-items: center; justify-content: center; height: 600px; overflow: hidden; background: var(--n20-dark); text-align: center; }
.n20-svisual__bg { position: absolute; inset: 0; }
.n20-svisual__bg img { width: 100%; height: 100%; object-fit: cover; }
.n20-svisual__bg::after { content: ""; position: absolute; inset: 0; background: rgba(34, 30, 26, .42); }
.n20-svisual__in { position: relative; z-index: 2; width: 94%; max-width: 1280px; padding-top: var(--n20-hd-h); color: #fff; }
.n20-svisual__en { font-family: var(--n20-num); font-size: 1.5rem; letter-spacing: .18em; color: var(--n20-gold-soft); }
.n20-svisual__tit { margin-top: 14px; font-family: var(--n20-hero); font-size: 6rem; font-weight: 700; line-height: 1.05; color: #fff; }
.n20-svisual__desc { margin-top: 14px; font-size: 18px; color: rgba(255, 255, 255, .82); }
.n20-smenu { position: relative; z-index: 3; width: 94%; max-width: var(--n20-mmax); margin: -40px auto 0; border-radius: 5px; background: #fff; box-shadow: var(--n20-shadow); }
.n20-smenu__in { display: flex; align-items: stretch; height: 80px; }
.n20-smenu__home { display: flex; align-items: center; justify-content: center; width: 80px; border-right: 1px solid rgba(0, 0, 0, .1); color: var(--n20-ink); }
.n20-smenu__list { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
.n20-smenu__list::-webkit-scrollbar { display: none; }
.n20-smenu__list a { display: flex; align-items: center; height: 100%; padding: 0 25px; font-size: 18px; color: var(--n20-text); white-space: nowrap; border-right: 1px solid rgba(0, 0, 0, .06); }
.n20-smenu__list a:hover { color: var(--n20-gold); }
.n20-smenu__list a.is-on { color: var(--n20-gold); font-weight: 600; }
.n20-smenu__dep { position: relative; display: none; }
.n20-smenu__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 100%; padding: 0 22px; font-size: 17px; color: var(--n20-ink); border-right: 1px solid rgba(0, 0, 0, .1); }
.n20-smenu__btn i { font-size: 12px; color: var(--n20-gold); transition: transform .2s; }
.n20-smenu__dep.is-open .n20-smenu__btn i { transform: rotate(180deg); }
.n20-smenu__drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: none; padding: 6px 0; background: #fff; box-shadow: var(--n20-shadow); }
.n20-smenu__dep.is-open .n20-smenu__drop { display: block; }
.n20-smenu__drop a { display: block; padding: 11px 22px; font-size: 16px; color: var(--n20-text); }
.n20-smenu__drop a:hover, .n20-smenu__drop a.is-on { background: var(--n20-paper2); color: var(--n20-gold); }
.n20-subtitle { padding: 80px 0; font-size: 3.8rem; font-weight: 700; color: var(--n20-ink); text-align: center; }
.n20-page { padding-bottom: 150px; }
.n20-inner { width: 100%; max-width: var(--n20-max); margin: 0 auto; }
.n20-minner { width: 100%; max-width: var(--n20-mmax); margin: 0 auto; }
.n20-part { padding: 130px 0; }
.n20-bg-paper { background: var(--n20-paper); }

/* ---------- 푸터 · 고정 요소 (정의서 16장) ---------- */
.n20-ft { padding: 4% 0; background: var(--n20-dark); color: rgba(255, 255, 255, .6); text-align: center; }
.n20-ft__in { width: 94%; max-width: var(--n20-max); margin: 0 auto; }
.n20-ft__logo img { width: 220px; opacity: .92; }
.n20-ft__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 26px; font-size: 15px; }
.n20-ft__links a { color: rgba(255, 255, 255, .75); }
.n20-ft__links b { color: #fff; }
.n20-ft address { display: block; margin-top: 22px; font-style: normal; font-size: 16px; line-height: 1.9; }
.n20-ft address span + span::before { content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 12px; background: rgba(255, 255, 255, .2); }
.n20-ft__warn { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .45); }
.n20-ft__copy { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .5); }

.n20-float { position: fixed; right: 20px; bottom: 140px; z-index: 180; display: flex; flex-direction: column; gap: 8px; }
.n20-float a, .n20-float button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: var(--n20-shadow); font-size: 12px; font-weight: 600; color: var(--n20-ink); transition: background .2s, color .2s; }
.n20-float i { font-size: 17px; color: var(--n20-gold); }
.n20-float a:hover, .n20-float button:hover { background: var(--n20-gold); color: #fff; }
.n20-float a:hover i, .n20-float button:hover i { color: #fff; }
.n20-mbar { display: none; }
.n20-top { display: none; }

/* 등장 효과 */
.n20-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--n20-ease), transform .8s var(--n20-ease); }
.n20-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .n20-reveal { opacity: 1; transform: none; transition: none; }
  .n20-svisual__bg img { animation: none; }
}


/* ---------- 반응형 (정의서 20장) ---------- */
html, body { overflow-x: clip; }
/* rem 기준 (정의서 5.4) : 1rem = 10px */
html { font-size: 62.5%; }
@media (max-width: 1024px) { html { font-size: 60%; } }
@media (max-width: 480px) { html { font-size: 2.1vw; } }
@media (max-width: 1600px) {
  .n20-minner { width: 90%; }
  .n20-hd__bar { padding: 0 30px; }
  .n20-gnb__link { padding: 0 20px; font-size: 18px; }
  .n20-hd__logo img { width: 210px; }
}
@media (max-width: 1400px) {
  :root { --n20-gutter: 30px; }
  .n20-inner { width: 90%; }
  .n20-smenu__list { display: none; }
  .n20-smenu__dep { display: block; flex: 1; }
  .n20-smenu__in { height: 70px; }
  .n20-smenu__home { width: 70px; }
}
@media (max-width: 1280px) {
  :root { --n20-hd-h: 80px; }
  .n20-part { padding: 90px 0; }
  .n20-gnb { display: none; }
  .n20-hd__burger { display: flex; }
  .n20-svisual { height: 500px; }
  .n20-page { padding-bottom: 110px; }
}
@media (max-width: 1024px) {
  :root { --n20-hd-h: 70px; }
  .n20-hd__logo img { width: 180px; }
  .n20-hd__tel span { display: none; }
  .n20-float { display: none; }
}
@media (max-width: 976px) {
  .n20-svisual { height: 480px; }
  .n20-svisual__tit { font-size: 5rem; }
  .n20-smenu { margin-top: -30px; }
}
@media (max-width: 768px) {
  :root { --n20-gutter: 20px; }
  .n20-svisual { height: 400px; }
  .n20-smenu__in { height: 50px; }
  .n20-smenu__home { width: 50px; }
  .n20-smenu__btn { padding: 0 14px; font-size: 15px; }
  .n20-subtitle { padding: 50px 0; font-size: 3rem; }
  .n20-page { padding-bottom: 70px; }
  .n20-ft { padding: 8% 0; }
  .n20-ft__logo img { width: 45%; }
  .n20-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 190; display: grid; grid-template-columns: 1fr 1fr 1.2fr; height: 60px; background: #fff; box-shadow: 0 -6px 18px rgba(71, 66, 60, .14); padding-bottom: env(safe-area-inset-bottom); }
  .n20-mbar a, .n20-mbar button { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--n20-ink); }
  .n20-mbar .is-main { background: var(--n20-gold); color: #fff; }
  body.n20 { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  :root { --n20-hd-h: 60px; --n20-notice-h: 32px; }
  .n20-part { padding: 15vw 0; }
  .n20-svisual { height: 85vw; }
  .n20-svisual__tit { font-size: 4.5rem; }
  .n20-notice { font-size: 12px; padding: 0 40px 0 12px; justify-content: flex-start; white-space: nowrap; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .n20-hd, .n20-drawer, .n20-gnb__sub { transition: none; }
}