@charset "utf-8";
/* =============================================================
   더명품재활병원 - common.css
   기준 시안: main.psd (2600 x 8358 / 콘텐츠 컨테이너 1400px, 1:1 배율)
   1rem = 10px
   ============================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, address,
ol, ul, li, dl, dt, dd, figure, figcaption, form, fieldset, legend,
table, thead, tbody, tfoot, tr, th, td, button, input, select, textarea {
  margin: 0; padding: 0;
}
ol, ul { list-style: none; }
img, svg, video { max-width: 100%; vertical-align: top; }
img { height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; border-spacing: 0; }
time { display: inline-block; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; }
b, strong { font-weight: 700; }

/* ---------- tokens ---------- */
:root {
  --navy:       #0d3658;
  --navy-deep:  #0a2c48;
  --navy-cta:   #16344f;
  --blue:       #1e5a8a;
  --blue-mid:   #22669b;
  --sky:        #4a9fd5;
  --bg-soft:    #f4f8fb;
  --bg-card:    #f5f6f8;
  --line:       #e3e7ec;
  --line-soft:  #eceff3;
  --txt:        #1d1d1d;
  --txt-head:   #0d395d;
  --txt-body:   #6b7075;
  --txt-mute:   #9aa1a8;

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --serif: 'Tinos', 'Times New Roman', Times, 'Nanum Myeongjo', serif;

  --in: 144rem;          /* 1440 - 좌우 padding 20 = 콘텐츠 1400 */
  --inPd: 2rem;
  --hdH: 11.6rem;        /* 헤더 116px */
  --hdH-fix: 10rem;      /* 스크롤 시 헤더 100px — 메뉴 글자 아래 여백을 위와 같게 두려고 80px 에서 키움 */
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { font-size: 10px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--txt);
  background: #fff;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- a11y / utils ---------- */
.hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-nav {
  position: fixed; left: 50%; top: 0; z-index: 9999;
  transform: translate(-50%,-110%);
  padding: 1.2rem 3rem; background: var(--navy); color: #fff;
  font-size: 1.5rem; font-weight: 600; border-radius: 0 0 .8rem .8rem;
  transition: transform .2s var(--ease);
}
.skip-nav:focus { transform: translate(-50%,0); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

.in { position: relative; width: var(--in); max-width: 100%; margin: 0 auto; padding: 0 var(--inPd); }

/* 공통 섹션 타이틀 */
.sec-eng {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 10rem; line-height: 1; letter-spacing: -.01em; color: #f4f5f7;
}
.sec-eng--solid { color: #111; }
.sec-title { font-size: 3.8rem; font-weight: 700; line-height: 1.3; color: var(--txt-head); letter-spacing: -.02em; }
.sec-desc { margin-top: 1.4rem; font-size: 1.45rem; line-height: 1.5; color: #878787; }

/* ---------- buttons ---------- */
.ico-arr {
  display: inline-block; width: 1.4rem; height: 1.3rem; flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath d='M.6 6.5h12M8 1.6l4.6 4.9L8 11.4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath d='M.6 6.5h12M8 1.6l4.6 4.9L8 11.4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform .3s var(--ease);
}
a:hover .ico-arr, button:hover .ico-arr { transform: translateX(.4rem); }

.btn-line {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-width: 17.3rem; height: 3.7rem; padding: 0 1.6rem 0 1.8rem;
  border: 1px solid rgba(255,255,255,.38); border-radius: .2rem;
  font-size: 1.45rem; font-weight: 600; color: #fff;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.btn-line:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.75); }

.btn-round {
  display: inline-flex; align-items: center; gap: 1.6rem;
  height: 5.8rem; padding: 0 2.9rem; border-radius: 2.9rem;
  border: 1px solid rgba(255,255,255,.5);
  font-size: 1.45rem; font-weight: 600; color: #fff;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-round:hover { background: #fff; border-color: #fff; color: var(--navy); }
.btn-round--light { border-color: #ccd6e0; color: var(--txt-head); }
.btn-round--light:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn-solid {
  display: inline-flex; align-items: center; gap: 1.6rem;
  height: 5.8rem; padding: 0 3.2rem; border-radius: 2.9rem;
  background: var(--navy); font-size: 1.45rem; font-weight: 600; color: #fff;
  transition: background-color .3s var(--ease);
}
.btn-solid:hover { background: var(--blue); }

.btn-more {
  display: inline-flex; align-items: center; gap: 1.2rem;
  height: 4.4rem; padding: 0 2.2rem; border-radius: 2.2rem;
  border: 1px solid #d5dae0; font-size: 1.3rem; font-weight: 500; color: #52585e;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.btn-more:hover { border-color: var(--navy); color: var(--navy); }

/* =============================================================
   HEADER
   ============================================================= */
.header {
  position: fixed; inset: 0 0 auto; z-index: 200;
  height: var(--hdH);
  transition: height .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header__in {
  display: flex; align-items: center; height: 100%;
  padding: 0 5.2rem;
}
.header__logo { position: relative; flex: none; display: block; margin-top: -.6rem; }
.header__logo img { display: block; width: 21.1rem; height: auto; transition: opacity .3s var(--ease); }
/* 컬러 CI 는 흰 로고 위에 겹쳐 두고 투명도로만 교차한다(자리를 차지하지 않아 흔들림이 없다). */
.header__logo-img--color { position: absolute; left: 0; top: 0; opacity: 0; }

.gnb { flex: 1 1 auto; margin-top: 2.6rem; padding-right: 1.2rem; }
.gnb__list { display: flex; justify-content: center; gap: 7.3rem; }
.gnb__list > li > a {
  position: relative; display: block; padding: 1.4rem 0;
  font-size: 2rem; font-weight: 600; color: #fff; letter-spacing: -.03em;
  white-space: nowrap;
}
.gnb__list > li > a::after {
  content: ''; position: absolute; left: 0; bottom: .6rem;
  width: 100%; height: 2px; background: #fff;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .35s var(--ease);
}
.gnb__list > li > a:hover::after,
.gnb__list > li > a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

.header__util { flex: none; margin-left: auto; display: flex; align-items: center; gap: 1.6rem; color: #fff; }
.header__login { display: block; line-height: 0; }
.header__menu { display: none; width: 3.4rem; height: 2.6rem; position: relative; }
.header__menu span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.header__menu span:nth-child(1) { top: 0; }
.header__menu span:nth-child(2) { top: 50%; margin-top: -1px; }
.header__menu span:nth-child(3) { bottom: 0; }

/* 스크롤 시 */
.header.is-fixed { height: var(--hdH-fix); background: var(--navy); box-shadow: 0 .2rem 1.6rem rgba(0,0,0,.18); }
.header.is-fixed .header__logo img { width: 18rem; }
/* 시안(116px 헤더)은 메뉴를 아래로 내려 배치하지만, 스크롤 헤더에서는 그 여백이 그대로 남아
   글자 위 43px·아래 17px 로 치우쳐 답답해 보인다. 고정 상태에서는 세로 가운데로 맞춘다. */
.header.is-fixed .gnb { margin-top: 0; }

/* ---------- 대메뉴 드롭다운 패널 ----------
   ipark-dvp.com 헤더 패널과 같은 방식 — 대메뉴에 마우스를 올리면 헤더 아래로 흰 판이
   내려오면서 그 안에서 2차 메뉴가 드러난다(원본: max-height 0 → 값, .3초).
   각 열의 가로 위치는 JS 가 해당 대메뉴 중심에 맞춰 넣는다(--panel-h 도 JS 가 지정).
   패널이 열린 동안에는 헤더에도 배경을 깔아 스크롤 상태와 같은 모습이 되게 한다. */
/* 드롭다운이 열리면 헤더까지 통째로 흰 배경이 된다(스크롤 상태의 남색도 덮는다).
   그래서 .header.is-fixed 규칙보다 반드시 뒤에 있어야 한다. */
.header.is-panel-open { background: #fff; box-shadow: none; }
.header.is-panel-open .header__in { box-shadow: inset 0 -1px 0 #e9edf1; }   /* 헤더와 패널 사이 실선 */
.header.is-panel-open .header__logo-img--white { opacity: 0; }
.header.is-panel-open .header__logo-img--color { opacity: 1; }
.header.is-panel-open .gnb__list > li > a { color: #1c1c1c; }
.header.is-panel-open .gnb__list > li > a::after { background: #1c1c1c; }
.header.is-panel-open .header__util { color: var(--navy); }
.gnb__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  height: 0; overflow: hidden;
  opacity: 0; visibility: hidden;
  box-shadow: 0 1.2rem 2.4rem rgba(13,54,88,.12);
  transition: height .35s var(--ease), opacity .3s var(--ease), visibility 0s linear .35s;
}
.header.is-panel-open .gnb__panel {
  height: calc(var(--panel-h, 22rem) + 7rem);   /* 위 3.4rem + 열 높이 + 아래 3.6rem */
  opacity: 1; visibility: visible;
  transition: height .35s var(--ease), opacity .3s var(--ease), visibility 0s linear 0s;
}
.gnb__panel-col {
  position: absolute; top: 3.4rem; left: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 1.5rem;
  text-align: center; white-space: nowrap;
}
.gnb__panel-col > li > a {
  display: block;
  font-size: 1.6rem; font-weight: 500; line-height: 1.4;
  color: #4d6274; letter-spacing: -.03em;
  transition: color .2s var(--ease);
}
.gnb__panel-col > li > a:hover,
.gnb__panel-col > li > a:focus-visible { color: var(--blue); text-decoration: underline; text-underline-offset: .5rem; }

/* =============================================================
   MOBILE MENU
   ============================================================= */
.m-menu {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  background: var(--navy); color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.m-menu[hidden] { display: none; }
.m-menu.is-open { opacity: 1; visibility: visible; }
.m-menu__head { display: flex; align-items: center; justify-content: space-between; height: 7rem; padding: 0 2rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.m-menu__logo img { width: 17rem; }
.m-menu__close { line-height: 0; padding: 1rem; margin-right: -1rem; }
.m-menu__nav { flex: 1 1 auto; overflow-y: auto; padding: 1rem 2rem; }
.m-menu__nav > ul > li > a { display: block; padding: 1.8rem .4rem; font-size: 2rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.12); }
/* 2차 메뉴 — 들여쓰기ㆍ작은 글자ㆍ흐린 색으로 대메뉴와 층을 구분한다.
   구분선은 대메뉴에만 두고, 2차 메뉴 묶음의 마지막 줄 아래에만 남긴다. */
.m-menu__depth2 { padding: .4rem 0 1rem 1.4rem; }
.m-menu__depth2 > li > a {
  display: block; padding: 1rem .4rem;
  font-size: 1.6rem; font-weight: 500; color: rgba(255,255,255,.72);
}
.m-menu__depth2 > li > a:hover,
.m-menu__depth2 > li > a:focus-visible { color: #fff; }
.m-menu__nav > ul > li:has(.m-menu__depth2) > a { border-bottom: 0; }
.m-menu__depth2 { border-bottom: 1px solid rgba(255,255,255,.12); }
.m-menu__foot { padding: 2.4rem 2.4rem calc(2.4rem + env(safe-area-inset-bottom)); background: rgba(0,0,0,.18); }
.m-menu__tel { display: block; font-size: 3rem; font-weight: 800; letter-spacing: -.02em; }
.m-menu__foot p { margin-top: .8rem; font-size: 1.4rem; color: rgba(255,255,255,.66); line-height: 1.6; }

/* =============================================================
   QUICK
   ============================================================= */
.quick { position: fixed; right: 4.2rem; top: 50%; z-index: 150; transform: translateY(-50%); }
.quick__list {
  width: 10.4rem; padding: 2.4rem 0; border-radius: 5.2rem;
  background: var(--navy-deep); color: #fff; text-align: center;
}
.quick__list > li + li { border-top: 1px solid rgba(255,255,255,.14); }
.quick__list a { display: block; padding: 2rem .6rem; transition: opacity .25s var(--ease); }
.quick__list a:hover { opacity: .68; }
.quick__ico { display: block; height: 4.1rem; line-height: 0; }
.quick__ico svg { height: 100%; width: auto; }
.quick__txt { display: block; margin-top: 1rem; font-size: 1.4rem; font-weight: 500; line-height: 1.35; letter-spacing: -.04em; }

.quick__top {
  display: flex; align-items: center; justify-content: center;
  width: 10.2rem; height: 10.2rem; margin-top: 2rem; border-radius: 50%;
  background: #fff; color: var(--navy); box-shadow: 0 .4rem 1.6rem rgba(13,54,88,.16);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.quick__top:hover { background: var(--navy); color: #fff; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer { padding: 9.4rem 0 5.95rem; background: var(--navy); color: #fff; }
.footer__top { display: flex; gap: 0; padding-bottom: 8.1rem; }
.footer__col { flex: 0 0 auto; }
.footer__col:nth-child(1) { width: 51.4rem; }
.footer__col:nth-child(2) { width: 54.7rem; }
.footer__col:nth-child(3) { width: 34rem; }
.footer__col h3 { font-size: 1.8rem; font-weight: 700; line-height: 1.5; color: #fff; }
.footer__col > p { margin-top: 1.9rem; font-size: 1.5rem; line-height: 1.67; color: rgba(255,255,255,.62); }
.footer__col > p + p { margin-top: 2.1rem; }
.footer__map {
  display: inline-block; margin-top: 1.2rem; padding-bottom: .4rem;
  font-size: 1.8rem; font-weight: 700; line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,.55);
}
.footer__col > .footer__tel { margin-top: 1.2rem; font-size: 5.2rem; font-weight: 800; line-height: 1.1; letter-spacing: 0; color: #fff !important; }
.footer__col--hours { flex: 1 1 auto; }
.footer__hours { margin-top: 1.75rem; }
.footer__hours > div { display: flex; gap: 1.5rem; font-size: 1.5rem; line-height: 1.9; }
.footer__hours dt { flex: none; width: 4.2rem; color: rgba(255,255,255,.62); }
.footer__hours dd { color: #fff; font-weight: 500; }
.footer__hours dd span { margin-left: .8rem; font-size: 1.2rem; font-weight: 400; color: rgba(255,255,255,.45); }
.footer__note { margin-top: 1.7rem; font-size: 1.4rem; line-height: 1.5; color: rgba(255,255,255,.45); }

.footer__bot { display: flex; align-items: flex-start; gap: 0; padding-top: 6.65rem; border-top: 1px solid rgba(255,255,255,.16); }
.footer__logo { flex: 0 0 30.5rem; }
.footer__logo img { width: 18.9rem; opacity: .95; }
.footer__info { flex: 1 1 auto; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 2.4rem 2.6rem; }
.footer__nav a { font-size: 1.5rem; line-height: 1.5; color: rgba(255,255,255,.82); transition: color .25s; }
.footer__nav a:hover { color: #fff; }
.footer__addr { margin-top: 2.8rem; font-size: 1.5rem; line-height: 1.73; color: rgba(255,255,255,.55); }
.footer__addr .bar { display: inline-block; width: 1px; height: 1.1rem; margin: 0 1.4rem; background: rgba(255,255,255,.28); vertical-align: -.1rem; }
.footer__copy { margin-top: .7rem; font-size: 1.4rem; line-height: 1.5; color: rgba(255,255,255,.4); }

.footer__sns { flex: none; display: flex; gap: 2rem; padding-top: .2rem; }
.footer__sns a {
  display: flex; align-items: center; justify-content: center;
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  transition: background-color .25s var(--ease);
}
.footer__sns a:hover { background: rgba(255,255,255,.3); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1600px) {
  .gnb__list { gap: 3rem; }
  .gnb__list > li > a { font-size: 1.8rem; }
  .header__in { padding: 0 3rem; }
}
@media (max-width: 1280px) {
  html { font-size: 9.4px; }
  .quick__list { width: 8.6rem; }
  .quick__top { width: 8.6rem; height: 8.6rem; }
}
/* 대메뉴가 8개라 1200px 아래에서는 로고ㆍ메뉴ㆍ우측 아이콘이 한 줄에 들어가지 않는다.
   (1100px 에서 헤더가 49px 넘쳤다) 이 구간부터는 모바일과 같은 전체메뉴로 넘긴다.
   기준폭을 바꾸면 assets/js/common.js 의 GNB_MIN 도 함께 고쳐야 한다. */
@media (max-width: 1200px) {
  .gnb, .gnb__panel { display: none; }
  .header__menu { display: block; }
}
/* 퀵바 — 시안은 캔버스 2600px 기준이라 세로 퀵바가 콘텐츠(1400px) 바깥 여백에 놓였다
   (콘텐츠 우측 끝 2000 → 퀵바 좌측 2454, 454px 밖). 실제 화면에서 그만큼 여백이 나오려면
   1400 + 2x(104+42) = 1692px 이상이어야 하고, 그보다 좁으면 세로 퀵바가 콘텐츠를 덮는다
   (1440px 에서 컨테이너를 124px 침범 — 협력병원 3열ㆍ푸터 진료시간ㆍPromise 사진이 가려졌다).
   그래서 여백이 나오는 폭에서만 시안대로 두고, 좁으면 모바일과 같은 우하단 가로 바로 바꾼다. */
@media (max-width: 1691px) {
  .quick { right: 1.6rem; bottom: 1.6rem; top: auto; transform: none; }
  .quick__list { display: flex; width: auto; padding: 0; border-radius: 3rem; }
  .quick__list > li + li { border-top: 0; border-left: 1px solid rgba(255,255,255,.14); }
  .quick__list a { padding: 1.2rem 1.8rem; }
  .quick__ico { height: 2.8rem; }
  /* 아이콘만 남기되 글자는 화면에서만 감춘다 — display:none 으로 지우면
     svg 가 aria-hidden 이라 링크에 읽을 이름이 하나도 남지 않는다. */
  .quick__txt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap;
  }
  .quick__top { width: 5.2rem; height: 5.2rem; margin: 1rem 0 0 auto; }
  .quick__top svg { width: 1.7rem; }
}
/* 1025~1199px — 푸터 3단이 51.4+54.7+34rem 고정이라 이 구간에서 넘쳤다. 비율로 바꾼다. */
@media (max-width: 1199px) {
  .footer__top { gap: 3rem; }
  .footer__col { flex: 0 1 auto; min-width: 0; }
  .footer__col:nth-child(1) { width: 38%; }
  .footer__col:nth-child(2) { width: 36%; }
  .footer__col:nth-child(3) { width: auto; }
  .footer__logo { flex: 0 0 24rem; }
  /* 대표번호가 좁아진 칸에서 두 줄로 깨져 한 단계 줄인다(1025px 에서 잉크폭 308 < 칸 323). */
  .footer__col > .footer__tel { font-size: 4.4rem; }
  /* 진료시간 비고는 어차피 줄바꿈되므로 문구 중간이 아니라 아랫줄로 통째로 내린다. */
  .footer__hours dd span { display: block; margin-left: 0; }
}
@media (max-width: 1024px) {
  html { font-size: 10px; }
  :root { --hdH: 8rem; --hdH-fix: 7rem; --inPd: 2.4rem; }
  .gnb { display: none; }
  .gnb__panel { display: none; }
  .header__menu { display: block; }
  .header__in { padding: 0 2.4rem; }
  .header__logo img { width: 17.5rem; }
  .header.is-fixed .header__logo img { width: 16rem; }
  /* 퀵바는 1691px 이하에서 이미 우하단 가로 바로 바뀌므로 세로 바용 크기 지정은 두지 않는다.
     (남겨 두면 여기서 다시 세로 모양으로 되돌아가 바닥에 박힌다) */

  .sec-eng { font-size: 7rem; }
  .sec-title { font-size: 2.8rem; }

  .footer { padding: 6rem 0 3.6rem; }
  .footer__top { flex-wrap: wrap; gap: 4rem 6rem; padding-bottom: 5rem; }
  .footer__col { max-width: 100%; }
  .footer__col:nth-child(1), .footer__col:nth-child(2) { width: auto; }
  .footer__col > p, .footer__hours { margin-top: 2rem; }
  .footer__bot { flex-wrap: wrap; gap: 3rem; padding-top: 3.6rem; }
  .footer__info { flex-basis: 100%; order: 3; }
  .footer__sns { margin-left: auto; }
}
@media (max-width: 767px) {
  :root { --inPd: 2rem; }
  body { font-size: 1.5rem; }
  .sec-eng { font-size: 4.6rem; }
  .sec-title { font-size: 2.4rem; }
  .sec-desc { margin-top: 1rem; font-size: 1.4rem; }

  .header__logo img { width: 15rem; }
  .header.is-fixed .header__logo img { width: 14rem; }
  .header__login { display: none; }

  .quick { right: 1.2rem; bottom: 1.2rem; top: auto; transform: none; }
  .quick__list { display: flex; width: auto; padding: 0; border-radius: 3rem; }
  .quick__list > li + li { border-top: 0; border-left: 1px solid rgba(255,255,255,.14); }
  .quick__list a { padding: 1rem 1.2rem; }
  .quick__ico { height: 2.2rem; }
  /* 아이콘만 남기되 글자는 화면에서만 감춘다 — display:none 으로 지우면
     svg 가 aria-hidden 이라 링크에 읽을 이름이 하나도 남지 않는다. */
  .quick__txt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap;
  }
  .footer__logo { flex: 0 0 auto; }
  .footer__sns { flex-wrap: wrap; gap: 1.2rem; }

  .quick__top { width: 4.4rem; height: 4.4rem; margin: .8rem 0 0 auto; }
  .quick__top svg { width: 1.4rem; }

  .btn-round, .btn-solid { height: 5rem; padding: 0 2.4rem; font-size: 1.4rem; }
  .footer__col { flex-basis: 100%; }
  .footer__tel { font-size: 3rem; }
  .footer__addr .bar { display: none; }
  .footer__addr { line-height: 1.8; }
}