/* =====================================================
   숨피부과 헤더 (PC 메가메뉴 + 모바일 드로어)
   높이 기준: PC 178px / ~1023px 90px / ~767px 60px
   (기존 #header 와 동일 → 본문 위치 변화 없음)
   ===================================================== */
#sh, #sh * , .sh-drawer, .sh-drawer * { box-sizing: border-box; }
#sh { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #303030; transition: background .3s; }
#sh a { color: #fff; text-decoration: none; }
#sh ul, .sh-drawer ul { list-style: none; margin: 0; padding: 0; }

/* ---------- 상단 (로고/SNS/야간진료) ---------- */
.sh-top { height: 118px; position: relative; }
.sh-top-in { max-width: 1350px; height: 100%; margin: 0 auto; position: relative; text-align: center; }
.sh-logo { margin: 0; padding: 23px 0; line-height: 0; }
.sh-logo a { display: inline-block; width: 226px; height: 72px; background: url(../img/logo.png) no-repeat 0 0 / 100%; font-size: 0; text-indent: -9000px; overflow: hidden; vertical-align: middle; }
.sh-sns { position: absolute; left: 0; top: 50px; }
.sh-sns ul { display: flex; align-items: center; }
.sh-sns li + li { margin-left: 30px; }
.sh-sns img { display: block; }
.sh-night { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-radius: 20px; overflow: hidden; line-height: 0; }
.sh-night img { display: block; max-height: 80px; width: auto; }

/* ---------- 메인 메뉴 (PC) ---------- */
.sh-nav { border-top: 1px solid #8e8e8e; padding: 17px 0 0; height: 60px; transition: none; }
#sh .sh-nav > ul { display: flex; justify-content: center; max-width: 1600px; width: calc(100% - 50px); margin: 0 auto; word-break: keep-all; }
.sh-d1 { flex: 0 1 auto; min-width: 0; padding: 0 clamp(10px, 1.9vw, 34px); position: relative; }
.sh-d1 > a { display: block; height: 25px; font-size: 18px; line-height: 25px; letter-spacing: -.54px; text-align: center; white-space: nowrap; color: #fff; transition: color .2s; }
.sh-d1.is-current > a { color: #84c1c5; }
.sh-d2 { height: 0; overflow: hidden; }
.sh-d2 li a { display: block; padding: 6px 4px; font-size: 16px; font-weight: 300; line-height: 1.39; letter-spacing: -.54px; text-align: center; color: #fff; white-space: nowrap; }

/* 펼침 상태 : 전체 서브메뉴가 한 번에 내려옴 */
#sh.is-open .sh-nav { height: auto; padding-bottom: 28px; background: linear-gradient(180deg, #303030 60px, #595959 60px); }
#sh.is-open .sh-d2 { height: auto; overflow: visible; padding-top: 30px; }
#sh.is-open .sh-d1:hover > a,
#sh.is-open .sh-d1:focus-within > a { color: #84c1c5; }
#sh.is-open .sh-d2 li a:hover,
#sh.is-open .sh-d2 li a:focus { color: #84c1c5; }

/* ---------- 모바일 전용 요소 (PC 에서는 숨김) ---------- */
.sh-burger { display: none; }
.sh-drawer, .sh-dim { display: none; }

@media (max-width: 1279px) {
    #sh .sh-nav > ul { justify-content: space-between; }
    .sh-d1 { flex: 1 1 auto; padding: 0 6px; }
    .sh-sns { left: 20px; }
    .sh-night { right: 20px; }
    .sh-d1 > a { font-size: 16px; }
    .sh-d2 li a { font-size: 15px; }
}
@media (max-width: 1179px) {
    .sh-d1 > a { font-size: 14px; letter-spacing: -.8px; }
    .sh-d2 li a { font-size: 13px; }
}

/* ---------- 태블릿/모바일 : 햄버거 + 드로어 ---------- */
@media (max-width: 1023px) {
    #sh { height: 90px; background: #303030; }
    .sh-top { height: 90px; }
    .sh-top-in { padding: 0 4%; }
    .sh-logo { padding: 0; height: 90px; display: flex; align-items: center; justify-content: center; }
    .sh-logo a { width: 150px; height: 48px; }
    .sh-sns { display: none; }
    .sh-nav { display: none; }
    .sh-night { right: 4%; }
    .sh-night img { max-height: 52px; }

    .sh-burger { display: block; position: absolute; left: 4%; top: 50%; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; background: none; cursor: pointer; }
    .sh-burger span { position: absolute; left: 9px; width: 22px; height: 2px; background: #fff; border-radius: 1px; }
    .sh-burger span:nth-child(1) { top: 13px; }
    .sh-burger span:nth-child(2) { top: 19px; }
    .sh-burger span:nth-child(3) { top: 25px; }

    .sh-dim { display: block; position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .sh-drawer { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: 100%; max-width: 480px; z-index: 9999; background: #2d2d2d; color: #fff; transform: translateX(-100%); visibility: hidden; transition: transform .3s ease, visibility .3s; overscroll-behavior: contain; }
    html.sh-lock, html.sh-lock body { overflow: hidden; }
    html.sh-lock .sh-dim { opacity: 1; visibility: visible; }
    html.sh-lock .sh-drawer { transform: none; visibility: visible; }

    .sh-m-hd { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 20px; border-bottom: 1px solid #444; }
    .sh-m-hd .sh-m-logo { display: block; width: 106px; height: 34px; background: url(../img/logo.png) no-repeat 0 0 / 100%; font-size: 0; text-indent: -9000px; overflow: hidden; }
    .sh-m-close { position: relative; width: 40px; height: 40px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
    .sh-m-close:before, .sh-m-close:after { content: ""; position: absolute; left: 9px; top: 19px; width: 22px; height: 2px; background: #fff; transform: rotate(45deg); }
    .sh-m-close:after { transform: rotate(-45deg); }

    .sh-m-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .sh-m-item { border-bottom: 1px solid #444; }
    .sh-m-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 20px; height: 54px; border: 0; background: none; color: #fff; font: inherit; font-size: 17px; text-align: left; letter-spacing: -.5px; cursor: pointer; text-decoration: none; }
    .sh-m-row.is-current, .sh-m-item.is-open > .sh-m-row { color: #84c1c5; }
    .sh-m-row .chev { width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .25s; }
    .sh-m-item.is-open > .sh-m-row .chev { transform: rotate(-135deg); border-color: #84c1c5; }
    .sh-m-sub { display: grid; grid-template-rows: 0fr; background: #595959; transition: grid-template-rows .35s ease; }
    .sh-m-item.is-open > .sh-m-sub { grid-template-rows: 1fr; }
    .sh-m-sub > ul { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s ease; }
    .sh-m-item.is-open > .sh-m-sub > ul { opacity: 1; transition-delay: .05s; }
    .sh-m-sub li:first-child a { padding-top: 20px; }
    .sh-m-sub li:last-child a { padding-bottom: 20px; }
    .sh-m-sub a { display: block; padding: 13px 20px 13px 32px; color: #fff; font-size: 15px; font-weight: 300; letter-spacing: -.4px; text-decoration: none; }
    .sh-m-sub a:active, .sh-m-sub a.is-current { color: #84c1c5; }

    .sh-m-ft { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid #444; background: #262626; }
    .sh-m-ft ul { display: flex; align-items: center; }
    .sh-m-ft li + li { margin-left: 24px; }
    .sh-m-ft img { display: block; height: 22px; width: auto; }
    .sh-m-ft .tel { color: #fff; font-size: 15px; text-decoration: none; }
}
@media (max-width: 767px) {
    #sh { height: 60px; }
    .sh-top { height: 60px; }
    .sh-logo { height: 60px; }
    .sh-logo a { width: 106px; height: 34px; }
    .sh-night { right: 12px; }
    .sh-night img { max-height: 36px; }
    .sh-burger { left: 8px; }
    /* 모바일 하단 퀵바(.qick)와 겹치지 않도록 드로어는 전체화면 */
    .sh-drawer { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-drawer, .sh-dim, .sh-m-row .chev, .sh-m-sub, .sh-m-sub > ul { transition: none; }
}