/* ============================================================
   DIVINE PLASTIC SURGERY - Common UI
   공통 헤더 · 모바일 메뉴 · FAB · 푸터 전용
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');

:root {
  --color-white:#fff;
  --color-black:#111;
  --color-brown:#b07f80;
  --color-brown-dark:#8f6364;
  --color-brown-light:#dfc5c5;
  --color-bg-light:#f5f5f5;
  --color-text-main:#111;
  --color-text-sub:#555;
  --color-text-muted:#888;
  --color-border:#e8e2de;
  --color-border-light:#f0ebe8;
  --font-kr:'Pretendard Variable','Malgun Gothic',sans-serif;
  --font-en:'Cormorant Garamond','Montserrat',serif;
  --font-en-sans:'Montserrat',sans-serif;
  --transition-base:all .3s ease;
  --transition-slow:all .5s ease;
  --shadow-sm:0 2px 10px rgba(0,0,0,.08);
  --shadow-md:0 4px 20px rgba(0,0,0,.12);
}

/* 서브페이지의 전역 스타일을 건드리지 않도록 공통 UI에만 reset 적용 */
#site-header *, #site-header *::before, #site-header *::after,
#mobile-nav-overlay *, #mobile-nav-overlay *::before, #mobile-nav-overlay *::after,
#mobile-nav-panel *, #mobile-nav-panel *::before, #mobile-nav-panel *::after,
#fab-wrap *, #fab-wrap *::before, #fab-wrap *::after,
#site-footer *, #site-footer *::before, #site-footer *::after,
#top-btn, #top-btn::before, #top-btn::after {box-sizing:border-box}

#site-header a, #mobile-nav-panel a, #fab-wrap a, #site-footer a {
  /*color:inherit;*/text-decoration:none;transition:var(--transition-base)
}
#site-header ul, #mobile-nav-panel ul, #site-footer ul {list-style:none;margin:0;padding:0}
#site-header button, #mobile-nav-panel button, #fab-wrap button, #top-btn {
  font-family:var(--font-kr);cursor:pointer
}

/* ===================== HEADER ===================== */
#site-header {position:fixed;top:0;left:0;width:100%;z-index:1000;transition:var(--transition-slow)}
#site-header.scrolled {box-shadow:var(--shadow-md)}
#top-bar {display:none}
#header-main {background:var(--color-white);border-bottom:1px solid var(--color-border-light)}
#header-main .inner-wrap {display:flex;align-items:center;width:100%;max-width:1640px;height:100px;margin:0 auto;padding:0}

#logo {flex:0 0 auto;margin-right:clamp(20px,3vw,50px)}
#logo h1 {display:flex;align-items:center;justify-content:flex-start;height:100%;margin:0;padding:0;line-height:1}
#logo a {display:flex;align-items:center;justify-content:center;height:100%;padding:0;line-height:0}
.logo-img {display:block;width:auto;height:44px;filter:invert(1);transition:var(--transition-base)}
#logo a:hover .logo-img {opacity:.8}

#gnb {display:flex;flex:1 1 auto;justify-content:center;min-width:0}
#gnb-list {display:flex;align-items:center;justify-content:center;width:100%}
.gnb-item {position:relative}
.gnb-link {display:block;height:100px;padding:0 32px;color:var(--color-text-main);font-size:18px;font-weight:500;line-height:100px;white-space:nowrap;transition:var(--transition-base)}
.gnb-link:hover {color:var(--color-brown)}
.gnb-highlight {color:var(--color-brown);font-weight:600}
.gnb-highlight:hover {color:var(--color-brown-dark)}

.sub-menu {display:none;position:absolute;top:100%;left:0;z-index:999;min-width:180px;padding:10px 0;background:var(--color-white);border-top:2px solid var(--color-brown);border-bottom:1px solid var(--color-border);border-radius:0 0 14px 14px;box-shadow:var(--shadow-md)}
.gnb-item.has-sub:hover .sub-menu {display:block}
.sub-menu a {display:block;padding:13px 24px;color:var(--color-text-sub);font-size:16px;line-height:1.8;white-space:nowrap}
.sub-menu a:hover {padding-left:28px;color:var(--color-brown);background:var(--color-bg-light)}

#header-util {display:flex;flex:0 0 auto;align-items:center}
.header-member-nav ul {display:flex;align-items:center}
.header-member-nav li {display:inline-flex;align-items:center}
.header-member-nav li+li::before {content:'|';margin:0 8px;color:var(--color-border);font-size:11px}
.header-member-nav a {display:inline-block;color:var(--color-text-muted);font-size:13px;white-space:nowrap}
.header-member-nav a:hover {color:var(--color-brown)}
.header-util-divider {display:none}

#mobile-menu-btn {display:none;flex-direction:column;gap:5px;width:36px;margin-left:16px;padding:8px 0;border:0;background:transparent}
#mobile-menu-btn span {display:block;width:100%;height:2px;background:var(--color-black);transition:background .3s ease}
#mobile-tel-btn {display:none}

/* 히어로 위 투명 헤더 */
/* .hero-header #header-main {background:rgba(255,255,255,.05);border-bottom-color:rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.hero-header .logo-img {filter:brightness(10)}
.hero-header .gnb-link {color:rgba(255,255,255,.85)}
.hero-header .gnb-link:hover {color:var(--color-white)}
.hero-header .gnb-highlight {color:var(--color-brown-light)}
.hero-header .header-member-nav a {color:rgba(255,255,255,.65)}
.hero-header .header-member-nav a:hover {color:var(--color-white)}
.hero-header .header-member-nav li+li::before {color:rgba(255,255,255,.2)}
.hero-header #mobile-menu-btn span {background:rgba(255,255,255,.9)} */
body.hero-header #site-header #header-main { background:rgba(255,255,255,.05); border-bottom-color:rgba(255,255,255,.1); backdrop-filter:blur(8px); }
body.hero-header #site-header .logo-img { filter:brightness(10); }
body.hero-header #site-header #gnb .gnb-link { color:rgba(255,255,255,.85) !important; }
body.hero-header #site-header #gnb .gnb-link:hover { color:var(--color-white) !important; }
body.hero-header #site-header #gnb .gnb-highlight { color:var(--color-brown-light) !important; }
body.hero-header #site-header .header-member-nav a { color:rgba(255,255,255,.65) !important; }
body.hero-header #site-header .header-member-nav a:hover { color:var(--color-white) !important; }
body.hero-header #site-header .header-member-nav li + li::before { color:rgba(255,255,255,.2); }
body.hero-header #site-header #mobile-menu-btn span { background:rgba(255,255,255,.9); }


/* 언어 선택 */
.lang-selector {position:relative;display:inline-flex;align-items:center;margin-right:16px}
.lang-globe-btn {display:flex;align-items:center;justify-content:center;padding:6px 8px;border:0;background:transparent;opacity:.8;transition:var(--transition-base)}
.lang-globe-btn:hover {opacity:1;transform:scale(1.08)}
.lang-globe-img {display:block;width:28px;height:28px;max-width:fit-content;object-fit:contain}
.hero-header .lang-globe-img {filter:brightness(0) invert(1)}
body:not(.hero-header) .lang-globe-img {filter:invert(55%) sepia(30%) saturate(800%) hue-rotate(330deg) brightness(.85)}
.lang-dropdown {position:absolute;top:calc(100% + 30px);left:50%;z-index:1100;display:flex;visibility:hidden;flex-direction:column;gap:4px;min-width:auto;padding:8px;background:var(--color-white);border:1px solid var(--color-border);border-top:2px solid var(--color-brown);border-radius:0 0 12px 12px;box-shadow:var(--shadow-md);opacity:0;transform:translate(-50%,-8px);transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
.lang-dropdown.open {visibility:visible;opacity:1;transform:translate(-50%,0)}
.lang-item {display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px}
.lang-item:hover {background:var(--color-bg-light)}
.lang-item .flag-icon {display:block;flex-shrink:0;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;object-fit:cover;opacity:.85}
.lang-item:hover .flag-icon {opacity:1;transform:scale(1.1)}

/* ===================== MOBILE NAV ===================== */
#mobile-nav-overlay {display:none;position:fixed;inset:0;z-index:1990;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease}
#mobile-nav-overlay.open {display:block;opacity:1}
#mobile-nav-panel {position:fixed;top:0;right:-100%;z-index:2000;width:85%;max-width:360px;height:100%;padding:0;overflow-y:auto;background:var(--color-white);transition:right .35s ease}
#mobile-nav-panel.open {right:0}
.mobile-nav-header {display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border-light)}
.mobile-logo-text {color:var(--color-black);font-family:var(--font-en);font-size:22px;font-weight:400}
.mobile-close-btn {display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:transparent;color:var(--color-text-sub);font-size:18px}
.mobile-nav-list {padding:16px 0}
.mobile-nav-item {border-bottom:1px solid var(--color-border-light)}
.mobile-nav-link {display:flex;align-items:center;justify-content:space-between;padding:16px 24px;color:var(--color-text-main);font-size:17px;font-weight:500}
.mobile-nav-link.highlight {color:var(--color-brown)}
.mobile-nav-sub {display:none;padding:8px 0;background:var(--color-bg-light)}
.mobile-nav-sub.open {display:block}
.mobile-nav-sub a {display:block;padding:10px 36px;color:var(--color-text-sub);font-size:15px}

/* ===================== FAB ===================== */
#fab-wrap {position:fixed;right:32px;bottom:106px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
@keyframes fabDotsAnim {0%,100%{letter-spacing:3px;opacity:1}50%{letter-spacing:7px;opacity:.7}}
#fab-toggle {position:relative;z-index:2;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:#c9a0a1;color:var(--color-white);box-shadow:0 6px 24px rgba(201,160,161,.45);transition:var(--transition-base)}
#fab-toggle:hover,#fab-wrap.open #fab-toggle {background:#b98788}
#fab-toggle:hover {transform:scale(1.07)}
.fab-dots {position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding-bottom:4px;font-size:20px;font-weight:900;line-height:1;letter-spacing:3px;animation:fabDotsAnim 1.6s ease-in-out infinite}
#fab-items {display:flex;visibility:hidden;flex-direction:column-reverse;align-items:flex-end;gap:10px;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}
#fab-wrap.open #fab-items {visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
.fab-item {display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:130px;padding:12px 22px;border-radius:50px;background:#c9a0a1;color:var(--color-white)!important;box-shadow:0 3px 14px rgba(201,160,161,.35);font-size:14px;font-weight:500;white-space:nowrap}
.fab-item:hover {background:#b98788;transform:translateX(-4px)}
.fab-item i {flex-shrink:0;width:18px;font-size:15px;text-align:center}

/* ===================== FOOTER ===================== */
#site-footer {position:relative;min-height:420px;overflow:hidden}
.footer-bg-wrap {position:absolute;inset:0;z-index:0}
.footer-bg-img {display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.footer-bg-overlay {position:absolute;inset:0;background:rgba(8,8,8,.72)}
.footer-content-wrap {position:relative;z-index:1;padding:128px 0 88px}
.footer-content-wrap .inner-wrap {width:100%;max-width:1560px;margin:0 auto;padding:0!important}
.footer-inner {display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.footer-left {flex:1;min-width:0;margin-left:0!important;padding-left:0!important}
.footer-logo-area {margin-left:0!important;padding-left:0!important}
.footer-logo-img {display:block;width:auto;height:44px;margin:0 0 28px!important;padding:0;filter:brightness(10);opacity:.92}
.footer-address {margin-bottom:20px;font-style:normal}
.footer-address p {display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin:0;color:rgba(255,255,255,.65);font-size:17px;line-height:2.4}
.footer-address a {color:rgba(255,255,255,.5)}
.footer-address a:hover {color:var(--color-brown)}
.footer-address .sep {margin:0 8px;color:rgba(255,255,255,.25)}
.footer-copy {margin-top:10px;color:rgba(255,255,255,.35);font-family:var(--font-en-sans);font-size:14px;text-transform:uppercase}
.footer-right {display:flex;flex-shrink:0;flex-direction:column;align-items:flex-end;gap:20px}
/* .footer-sns-nav ul {display:flex;align-items:center;gap:10px}
.footer-sns-nav a {display:flex;align-items:center;justify-content:center;width:52px;height:52px;color:rgba(255,255,255,.65);font-size:30px}
.footer-sns-nav a:hover {color:var(--color-brown)}
.footer-cafe-icon,.footer-blog-icon {display:block;width:28px;height:28px;object-fit:contain;filter:brightness(0) invert(1);opacity:.65}
.footer-blog-icon {width:30px;height:30px}
.footer-sns-cafe:hover .footer-cafe-icon,.footer-sns-blog:hover .footer-blog-icon {opacity:1;filter:invert(62%) sepia(18%) saturate(500%) hue-rotate(308deg) brightness(.92) contrast(1)} 
.footer-link-nav ul {display:flex;align-items:center;justify-content:flex-end}
.footer-link-nav li+li::before {content:'|';margin:0 12px;color:rgba(255,255,255,.15);font-size:12px}
.footer-link-nav a {color:rgba(255,255,255,.55);font-size:15px}
.footer-link-nav a:hover {color:var(--color-white)}*/

#site-footer .footer-sns-nav ul { display:flex; align-items:center; gap:10px; margin:0; padding:0; list-style:none; }
#site-footer .footer-sns-nav li { margin:0; padding:0; }
#site-footer .footer-sns-nav a { display:flex; align-items:center; justify-content:center; width:52px; height:52px; color:rgba(255,255,255,.65) !important; font-size:30px; line-height:1; text-decoration:none; transition:var(--transition-base); }
#site-footer .footer-sns-nav a:hover { color:var(--color-brown) !important; }
/* Font Awesome 아이콘 */
#site-footer .footer-sns-nav a i { color:inherit !important; font-size:30px; line-height:1; }
/* 네이버 블로그·카페 이미지 아이콘 */
#site-footer .footer-blog-icon, #site-footer .footer-cafe-icon { display:block; width:30px; height:30px; max-width:none; object-fit:contain; filter:brightness(0) invert(1); opacity:.65; transition:var(--transition-base); }
#site-footer .footer-cafe-icon { width:28px; height:28px; }
/* 이미지 아이콘 hover */
#site-footer .footer-sns-blog:hover .footer-blog-icon, #site-footer .footer-sns-cafe:hover .footer-cafe-icon { opacity:1; filter: invert(62%) sepia(18%) saturate(500%) hue-rotate(308deg) brightness(.92) contrast(1); }
#site-footer .footer-link-nav ul { display:flex; align-items:center; justify-content:flex-end; gap:0; margin:0; padding:0; list-style:none; }
#site-footer .footer-link-nav li { display:flex; align-items:center; margin:0; padding:0; }
#site-footer .footer-link-nav li + li::before { content:'|'; margin:0 12px; color:rgba(255,255,255,.15); font-size:12px; }
#site-footer .footer-link-nav a { color:rgba(255,255,255,.55) !important; font-size:15px; text-decoration:none; transition:var(--transition-base); }
#site-footer .footer-link-nav a:hover { color:#fff !important; }

/* ===================== TOP BUTTON ===================== */
#top-btn {position:fixed;right:32px;bottom:32px;z-index:890;display:none;align-items:center;justify-content:center;width:64px;height:64px;padding:0;border:1px solid var(--color-border);border-radius:50%;background:var(--color-white);color:var(--color-text-sub);box-shadow:var(--shadow-sm);font-size:16px;transition:var(--transition-base)}
#top-btn.visible {display:flex}
#top-btn:hover {border-color:var(--color-brown);background:var(--color-brown);color:var(--color-white)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1800px) {
  #header-main .inner-wrap {width:95%}
}
@media (max-width:1600px) {
  #header-main .inner-wrap {height:92px}
  .gnb-link {height:92px;padding:0 20px;font-size:17px;line-height:92px}
  .lang-dropdown {top:calc(100% + 27px)}
  .footer-content-wrap .inner-wrap {width:95%}
}
@media (max-width:1440px) {
  #header-main .inner-wrap {height:84px}
  .logo-img {height:38px}
  .gnb-link {height:84px;padding:0 14px;font-size:16px;line-height:84px}
  .lang-dropdown {top:calc(100% + 23px)}
}
@media (max-width:1200px) {
  #gnb {display:none}
  #header-main .inner-wrap {position:relative;display:flex;align-items:center;justify-content:space-between;width:calc(100% - 32px);max-width:100%;height:72px;padding:0}
  #mobile-tel-btn {display:flex;order:1;flex-shrink:0;align-items:center;justify-content:center;width:44px;height:44px;color:var(--color-text-main);font-size:22px}
  .hero-header #mobile-tel-btn {color:rgba(255,255,255,.85)}
  #logo {position:absolute;left:50%;order:2;margin-right:0;transform:translateX(-50%)}
  #header-util {order:3}
  #mobile-menu-btn {display:flex;margin-left:10px}
  .lang-selector {margin-right:0}
  .lang-globe-btn {padding:4px}
  .lang-globe-img {width:24px;height:24px}
  .lang-dropdown {top:calc(100% + 21px)}
  .header-member-nav {display:none}
}
@media (max-width:768px) {
  .footer-content-wrap {padding:80px 20px 64px}
  .footer-content-wrap .inner-wrap {width:100%}
  .footer-inner {flex-direction:column;align-items:center;gap:32px;text-align:center}
  .footer-left {display:flex;flex-direction:column;align-items:center;width:100%}
  .footer-logo-area {display:flex;justify-content:center;width:100%}
  .footer-logo-img {margin-right:auto!important;margin-left:auto!important}
  .footer-address {margin-bottom:12px;text-align:center}
  .footer-address p {flex-direction:column;justify-content:center;gap:0;font-size:15px;line-height:1.7}
  .footer-address .sep {display:none}
  .footer-copy {text-align:center;font-size:13px;}
  .footer-right {align-items:center;width:100%}
  .footer-sns-nav ul,.footer-link-nav ul {justify-content:center}
  #site-footer .footer-link-nav ul { justify-content:center; flex-wrap:wrap; }
  #site-footer .footer-sns-nav a{width: 35px;height: 35px;}
  #fab-wrap {right:16px;bottom:80px;pointer-events: none;}
  #fab-wrap a,
  #fab-wrap button,
  #fab-wrap .fab-item,
  #fab-wrap .fab-main,
  #fab-wrap .fab-top { pointer-events: auto; }
  #fab-wrap .is-hidden,
  #fab-wrap [hidden] { visibility: hidden; opacity: 0; pointer-events: none !important; }
  #fab-wrap.active .fab-menu { visibility: visible; opacity: 1; pointer-events: auto; }
  #fab-toggle {width:45px;height:45px}
  #top-btn {right:16px;bottom:24px;width:45px;height:45px;font-size:14px}
}