/* Shared masthead and WordPress navigation overlay. */
:root {
  --ear-booking: #a6480d;
  --ear-booking-hover: #843a0c;
  --ear-control-radius: 7px;
  --ear-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M7 3v4m10-4v4M3 10h18m-13 5 2 2 5-4'/%3E%3C/svg%3E");
  --ear-handset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.3 3.4l2.1 4.5-2 2.1c1.4 2.9 3.7 5.2 6.6 6.6l2.1-2 4.5 2.1-.2 2.7c-.1 1-1 1.8-2 1.7C10.1 20.2 3.8 13.9 2.9 5.6c-.1-1 .7-1.9 1.7-2z'/%3E%3C/svg%3E");
}
#ear-header {
  --menu-ink: #24252a;
  --menu-accent: #a14309;
  --menu-line: #e7e4df;
  --menu-tint: #fff3e6;
  border-bottom: 1px solid var(--menu-line);
}
#ear-header #ear-header-inner {
  width: 100%; max-width: 1600px; margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 68px); gap: clamp(16px, 2.6vw, 40px);
}
#ear-header #ear-header-inner > .wp-block-image {flex: 0 0 clamp(170px, 17.5vw, 275px)}
#ear-header #ear-header-inner > .wp-block-image img {width: 100%; height: auto}
#ear-header #ear-header-inner > .wp-block-image a {display:flex; align-items:center}
#ear-header-inner .ear-menu-action {display:none}
#ear-header-inner a:focus-visible, #ear-header-inner button:focus-visible {
  outline: 2px solid #88401c; outline-offset: 2px; border-radius: 4px;
}
#ear-header-inner nav a:is([aria-current], .ear-menu-section),
#ear-header-inner li.has-child:has(a:is([aria-current], .ear-menu-section)) > a {color:var(--menu-accent)}
#ear-header-utility {background:#f7f6f3; border-bottom:1px solid #efede8}
#ear-utility {max-width:1600px; padding-inline:clamp(24px,4vw,68px)}
#ear-header #ear-utility a {color:#54544f}
#ear-header #ear-utility a:hover {text-decoration:underline; text-underline-offset:.22em}

@media (min-width:961px) {
  #ear-header #ear-header-inner {height:clamp(78px,6.7vw,100px)}
  #ear-header #ear-header-inner nav {flex:1; min-width:0; font-size:clamp(1rem,1.36vw,1.3rem); font-weight:660; letter-spacing:-.025em}
  #ear-header-inner nav .wp-block-navigation__responsive-container {width:100%}
  #ear-header #ear-header-inner nav .wp-block-navigation__responsive-container ul.wp-block-navigation__container {
    width:100%; justify-content:space-evenly; flex-wrap:nowrap; column-gap:clamp(4px,1.05vw,20px);
  }
  #ear-header-inner .wp-block-navigation__container > li > a {
    position:relative; padding:6px clamp(4px,.58vw,10px); color:var(--menu-ink);
  }
  #ear-header-inner .wp-block-navigation__container > li > a::after {
    content:""; position:absolute; inset:auto 8px 0; height:2px; background:var(--menu-accent);
    transform:scaleX(0); transform-origin:left;
  }
  #ear-header-inner .wp-block-navigation__container > li:is(:hover,:focus-within,:has(a[aria-current]),:has(.ear-menu-section)) > a::after {transform:scaleX(1)}
  #ear-header-inner .wp-block-navigation__container > .has-child {
    margin-left:clamp(2px,.55vw,12px); padding-left:clamp(8px,1.15vw,18px); position:relative;
  }
  #ear-header-inner .wp-block-navigation__container > .has-child::before {content:""; position:absolute; left:0; top:25%; height:50%; border-left:1px solid #dad5ce}
  #ear-header-inner .wp-block-navigation__container > .has-child > a {padding-right:0}
  #ear-header-inner .wp-block-navigation__submenu-icon {color:#735943}
  #ear-header-inner .has-child:focus-within > a,
  #ear-header-inner .has-child:hover > a {color:var(--menu-accent)}
  #ear-header-inner .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {transform:rotate(180deg)}
  #ear-header-inner .wp-block-navigation__submenu-container {
    left:auto; right:0; border:1px solid var(--menu-line); border-top:3px solid #db742d;
    border-radius:0 0 10px 10px; box-shadow:0 10px 24px #30281d19;
  }
  #ear-header-inner .wp-block-navigation__submenu-container a {
    width:100%; justify-content:space-between; border-radius:5px; font-size:1rem; font-weight:600;
  }
  #ear-header-inner .wp-block-navigation__submenu-container a::after {content:""; width:6px; height:6px; border:solid #9c8877; border-width:1.5px 1.5px 0 0; transform:rotate(45deg)}
  #ear-header-inner .wp-block-navigation__submenu-container a:is(:hover,:focus-visible,[aria-current],.ear-menu-section) {background:var(--menu-tint); color:var(--menu-accent)}
  #ear-header #ear-header-inner > .wp-block-buttons {display:flex; flex:none}
  #ear-header #ear-header-inner > .wp-block-buttons .wp-block-button__link {
    min-width:0; min-height:46px; padding:10px clamp(14px,1.6vw,26px); border-radius:var(--ear-control-radius);
    gap:8px; background:var(--ear-booking); color:#fff; font-size:1rem; font-weight:700; white-space:nowrap;
  }
  #ear-header-inner > .wp-block-buttons a::before {
    content:""; width:18px; height:18px; flex:none; background:currentColor;
    mask:var(--ear-calendar) center / contain no-repeat;
  }
  #ear-header #ear-header-inner > .wp-block-buttons a:hover {background:var(--ear-booking-hover)}
}

@media (max-width:960px) {
  #ear-header #ear-header-inner {height:68px; padding-inline:clamp(16px,4vw,32px); gap:12px}
  #ear-header #ear-header-inner > .wp-block-image {flex-basis:clamp(148px,38vw,194px)}
  #ear-header #ear-header-inner > .wp-block-buttons {display:none}
  #ear-header-inner .wp-block-navigation__responsive-container-open,
  #ear-header-inner .wp-block-navigation__responsive-container-close {
    min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border:1px solid var(--menu-line); border-radius:7px; background:#faf9f7; color:var(--menu-ink);
  }
  #ear-header-inner .wp-block-navigation__responsive-container-open {padding:0 12px}
  #ear-header-inner .wp-block-navigation__responsive-container-open::after {content:"메뉴"; font:650 .9375rem/1.2 Pretendard,sans-serif}
  #ear-header-inner .wp-block-navigation__responsive-container-open svg {width:21px}
  #ear-header-inner .wp-block-navigation__responsive-container.is-menu-open {
    padding:0; background:rgba(32,34,36,.38); overflow-y:auto; overscroll-behavior:contain; color:var(--menu-ink);
  }
  #ear-header-inner .is-menu-open .wp-block-navigation__responsive-close {
    width:min(100%,28rem); max-width:none; min-height:100%; margin:0 0 0 auto;
    background:#fff; box-shadow:-10px 0 38px #211c1717; padding:0 clamp(18px,5vw,30px) max(22px,env(safe-area-inset-bottom));
  }
  #ear-header-inner .is-menu-open .wp-block-navigation__responsive-dialog {margin:0; padding:0}
  #ear-header-inner .is-menu-open .wp-block-navigation__responsive-dialog::before {
    content:""; display:block; height:68px; border-bottom:1px solid var(--menu-line);
    background:url("../logo.png") left center / 148px auto no-repeat;
  }
  #ear-header-inner .wp-block-navigation__responsive-container-close {top:12px; right:0}
  #ear-header-inner .is-menu-open .wp-block-navigation__responsive-container-content {
    display:block; padding:20px 0 0; text-align:left;
  }
  #ear-header-inner .is-menu-open .wp-block-navigation__responsive-container-content::before {
    content:"진료 분야"; display:block; margin-bottom:7px; color:var(--menu-accent);
    font-size:.875rem; line-height:1.5; font-weight:700; letter-spacing:.015em;
  }
  #ear-header-inner .is-menu-open .wp-block-navigation__container {
    display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 8px; align-items:stretch;
  }
  #ear-header-inner .is-menu-open .wp-block-navigation__container > li {grid-column:1/-1; width:100%; align-items:stretch}
  #ear-header-inner .is-menu-open .wp-block-navigation__container > li.wp-block-navigation-link:not(.ear-menu-action) > a {
    width:100%; display:flex; align-items:center; justify-content:flex-start; gap:12px;
    min-height:54px; padding:6px 8px; border-bottom:1px solid var(--menu-line);
    font-size:1.1875rem; font-weight:680; line-height:1.4; letter-spacing:-.025em;
  }
  #ear-header-inner .is-menu-open .wp-block-navigation-link a[href*="/services/#"]::before {
    content:""; width:26px; height:26px; flex:none; background:#a6501c;
    mask:url("a-symbols.svg") var(--menu-icon,0%) center / 1000% 100% no-repeat;
  }
  #ear-header-inner a[href$="#hearing"] {--menu-icon:11.1111%}
  #ear-header-inner a[href$="#vertigo"] {--menu-icon:22.2222%}
  #ear-header-inner a[href$="#craniosacral"] {--menu-icon:33.3333%}
  #ear-header-inner a[href$="#temporal"] {--menu-icon:44.4444%}
  #ear-header-inner .is-menu-open a[href*="/services/#"]::after {
    content:""; width:7px; height:7px; border:solid #9c8877; border-width:1.5px 1.5px 0 0;
    transform:rotate(45deg); margin-left:auto; margin-right:5px;
  }
  #ear-header-inner .is-menu-open .wp-block-navigation__container > .has-child {display:block; margin:12px 0 18px}
  #ear-header-inner .is-menu-open .has-child > a {justify-content:flex-start; color:var(--menu-accent); font-size:.875rem; font-weight:700}
  #ear-header-inner .is-menu-open ul.wp-block-navigation__submenu-container {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; width:100%;
    padding:5px!important; border:0; border-radius:7px; background:#f3f2ef!important;
  }
  #ear-header-inner .is-menu-open .wp-block-navigation__submenu-container a {
    width:100%; padding:6px 2px; justify-content:center; min-height:44px; text-align:center;
    font-size:.9375rem; font-weight:620; border-radius:4px;
  }
  #ear-header-inner .is-menu-open a:focus:not(:focus-visible) {outline:none}
  #ear-header-inner .is-menu-open a:focus-visible,
  #ear-header-inner .is-menu-open a[aria-current], #ear-header-inner .is-menu-open a.ear-menu-section {background:var(--menu-tint)}
  #ear-header-inner .is-menu-open .wp-block-navigation__container > .ear-menu-action {display:flex; grid-column:span 1}
  #ear-header-inner .is-menu-open .ear-menu-action a {
    width:100%; justify-content:center; gap:8px; min-height:48px; padding:8px; border-radius:var(--ear-control-radius);
    border:1px solid #a89c91; color:#38302a; font-size:1rem; font-weight:700;
  }
  #ear-header-inner .is-menu-open .ear-menu-book a {background:var(--ear-booking); border-color:var(--ear-booking); color:white}
  #ear-header-inner .is-menu-open .ear-menu-action a::before {content:""; width:18px; height:18px; flex:none; background:currentColor; mask:var(--ear-handset) center / contain no-repeat}
  #ear-header-inner .is-menu-open .ear-menu-book a::before {mask-image:var(--ear-calendar)}
}
@media (prefers-reduced-motion:no-preference) {
  #ear-header-inner .wp-block-navigation__container > li > a::after, #ear-header-inner .wp-block-navigation__submenu-icon svg {transition:transform .16s ease-out}
}