@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://cdn.jsdelivr.net/nanumsquare/1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap');
/* Base line-height for safer inheritance */
html{line-height:1.5;}
body{line-height:inherit;}


/* ===========================
   CSS RESET
   =========================== */
body,html,
header,footer,aside,nav,section,article,details,figure,figcaption,menu,command,
div,dl,dd,ol,ul,li,form,fieldset,legend,iframe,table,caption,thead,tfoot,tbody,tr,th,td,
h1,h2,h3,h4,h5,h6,dt,summary,input,textarea,button,select,datalist,
img,embed,object,canvas,audio,video,meter,progress,keygen,
a,label,output,dialog,
address,blockquote,
p,pre,
span,b,strong,i,em,dfn,var,u,ins,s,del,q,mark,small,sub,sup,abbr,bdi,bdo,cite,time,ruby,rp,rt,code,kbd,samp,
acronym,big,frame,frameset,noframes,tt,
map,option,hr,*{
  border:0;padding:0;margin:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;
}
header,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block}
applet,basefont,center,dir,font,strike{display:none}
q, blockquote { quotes: none; }
q::before, q::after, blockquote::before, blockquote::after { content: ""; }
li,menu{list-style:none;overflow-wrap:anywhere;word-break:normal}
table{width:100%;border-spacing:0;border-collapse:separate;}
caption{text-align:left}
th,td{text-align:center;vertical-align:middle}
address{font-style:normal}
label{display:inline-block;}
a{text-decoration:none;display:inline;}

/* ===========================
   COMMON SETTINGS
   =========================== */
html{overflow-y:auto;}
html,body{height:100%;}
body{color:#333;font-size:13px;font-family:'Noto Sans KR', sans-serif, "Nanum Gothic";font-weight:400;min-width:320px;}
div{outline:0}
img {vertical-align:middle;}
::selection {background-color:#333;color:#fff;}

/* ===========================
   VIDEO BACKGROUND
   =========================== */
.fullscreen-bg {position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:-100;}
.fullscreen-bg__video{position:absolute;top:0;left:0;width:100%;height:100%;}
@media (min-aspect-ratio: 16/9) { .fullscreen-bg__video {height:300%;top:-100%;} }
@media (max-aspect-ratio: 16/9) { .fullscreen-bg__video {width:300%;left:-100%;} }

/* ===========================
   HEADER & NAVIGATION
   =========================== */
.gnb {position:absolute;width:auto;text-align:center;top:0;left:0;z-index:100;}
.gnb .logo {position:relative;padding:50px 0 25px 0;}
.gnb .logo img {width:150px;}
.gnb .menu {position:relative;}
.gnb .menu a {font-size:16px;font-weight:500;letter-spacing:1px;padding:0 25px;}
.gnb .menu .on {color:#9c7d03;font-weight:800;}

.maingnb .logo img {padding-top: 15px;}
.maingnb .menu a {color:white;opacity:0.8;}
.maingnb .menu a:hover {color:#ffcc00;opacity:1;}

/* Hamburger menu button (hidden on desktop) */
.gnb .ham {display:none;cursor:pointer;}

:root{ --gnb-h:64px; } /* высота вашей шапки .gnb */


/* ===========================
   MOBILE MENU (FIXED)
   =========================== */
/* ===== MOBILE OVERLAY MENU — финальная версия ===== */
:root{ --mm-head-h: 84px; } /* высота шапки */

.momenu{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.55); z-index:13000;
}
.momenu.open{ display:block; }

/* === ПАНЕЛЬ И ШАПКА: фиксируем к вьюпорту, чтоб двигались синхронно === */

/* Шапка (логотип по центру, ✕ слева) */
.momenu-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--mm-head-h);
  background:#fff; border-bottom:1px solid #eee;
  display:flex; align-items:center; justify-content:center;
  z-index:13001; /* поверх панели */
  will-change:transform;
}
.momenu-header .logo img{ height:32px; width:auto; display:block; }
.momenu .close{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.momenu .close img{ width:22px; height:22px; display:block; }

/* Контент панели */
.momenu > .line{
  position:fixed; left:0; right:0; top:var(--mm-head-h); bottom:0;
  background:#fff; overflow:auto;
  padding:12px 20px 24px;
  will-change:transform;
  /* по умолчанию на телефоне — БЕЗ слайда (занимает весь экран) */
  transform:translateX(0);
}

/* Ссылки — центр + разделители */
.momenu .line a{
  display:block; width:100%;
  text-align:center; font-size:18px; padding:14px 8px;
  color:#111 !important; text-decoration:none;
  border-bottom:1px solid #f0f0f0;
}
.momenu .line a:hover{ background:#f7f7f7; }

/* === Планшет/десктоп: панель выезжает справа, шапка едет вместе === */
@media (min-width:768px){
  .momenu-header{
    width:380px; left:auto; right:0;
    transform:translateX(100%);
  }
  .momenu > .line{
    width:380px; left:auto; right:0; top:0;
    padding:calc(var(--mm-head-h) + 12px) 24px 32px;
    box-shadow:-12px 0 24px rgba(0,0,0,.08);
    transform:translateX(100%);
  }
  .momenu.open .momenu-header,
  .momenu.open > .line{
    transform:translateX(0);
    transition:transform .3s ease;
  }
}

/* Блокируем скролл фона при открытом меню */
body.momenu-open{ overflow:hidden; }

/* === Mobile language dropdown (по клику) — опционально === */
#language-switcher-mobile.dropdown{ position:relative; width:100%; margin-top:6px; text-align: center !important; }
#language-switcher-mobile .dropbtn{
  width:100%; background:#f5f5f5; color:#222;
  padding:12px 16px; font-size:16px; border:0; text-align:left; cursor:pointer;
}
#language-switcher-mobile .dropdown-content{
  display:none; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#fff; min-width:180px; padding:6px 0;
  border:1px solid #eee; border-radius:8px; box-shadow:0 8px 16px rgba(0,0,0,.12); z-index:2;
}
#language-switcher-mobile .dropdown-content.open{ display:block; }
#language-switcher-mobile .dropdown-content a{
  color:#111; text-decoration:none; display:block; text-align:center;
  padding:10px 12px; opacity:0; transform:scale(0); transform-origin:top center;
}
#language-switcher-mobile .dropdown-content a:nth-child(1){ animation:scaleZ 300ms   0ms ease-in-out forwards; }
#language-switcher-mobile .dropdown-content a:nth-child(2){ animation:scaleZ 300ms  60ms ease-in-out forwards; }
#language-switcher-mobile .dropdown-content a:nth-child(3){ animation:scaleZ 300ms 120ms ease-in-out forwards; }
#language-switcher-mobile .dropdown-content a:hover{ background:#f7f0f0; }
@keyframes scaleZ{ 0%{opacity:0;transform:scale(0)} 80%{transform:scale(1.07)} 100%{opacity:1;transform:scale(1)} }

/* ===========================
   FOOTER
   =========================== */
.footer {position:relative;margin-top:80px;border-top:solid 2px #333;}
.footer .menu {position:relative;width:1000px;margin:0 auto;padding:45px 0 25px 0;}
.footer .menu h2 {letter-spacing:2px;padding-bottom:7px;}
.footer .menu a {font-size:13px;font-weight:700;padding-right:10px;margin-right:10px;border-right:solid 1px #e5e5e5;line-height:13px;}
.footer .menu a:last-child {border-right:0;}
.footer .copy {position:relative;width:1000px;margin:0 auto;padding:25px 0 35px 0;border-top:solid 1px #e5e5e5;font-size:12px;color:#999;}
.footer .copy span {margin-right:15px;}
.footer .copy p {padding-top:5px;}

/* ===========================
   MAIN PAGE STYLES
   =========================== */
.mainVisual {position:relative;text-align:center;width:100%;height:800px;}
.mainVisual .vod {position:relative;width:100%;height:100%;}
.mainVisual .text {position:absolute;width:100%;height:200px;top:50%;margin-top:-50px;left:0;color:white;}
.mainVisual .text p {font-weight:700;letter-spacing:1.5px;color:#ffe8b9;font-size:13px;}
.mainVisual .text h1 {font-family:'Nanum Myeongjo';font-size:45px;font-weight:300;padding:25px 0 0 0;line-height:50px;}
.mainVisual .text h2 {font-size:22px;font-weight:300;padding-bottom:30px;}
.mainVisual .text a {font-size:13px;border:solid 1px #d2d2d2;padding:12px 25px 12px 25px;font-weight:300;}
.mainVisual .text a img {padding:0 0 3px 17px;}
.mainVisual .text a:hover {color:#ffe8b9;background-color:#000;border:solid 1px #000;}

.mainVisual .arrow {position:absolute;top:50%;margin-top:-37px;}
.mainVisual .arrow a {opacity:0.3;}
.mainVisual .arrow a img {width:25px;}
.mainVisual .arrow a:hover {opacity:1;}
.mainVisual .arrow_left {left:30px;}
.mainVisual .arrow_right {right:30px;}
.mainVisual .flow {position:absolute;width:100%;text-align:center;bottom:25px;}
.mainVisual .flow a {padding:0 1px;}

.mainGo {position:relative;width:1000px;margin:0 auto;text-align:center;}
.mainGo h2 {font-size:13px;font-weight:700;letter-spacing:2px;padding-top:90px;}
.mainGo h1 {font-size:35px;font-weight:300;padding-bottom:50px;}
.mainGo .box {position:relative;}
.mainGo .box li {width:240px;height:320px;float:left;background-repeat: no-repeat;background-size:cover;background-position:center;color:white;margin-right:13px;}
.mainGo .box li:nth-child(1) {background-image:url('../img/mainLink_01.png');}
.mainGo .box li:nth-child(2) {background-image:url('../img/mainLink_02.png');}
.mainGo .box li:nth-child(3) {background-image:url('../img/mainLink_03.png');}
.mainGo .box li:nth-child(4) {background-image:url('../img/mainLink_04.png');margin-right:0px;}
.mainGo .box li a {display:block;width:100%;height:100%;}
.mainGo .box li p {font-weight:700;letter-spacing:1.5px;color:#ffe8b9;font-size:13px;padding:120px 0 0 0;}
.mainGo .box li h3 {font-size:26px;font-weight:300;line-height:28px;padding-bottom:15px;}
.mainGo .box li span {font-size:12px;opacity:0.7;}

.mainLink {position:relative;clear:both;width:1000px;margin:0 auto;padding-top:70px;}
.mainLink li {position:relative;float:left;width:190px;padding:0 33px 100px 110px;text-align:left;}
.mainLink li img {position:absolute;top:0;left:0;}
.mainLink li p {font-size:12px;font-weight:700;letter-spacing:2px;;opacity:0.5;}
.mainLink li h3 {font-size:24px;font-weight:400;padding:5px 0 3px 0;}
.mainLink li h4 {font-size:13px;line-height:16px;font-weight:300;}

.mainPhoto {position:relative;clear:both;width:auto;margin:0 auto;height:auto !important;}

.mainLast {position:relative;clear:both;width:1000px;margin:0 auto;padding-top:70px;text-align:center;}
.mainLast .line {position:absolute;width:2px;height:30px;background-color:black;left:50%;top:10px;margin-top:60px;}
.mainLast img {width:150px;padding:65px 0 20px 0;}
.mainLast p {font-weight:300;font-size:20px;}

/* ===========================
   SUB PAGES
   =========================== */
.subVisual {position:relative;height:400px;text-align:center;margin-top:200px;}
.subVisual01 {background-image:url('../img/subImg01.png');}
.subVisual02 {background-image:url('../img/subImg02.png');}
.subVisual03 {background-image:url('../img/subImg03.png');}
.subVisual04 {background-image:url('../img/subImg04.png');}
.subVisual05 {background-image:url('../img/subImg05.png');}
.subVisual06 {background-image:url('../img/subImg06.png');}
.subVisual07 {background-image:url('../img/subImg07.png');}
.subVisual p {font-weight:700;letter-spacing:3px;color:#ffe8b9;font-size:14px;padding:170px 0 0 0;}
.subVisual h1 {font-size:45px;font-weight:200;padding-bottom:30px;color:white;}

.subMenu {position:relative;border-bottom:solid 1px #e5e5e5;height:50px;}
.subMenu .box {position:relative;width:1000px;margin:0 auto;}
.subMenu .box li {float:left;text-align:center;border-left:solid 1px #e5e5e5;}
.subMenu .box li:last-child {border-right:solid 1px #e5e5e5;}
.subMenu .box li a {display:block;font-size:14px;font-weight:500;color:#7f7f7f;padding:15px 0 15px 0;}
.subMenu .box li a:hover {color:#333;font-weight:700;background-color:#f7f7f7;border-bottom:solid 1px #e5e5e5;}
.subMenu .box li .now {color:#333;font-weight:700;background-color:#f7f7f7;border-bottom:solid 1px #e5e5e5;}
.subMenu .box5 li {width:198.8px;}
.subMenu .box4 li {width:248.5px;}
.subMenu .box3 li {width:332px;}
.subMenu .box2 li {width:498.5px;}

.subMenu_fixed {position:fixed;top:0;left:0;width:100%;z-index:100;background-color:white;}

/* ===========================
   CONTENT SECTIONS
   =========================== */
.cont_concept {position:relative;width:1000px;margin:100px auto;text-align:center;}
.cont_concept h1 {font-size:17px;font-weight:800;letter-spacing:2px;text-decoration:underline;text-underline-position:under;text-underline-offset:3px;border-bottom:2px solid;display:inline-block;}
.cont_concept h2 {font-family:'Nanum Myeongjo';font-size:33px;font-weight:600;padding:50px 0 10px 0;line-height:40px;}
.cont_concept p {font-size:15px;}

.contGray {position:relative;padding:100px 0;background-color:#f2f2f2;}
.contWhite {position:relative;padding:100px 0;}
.contbox {position:relative;width:1000px;margin:0 auto;text-align:center;}
.contbox h1 {font-size:17px;font-weight:800;letter-spacing:2px;text-decoration:underline;text-underline-position:under;text-underline-offset:3px;border-bottom:2px solid;display:inline-block;margin-bottom:70px;}
.contbox .big {padding-bottom:10px;}
.contbox .text {position:relative;padding:50px 0;font-size:17px;}
.contbox .text2 {position:relative;padding:0 0 50px 0;font-size:20px;}
.contbox .text3 {position:relative;padding:20px 0;font-size:14px;clear:both;}
.contbox .text span {font-size:15px;padding:0 10px;}
.contbox .text span b {font-weight:700;}
.contbox .photo {position:relative;}
.contbox .photo li {float:left;width:495px;margin-right:10px;margin-bottom:10px;;}
.contbox .photo li:nth-child(even) {margin-right:0;}
.contbox .conclear {position:relative;clear:both;}

/* ===========================
   DESKTOP RESPONSIVE (>=1024px)
   =========================== */
@media (min-width:1024px){
  /* Desktop header layout */
  .gnb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  
  .gnb .logo {
    float: none;
    display: block;
    margin: 0;
    line-height: 0;
  }
  
  .gnb .logo img {
    display: block;
    max-height: 64px;
    height: auto;
  }
  
  .gnb .menu {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    width: 1000px;
    margin: 0 auto;
    padding-right: 100px;
  }
  
  .gnb .menu > a {
    flex: 0 0 auto;
    display: inline-block;
    white-space: nowrap;
    margin: 0 !important;
    padding: 8px 10px;
  }
  
  /* Language switcher */
  #language-switcher.dropdown {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  #language-switcher .dropbtn {
    background-color: transparent;
    color: inherit;
    padding: 10px 14px;
    font-size: 18px;
    border: none;
    cursor: pointer;
  }
  
  #language-switcher .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 5%;
    background-color: transparent;
    min-width: 80px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
  }
  
  #language-switcher .dropdown-content a {
    margin-left: 0 !important;
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    text-align: center;
    display: block;
    transform-origin: top center;
    opacity: 0;
    transform: scale(0);
  }
  
  #language-switcher .dropbtn:hover + .dropdown-content,
  #language-switcher .dropdown-content:hover,
  #language-switcher .dropbtn:focus + .dropdown-content,
  #language-switcher:focus-within .dropdown-content {
    display: block;
  }
  
  /* Animation for dropdown */
  #language-switcher .dropdown-content a:nth-child(1) {
    animation: scaleZ 300ms 0ms ease-in-out forwards;
  }
  #language-switcher .dropdown-content a:nth-child(2) {
    animation: scaleZ 300ms 60ms ease-in-out forwards;
  }
  #language-switcher .dropdown-content a:nth-child(3) {
    animation: scaleZ 300ms 120ms ease-in-out forwards;
  }
  
  @keyframes scaleZ {
    0% { opacity: 0; transform: scale(0); }
    80% { transform: scale(1.07); }
    100% { opacity: 1; transform: scale(1); }
  }
  
  #language-switcher .dropdown-content a:hover {
    background-color: rgba(247, 240, 240, 1);
  }
  
  /* Hide hamburger on desktop */
  .gnb .ham { display: none !important; }
  
  /* Desktop submenu */
  .subMenu { background: #fff; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
  .subMenu .box { width: 1000px; margin: 0 auto; }
  .subMenu .box > ul {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0;
    overflow: visible !important;
  }
  .subMenu .box > ul > li {
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    flex: 0 0 auto !important;
    text-align: center !important;
  }
  .subMenu .box > ul > li + li {
    border-left: 1px solid #e5e5e5 !important;
  }
  .subMenu .box > ul > li > a {
    display: block !important;
    padding: 18px 10px !important;
  }
  .subMenu .box5 li { width: 20% !important; }
  .subMenu .box4 li { width: 25% !important; }
  .subMenu .box3 li { width: 33.3333% !important; }
  .subMenu .box2 li { width: 50% !important; }
}

/* ===========================
   TABLET RESPONSIVE (<=1023px)
   =========================== */
@media (max-width:1023px) {
  /* Hide desktop menu, show hamburger */
  .gnb .menu { display: none !important; }
  #language-switcher { display: none !important; }
  
  .gnb .ham {
    display: block !important;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 101;
    cursor: pointer;
  }
  
  .gnb .ham a {
    display: block;
    width: 44px;
    height: 44px;
  }
  
  .gnb .ham img {
    width: 24px;
    height: 24px;
  }
  
  /* Tablet adjustments */
  .footer .menu { width: auto; padding: 25px 10px 15px 10px; }
  .footer .copy { width: auto; padding: 20px 10px 30px 10px; }
  
  .mainGo { width: auto; }
  .mainGo .box li { width: 24.22%; height: 300px; margin-right: 1%; }
  

  
  .subVisual { height: 320px; margin-top: 150px; }
  
  /* Mobile submenu */
  .subMenu { height: auto; }
  .subMenu .box { width: auto; }
  .subMenu .box > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 8px 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .subMenu .box > ul::-webkit-scrollbar { display: none; }
  .subMenu .box > ul > li {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .subMenu .box > ul > li > a {
    display: block !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
    line-height: 1.2;
  }

@media (max-width:1023px){
  html{
    scroll-padding-top: calc(var(--gnb-h) + var(--subMenu-h, 48px));
  }
  /* если используешь <a href="#id"> к секциям с id */
  [id]{
    scroll-margin-top: calc(var(--gnb-h) + var(--subMenu-h, 48px));
  }
}

/* Базовое поведение subMenu на мобайле: можно оставить sticky как “запасной план” */
@media (max-width:1023px){
  .subMenu{
    position: sticky;
    top: var(--gnb-h);
    z-index: 11900;
    background:#fff;
    box-shadow: 0 1px 0 #e5e5e5;
  }
}

/* Когда мы принудительно “приклеиваем” меню — становится fixed на всю прокрутку */
@media (max-width:1023px){
  .subMenu.is-stuck{
    position: fixed;
    top: var(--gnb-h);
    left: 0; right: 0;
    width: 100%;
    transform: translateZ(0); /* от дрожания в iOS */
  }
  /* Заполнитель, чтобы страница не “прыгала”, когда subMenu становится fixed */
  .subMenu-holder{
    display: none;
  }
  .subMenu.is-stuck + .subMenu-holder{
    display: block;
    height: var(--subMenu-h, 48px); /* реальную высоту установим из JS */
  }
}

  /* ширины/отступы уже у вас есть, но на всякий случай: */
  .subMenu .wrap{ width:auto; padding-left:16px; padding-right:16px; }
}
  
  .contbox { width: auto; }
  .cont_concept { width: auto; }
  .cont_rev { width: auto; }
  .cont_revbox { width: auto; }
  .cont_faq { width: auto; }
  .story { width: auto; }
  .map { width: auto; }

/* ===========================
   MOBILE RESPONSIVE (<=767px)
   =========================== */
@media (max-width:767px) {
  /* Fixed header */
  .gnb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff00;
    height: 64px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  body {
    padding-top: 64px;
  }
  
@media (max-width:767px){
  .mainLast .logo,
  .contbox .logo,
  .subVisual .logo,
  .mainVisual .logo {
    margin:50px 0 25px;
  }

  /* Хедер и мобильное меню — без внешних отступов */
  .gnb .logo,
  .momenu-header .logo {
    margin:0 !important;
  }
}
  .gnb .logo img {
    width: 90px;
  }

  @media (max-width:767px){
  /* отступы только для логотипов в контенте */
  .mainLast .logo,
  .contbox .logo,
  .subVisual .logo,
  .mainVisual .logo { margin:50px 0 25px; }

  /* в шапке и в мобильном меню — без внешних отступов */
  .gnb .logo,
  .momenu-header .logo { margin:0 !important; }
}

  
  .gnb .ham {
    display: block !important;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 101;
  }
  
  .gnb .ham a {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  
  .gnb .ham img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
  
  /* Mobile footer */
  .footer { margin-top: 0; }
  .footer .menu { padding: 25px 10px 15px 10px; }
  .footer .menu a { font-size: 12px; padding-right: 5px; margin-right: 5px; }
  .footer .copy { padding: 15px 10px 25px 10px; }
  
  /* Mobile main visual */
  .mainVisual { height: 550px; }
  .mainVisual .text { margin-top: -80px; }
  .mainVisual .text p { font-size: 12px; }
  .mainVisual .text h1 { font-size: 30px; padding: 15px 0 10px 0; line-height: 30px; }
  .mainVisual .text h2 { font-size: 18px; padding-bottom: 20px; }
  
  /* Mobile main sections */
  .mainGo { margin: 0 1%; }
  .mainGo h2 { font-size: 12px; padding-top: 50px; }
  .mainGo h1 { font-size: 25px; padding-bottom: 40px; }
  .mainGo .box li { width: 49.5%; height: 250px; margin-right: 1%; margin-bottom: 1%; }
  .mainGo .box li:nth-child(even) { margin-right: 0px; }
  
/* MAINLINK — mobile-first */
.mainLink{
  width:auto;
  margin:0 auto;
  padding:0 50px 50px;           /* компактные боковые поля */
}
.mainLink a{
  display:block;
  margin:0;                      /* убираем большие интервалы */
  border:0;
  background:transparent;
  height:auto;                   /* никакой фикс. высоты */
}
.mainLink a + a,
.mainLink a:first-child{
  border-top:1px dashed #e5e5e5; /* разделители как на референсе */
}
.mainLink a .line{
  display:block;
  width:100%;
  height:auto;
  padding:18px 0;                /* меньше воздуха */
}
.mainLink a .line .thm{ display:none; } /* скрываем картинку на мобайле */
.mainLink a .line .tlt{
  display:block;
  width:100%;
  padding:0;
}
.mainLink a .line h3{
  font-size:22px;
  line-height:1.3;
  margin:6px 0 4px;
}
.mainLink a .line p{
  color:#777;
  font-size:14px;
  padding-top:4px;
}
/* факультативно: маленький серый лейбл над заголовком */
.mainLink a .line .tlt .label,
.mainLink a .line .tlt small:first-child{
  display:block;
  font-size:11px;
  letter-spacing:.12em;
  color:#b5b5b5;
  text-transform:uppercase;
  margin-bottom:6px;
}

  
  .mainPhoto { height: auto !important; clear: both; margin-top: 20px; }
  
/* MOBILE-FIRST: .mainLast по умолчанию */
.mainLast{
  width:auto;
  margin:0 auto;
  padding:32px 16px 48px;
  background:#fff;
  border-top:1px solid #eaeaea;
  text-align:center;
}
.mainLast img,
.mainLast .logo{
  display:block;
  margin:0 auto 12px;
  max-width:140px;
  height:auto;
}
.mainLast .brand{
  display:block;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:#111;
  margin:2px 0 10px;
}
.mainLast p,
.mainLast .desc{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:#666;
}

/* Десктоп */
@media (min-width:1024px){
  .mainLast{ width:1000px; padding:60px 0 80px; }
  .mainLast img, .mainLast .logo{ max-width:180px; }
  .mainLast p, .mainLast .desc{ font-size:18px; }
}

  
  /* Mobile sub visual */
  .subVisual {margin-top: 1px; }
  .subVisual p { letter-spacing: 1px; font-size: 12px; padding: 90px 0 0 0; }
  .subVisual h1 { font-size: 38px; padding: 0 10px; }
  
  /* Mobile submenu with horizontal scroll */
  .subMenu { height: auto; background: #fff; }
  .subMenu .box { height: auto; width: 100%; }
  .subMenu .box > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .subMenu .box > ul::-webkit-scrollbar { display: none; }
  .subMenu .box > ul > li {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    border: 0 !important;
  }
  .subMenu .box > ul > li > a {
    display: block !important;
    min-width: 100px;
    padding: 12px 10px !important;
    font-size: 12px;
    white-space: nowrap !important;
    background: #f7f7f7;
    border-radius: 8px;
  }
  .subMenu .box > ul > li > a:hover,
  .subMenu .box > ul > li > a.now {
    background-color: #efefef;
    font-weight: 700;
  }
  
  /* Content sections mobile */
  .cont_concept { margin: 50px 10px; }
  .cont_concept h1 { font-size: 14px; letter-spacing: 1px; }
  .cont_concept h2 { font-size: 22px; padding: 20px 0 10px 0; line-height: 28px; }
  .cont_concept p { font-size: 13px; }
  
  .contGray { padding: 50px 0; }
  .contWhite { padding: 50px 0; }
  .contbox { margin: 0 auto; }
  .contbox h1 { font-size: 14px; letter-spacing: 1px; margin-bottom: 30px; }
  .contbox .text { padding: 30px 0; font-size: 14px; }
  .contbox .text2 { padding: 0 0 30px 0; font-size: 16px; }
  .contbox .text3 { padding: 12px 0; font-size: 13px; }
  .contbox .photo { padding: 0 10px; }
  .contbox .photo li { width: 49%; margin-right: 2%; margin-bottom: 2%; }
  .contbox .photo li:nth-child(even) { margin-right: 0; }
  .contbox .conclear { clear: both; }
}

/* === MOBILE/TABLET OVERLAY MENU (<=1023px) — под твою разметку === */
@media (max-width:1023px){
  /* оверлей выше шапки */
  .gnb{ z-index:10000; }
  .momenu{
    position:fixed; inset:0;
    display:none;                          /* закрыто по умолчанию */
    z-index:12000;                          /* ВЫШЕ .gnb */
    background:rgba(0,0,0,.45);
    justify-content:flex-end; align-items:stretch;
  }
  .momenu.open{ display:flex !important; }

  /* правая панель — у тебя это .momenu-header и .line (оба — прямые дети .momenu) */


  /* внутренняя «шапка» панели */
.momenu-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--mm-head-h);
  background:#fff; border-bottom:1px solid #eee;
  display:flex; align-items:center;  /* было center */
  padding:0 16px;                                              
  z-index:13001;
}
.momenu-header .logo{ display:flex; align-items:center; }
.momenu-header .logo img{ height:50px; width:auto; display:block; }

/* крестик – справа */
.momenu .close{
  position:absolute; right:12px; /* было left */
  left:auto;
  top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.momenu .close img{ width:22px; height:22px; display:block; }

  .momenu .close{ display:inline-block; width:44px; height:44px; }
  .momenu .close img{ width:20px; height:20px; margin:12px; display:block; }

  /* список ссылок */
  .momenu .line{
    display:flex; flex-direction:column; gap:12px;
    padding:16px 14px 24px;
  }
  .momenu .line a{
    display:block; padding:12px 4px; font-size:16px; color:#111;
    border-bottom:1px solid #f1f1f1;
  }

  /* Центрируем текст в кнопке языка */
.momenu .line #language-switcher-mobile .dropbtn{
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;  /* центр по горизонтали */
  text-align:center !important;
  padding:12px 16px;       /* можешь менять отступы */
}


  /* language-switcher внутри меню */
  #language-switcher-mobile .dropbtn{ display:block; width:100%; padding:12px; text-align:left; }
  #language-switcher-mobile .dropdown-content{ box-shadow:none; background:#fff; }
  #language-switcher-mobile .dropdown-content a{ padding:10px 0; }
}


/* =============
   Accessibility improvements
   ============= */
.gnb a:focus-visible,
.subMenu a:focus-visible,
.momenu a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

@media (max-width:767px){
  .mainLast > .line,
  .mainLast .line{
    display:none !important;   /* скрыть */
  }
}

/* Блокируем скролл, когда меню открыто */
body.momenu-open { overflow: hidden; }

/* Меню поверх всего (выше .gnb) */
.momenu { z-index: 13000; }           /* .gnb у тебя ~12000 */
.momenu.open { display: block; }       /* или display:flex — в зависимости от твоей версии */

/* === Глобальный мобильный хедер (≤1023px) — как на wedding === */
@media (max-width:1023px){
  .gnb{
    position: fixed; top:0; left:0; right:0;
    height: var(--gnb-h, 63px);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 148px; background:#fff; z-index:12000;
    border-bottom:2px solid #eee;
    padding-bottom: 15px;
  }

  /* Логотип — без absolute/transform/margin */
  .gnb .logo{
    position: static !important;
    transform:none !important;
    margin:0 !important;
    line-height:0; display:flex; align-items:center;
  }
  .gnb .logo img{
    height:28px; width:auto; display:block;
  }

  /* Меню в шапке прячем — есть бургер */
  .gnb .menu{ display:none !important; }
  .gnb .ham{ display:block; }
}

@media (max-width:1023px){
  .gnb .logo img{ height:40px; } 
}

/* F&B gallery grid */
.contWhite .fnb ul{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  padding:0;
  margin:0;
}
.contWhite .fnb li{ list-style:none; }
.contWhite .fnb img{
  display:block;            /* убирает «щели» по базовой линии */
  width:100%;
  height:auto;
  border-radius:6px;        /* можно убрать, если не нужно скругление */
}

/* Планшет: 2 колонки */
@media (max-width:1023px){
  .contWhite .fnb ul{ grid-template-columns:repeat(2, 1fr); }
}

/* Мобайл: 1 колонка */
@media (max-width:767px){
  .contWhite .fnb ul{ grid-template-columns:1fr; }
}

/* F&B gallery grid */
.contGray .fnb ul{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  padding:0;
  margin:0;
}
.contGray .fnb li{ list-style:none; }
.contGray .fnb img{
  display:block;            /* убирает «щели» по базовой линии */
  width:100%;
  height:auto;
  border-radius:6px;        /* можно убрать, если не нужно скругление */
}

/* Планшет: 2 колонки */
@media (max-width:1023px){
  .contGray .fnb ul{ grid-template-columns:repeat(2, 1fr); }
}

/* Мобайл: 1 колонка */
@media (max-width:767px){
  .contGray .fnb ul{ grid-template-columns:1fr; }
}

/* === RESERVATION: мобильная типографика и карточка контактов === */
@media (max-width:767px){
  /* комфортные отступы секций и контейнера */
  .contWhite, .contGray{ padding: 36px 0; }
  .contbox{ width:auto; margin:0 16px; }

  /* заголовки блока reservation/faq */
  #section1 .cont_rev h1.res,
  #section2 .contbox h1{
    font-size:18px; letter-spacing:1.6px; text-align:center; margin-bottom:12px;
  }
  #section1 .cont_rev p,
  #section1 .cont_rev span{ display:block; text-align:center; line-height:1.6; }

  /* карточка контактов из твоей разметки:
     .cont_revbox > ul > li > img + p...  */
  .cont_revbox ul{ list-style:none; margin:0; padding:0; }
  .cont_revbox li{
    background:#fff; border:1px solid #eee; border-radius:12px;
    padding:16px; text-align:center; display:flex; flex-direction:column; align-items:center;
    gap:6px;
  }
  .cont_revbox li > img{ width:86px; height:auto; display:block; margin:4px 0 10px; }
  .cont_revbox li p{ margin:4px 0; font-size:14px; line-height:1.55; color:#333; }
  .cont_revbox li p span{ color:#666; margin-right:6px; }
  .cont_revbox li p b{ font-weight:700; color:#111; }

  /* FAQ-таблица — читабельные отступы и разделители */
  .cont_faq{
    width:100%;
    border-collapse:collapse;
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;
  }

  /* базовая типографика */
  .cont_faq th{
    width:36px; text-align:center; vertical-align:top;
    color:#999; font-weight:700; padding:14px 8px;
  }
  .cont_faq td{ padding:14px 12px; font-size:14px; line-height:1.6; }

  /* --- раскраска строк --- */
  /* если у тебя Q/A идут по очереди (Q затем A), просто чередуем: */
  .cont_faq tbody tr:nth-child(odd)  th,
  .cont_faq tbody tr:nth-child(odd)  td{ background:#f6f6f6; } /* Q — серый */
  .cont_faq tbody tr:nth-child(even) th,
  .cont_faq tbody tr:nth-child(even) td{ background:#fff;    } /* A — белый */

  /* опционально: если где-то есть классы .q / .a — они приоритетнее */
  .cont_faq tr.q th, .cont_faq tr.q td{ background:#f6f6f6 !important; }
  .cont_faq tr.a th, .cont_faq tr.a td{ background:#fff    !important; }

  /* разделители между парами */
  .cont_faq tbody tr + tr{ border-top:1px solid #efefef; }

  /* мобайл — чуть компактнее */
  @media (max-width:767px){
    .cont_faq th{ width:32px; padding:12px 6px; }
    .cont_faq td{ padding:12px 10px; font-size:14px; }
  }
}

/* === PRICING / REFUND таблицы из reservation.php — аккуратный вид на всех экранах === */
.cont_fees{
  width:90%; max-width:1000px; border-collapse:collapse; margin:20px auto;
  border:2px solid #e0e0e0; text-align:left;
}
.cont_fees th, .cont_fees td{
  padding:10px 16px; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0;
  font-size:14px; line-height:1.5;
}
.cont_fees th{ background:#f5f5f5; font-weight:700; text-align:center; }
.cont_fees th:first-child, .cont_fees td:first-child{ border-left:1px solid #e0e0e0; }
.cont_fees th:last-child, .cont_fees td:last-child{ border-right:none; }

/* BRAND: STORY image responsive */
@media (max-width:767px){
  /* контейнер */
  .page-brand #section1.contWhite .story{
    width:auto;
    margin:0 16px;          /* поля по краям экрана */
  }

  /* само изображение(я) внутри story */
  .page-brand #section1.contWhite .story img{
    display:block;
    width:100% !important;  /* растягиваем ровно на ширину контейнера */
    height:auto !important; /* сохраняем пропорции */
    max-width:100%;
    border-radius:6px;      /* если нужен мягкий край; можно убрать */
  }

  /* на всякий случай: отключить возможные флоаты/фикс-ширины у обёрток */
  .page-brand #section1.contWhite .story img,
  .page-brand #section1.contWhite .story > *{
    float:none;
    box-sizing:border-box;
    text-align: center;
  }
}

/* планшет — чуть шире отступы, если надо */
@media (min-width:768px) and (max-width:1023px){
  .page-brand #section1.contWhite .story{ margin:0 20px; }
}

/* для фоновой картинки */
.page-brand #section1.contWhite .story .bg{
  background-size:cover;
  background-position:center;
  width:100%;
  aspect-ratio: 16 / 9;   /* или нужная пропорция */
}

.story .h1{
  font-size:24px;
  font-weight:700;
  text-align:center;
  margin:16px 0 8px;
}

/* === BRAND / section1 / STORY === */
.page-brand #section1.contWhite{ background:#f6f6f6; padding:24px 0; }
.page-brand #section1.contWhite .story{
  width:auto; max-width:1000px; margin:0 auto;
  background:#fff; border:1px solid #ececec; border-radius:10px;
  padding:16px; box-shadow:0 1px 0 rgba(0,0,0,.02);
  text-align:center;
}

/* H1: STORY */
.page-brand #section1.contWhite .story > h1{
  font-size:14px; letter-spacing:2px; font-weight:800;
  text-transform:uppercase;
  display:inline-block;
  border-bottom:2px solid #111;
  padding-bottom:4px; margin:4px 0 14px;
}

/* Фото */
.page-brand #section1.contWhite .story > img{
  display:block; width:100% !important; height:auto !important;
  max-width:100%; border-radius:6px;
  margin:0 auto 16px; 
}

/* Текстовый блок под фото */
.page-brand #section1.contWhite .story .text{ max-width:760px; margin:0 auto; }
.page-brand #section1.contWhite .story .text h2{
  font-family:'Nanum Myeongjo','Noto Serif KR',serif;
  font-weight:600; font-size:22px; line-height:1.4; color:#222;
  margin:8px 0 12px; text-align:center;
}
.page-brand #section1.contWhite .story .text p{
  font-size:14px; line-height:1.8; color:#333;
  text-align:left; margin:0;
}

/* На мобайле убираем ручные <br>, чтобы текст переносился естественно */
@media (max-width:767px){
  .page-brand #section1.contWhite .story{ margin:0 16px; padding:16px; }
  .page-brand #section1.contWhite .story .text p br{ display:none; }
}

/* Планшет */
@media (min-width:768px) and (max-width:1023px){
  .page-brand #section1.contWhite{ padding:32px 0; }
  .page-brand #section1.contWhite .story{ margin:0 20px; padding:18px; }
  .page-brand #section1.contWhite .story .text h2{ font-size:26px; }
}

/* Десктоп */
@media (min-width:1024px){
  .page-brand #section1.contWhite{ padding:48px 0; }
  .page-brand #section1.contWhite .story{ padding:22px; }
  .page-brand #section1.contWhite .story .text h2{ font-size:32px; }
  .page-brand #section1.contWhite .story .text p br{ display:initial; } /* если нужны <br> на десктопе */
}

/* BRAND: делаем абзацы из <br><br> внутри .story .text */
.page-brand #section1.contWhite .story .text p{
  padding:14px 16px;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:12px;
  font-size:15px;
  line-height:1.85;
  color:#333;
  text-align:center;
  letter-spacing:.1px;
}

/* скрыть одиночные <br> */
.page-brand #section1.contWhite .story .text p br{ display:none; }

/* а второй из пары <br><br> показать как межабзацный отступ */
.page-brand #section1.contWhite .story .text p br + br{
  display:block;
  content:"";
  margin:14px 0;       /* расстояние между абзацами */
}

/* === BRAND / section2 / MAP === */
/* BRAND: STORY image responsive */
@media (max-width:767px){
  /* контейнер */
  .page-brand #section2.contGray .map{
    width:auto;
    margin:0 16px;          /* поля по краям экрана */
  }

  /* само изображение(я) внутри story */
  .page-brand #section2.contGray .map img{
    display:block;
    width:100% !important;  /* растягиваем ровно на ширину контейнера */
    height:auto !important; /* сохраняем пропорции */
    max-width:100%;
    border-radius:6px;      /* если нужен мягкий край; можно убрать */
  }

  /* на всякий случай: отключить возможные флоаты/фикс-ширины у обёрток */
  .page-brand #section2.contGray .map img,
  .page-brand #section2.contGray .map > *{
    float:none;
    box-sizing:border-box;
    text-align: center;
  }
}

/* планшет — чуть шире отступы, если надо */
@media (min-width:768px) and (max-width:1023px){
  .page-brand #section2.contGray .map{ margin:0 20px; }
}

/* для фоновой картинки */
.page-brand #section2.contGray .map .bg{
  background-size:cover;
  background-position:center;
  width:100%;
  aspect-ratio: 16 / 9;   /* или нужная пропорция */
}

.map .h1{
  font-size:24px;
  font-weight:700;
  text-align:center;
  margin:16px 0 8px;
}

/* === BRAND / section2 / MAP === */
.page-brand #section2.contGray{ background:#f6f6f6; padding:24px 0; }
.page-brand #section2.contGray .map{
  width:auto; max-width:1000px; margin:0 auto;
  background:#fff; border:1px solid #ececec; border-radius:10px;
  padding:16px; box-shadow:0 1px 0 rgba(0,0,0,.02);
  text-align:center;
}

/* H1: MAP */
.page-brand #section2.contGray .map > h1{
  font-size:14px; letter-spacing:2px; font-weight:800;
  text-transform:uppercase;
  display:inline-block;
  border-bottom:2px solid #111;
  padding-bottom:4px; margin:4px 0 14px;
}

/* Фото */
.page-brand #section2.contGray .map > img{
  display:block; width:100% !important; height:auto !important;
  max-width:100%; border-radius:6px;
  margin:0 auto 16px; 
}

/* Текстовый блок под фото */
.page-brand #section1.contGray .map .text{ max-width:760px; margin:0 auto; }
.page-brand #section1.contGray .map .text h2{
  font-family:'Nanum Myeongjo','Noto Serif KR',serif;
  font-weight:600; font-size:22px; line-height:1.4; color:#222;
  margin:8px 0 12px; text-align:center;
}
.page-brand #section2.contGray .map .text p{
  font-size:14px; line-height:1.8; color:#333;
  text-align:left; margin:0;
}

/* На мобайле убираем ручные <br>, чтобы текст переносился естественно */
@media (max-width:767px){
  .page-brand #section2.contGray .map{ margin:0 16px; padding:16px; }
  .page-brand #section2.contGray .map .text p br{ display:none; }
}

/* Планшет */
@media (min-width:768px) and (max-width:1023px){
  .page-brand #section2.contGray{ padding:32px 0; }
  .page-brand #section2.contGray .map{ margin:0 20px; padding:18px; }
  .page-brand #section2.contGray .map .text h2{ font-size:26px; }
}

/* Десктоп */
@media (min-width:1024px){
  .page-brand #section2.contGray{ padding:48px 0; }
  .page-brand #section2.contGray .map{ padding:22px; }
  .page-brand #section2.contGray .map .text h2{ font-size:32px; }
  .page-brand #section2.contGray .map .text p br{ display:initial; } /* если нужны <br> на десктопе */
}

.subMenu .box .box2{
  display: none;
  padding-right: 25px !important;
}

/* 1) Универсальная высота шапки */
:root{ --gnb-h:64px; }                 /* подгони под реальную моб.высоту */
@media (min-width:1024px){
  :root{ --gnb-h:76px; }               /* подгони под десктоп при нужде */
}

/* 2) Липкий offset для всех таб-баров */
/* обычное меню-якорей */
.subMenu{ position: sticky; top: var(--gnb-h); z-index:11000; }

/* дополнительные полосы вкладок, как на скрине (box4) */
.box.box4{
  position: sticky;
  top: var(--gnb-h);
  z-index: 11000;
  background: #fff;                    /* чтобы не просвечивался контент */
  margin-top: 0 !important;            /* на случай старых отрицательных отступов */
  border-bottom: 1px solid #eee;       /* опционально, визуальная линия */
}

/* 3) Не давим sticky родителями (Safari/iOS баги) */
.subMenu, .box.box4{ transform:none !important; }
.subMenu, .box.box4{ will-change:auto; }
.subMenu, .box.box4,
.subMenu-parent, .contWhite, .wrap, .subVisual{
  overflow:visible !important;
}

/* 4) Якоря не прячутся под шапкой */
[id]{ scroll-margin-top: calc(var(--gnb-h) + 8px); }

/* ---------- ONLY MOBILE: keep sticky ---------- */
@media (max-width:1023px){
  :root{ --gnb-h:64px; }              /* при желании подгони реальную высоту шапки */
  .subMenu{ position: sticky; top: var(--gnb-h); z-index:11000; }
  /* если используешь дополнительные таб-бары */
  .box.box2, .box.box3, .box.box4, .box.box5{
    position: sticky; top: var(--gnb-h); z-index:11000;
  }
  /* якоря не прячутся под шапку */
  [id]{ scroll-margin-top: calc(var(--gnb-h) + 8px); }
}

/* ---------- DESKTOP: no sticky, no float ---------- */
@media (min-width:1024px){
  /* субменю и все его вариации — обычный поток */
  .subMenu,
  .subMenu .box,
  .box.box2, .box.box3, .box.box4, .box.box5,
  .subMenu_fixed,                 /* на всякий случай, если скрипт добавляет */
  .subMenu.is-stuck{
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
  }
  /* иногда оставался "спейсер" от скрипта */
  .subMenu-holder{ height: auto !important; }
}

/* DESKTOP ONLY: заголовок в section2 сверху и жирный */
@media (min-width:1024px){
  #section1 .contbox h1{
    position: static;   /* убираем абсолюты/смещения */
    float: none;
    display: block;
    width: 100%;
    margin: 30px auto 20px;        /* сверху/снизу отступы */
    padding: 0;
    text-align: center;
    font-weight: 700;               /* жирный */
    text-transform: uppercase;      /* как в оригинале */
    letter-spacing: .12em;          /* аккуратный трекинг */
  }

  /* чтобы картинка шла сразу под заголовком */
  #section1 .contbox img.big{
    display: block;
    margin: 0 auto;
  }
}

/* DESKTOP: сетка 2×2 для #section2 .contbox .photo */
@media (min-width:1024px){
  /* контейнер секции по центру (если нужно, подхватится текущей шириной) */
  #section1 .contbox{
    max-width: 1200px;         
    margin: 0 auto;
  }

  /* сетка из двух колонок, без float/inline */
  #section1 .contbox .photo ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 24px;                 /* интервал между картинками; можно 30px */
    padding: 0;
    margin: 24px auto 0;
    list-style: none;
  }

  #section1 .contbox .photo li{
    margin: 0;
    padding: 0;
    float: none !important;    /* гасим старые float'ы, если были */
    display: block;
    width: 100%;
  }

  #section1 .contbox .photo li img{
    display: block;
    width: 100%;
    height: auto;
  }
}

/* DESKTOP: короткая линия под заголовком в секции 2 */
@media (min-width:1024px){
  /* убираем длинную линию */
  #section1 { border-top: none !important; }            /* на случай если её рисует секция */
  #section1 .contbox h1{
    border: 0 !important;                                /* и если рисовал сам h1 */
    position: relative;
    padding-bottom: 12px;
  }
  #section1 .contbox h1::after{
    content: "";
    display: block;
    width: 120px;                                        /* длина линии */
    height: 2px;
    background: #111;
    margin: 10px auto 0;                                 /* по центру */
  }
}

/* DESKTOP ONLY: заголовок в section2 сверху и жирный */
@media (min-width:1024px){
  #section2 .contbox h1{
    position: static !important;   /* убираем абсолюты/смещения */
    float: none !important;
    display: block;
    width: 100%;
    margin: 30px auto 20px;        /* сверху/снизу отступы */
    padding: 0;
    text-align: center;
    font-weight: 700;               /* жирный */
    text-transform: uppercase;      /* как в оригинале */
    letter-spacing: .12em;          /* аккуратный трекинг */
  }

  /* чтобы картинка шла сразу под заголовком */
  #section2 .contbox img.big{
    display: block;
    margin: 0 auto;
  }
}

/* DESKTOP: короткая линия под заголовком в секции 2 */
@media (min-width:1024px){
  /* убираем длинную линию */
  #section2 { border-top: none !important; }            /* на случай если её рисует секция */
  #section2 .contbox h1{
    border: 0 !important;                                /* и если рисовал сам h1 */
    position: relative;
    padding-bottom: 12px;
  }
  #section2 .contbox h1::after{
    content: "";
    display: block;
    width: 120px;                                        /* длина линии */
    height: 2px;
    background: #111;
    margin: 10px auto 0;                                 /* по центру */
  }
}

/* DESKTOP: сетка 2×2 для #section2 .contbox .photo */
@media (min-width:1024px){
  /* контейнер секции по центру (если нужно, подхватится текущей шириной) */
  #section2 .contbox{
    max-width: 1200px;         /* подгони при желании под свой макс */
    margin: 0 auto;
  }

  /* сетка из двух колонок, без float/inline */
  #section2 .contbox .photo ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 24px;                 /* интервал между картинками; можно 30px */
    padding: 0;
    margin: 24px auto 0;
    list-style: none;
  }

  #section2 .contbox .photo li{
    margin: 0;
    padding: 0;
    float: none !important;    /* гасим старые float'ы, если были */
    display: block;
    width: 100%;
  }

  #section2 .contbox .photo li img{
    display: block;
    width: 100%;
    height: auto;
  }
}

/* DESKTOP ONLY: заголовок в section2 сверху и жирный */
@media (min-width:1024px){
  #section3 .contbox h1{
    position: static !important;   /* убираем абсолюты/смещения */
    float: none !important;
    display: block;
    width: 100%;
    margin: 30px auto 20px;        /* сверху/снизу отступы */
    padding: 0;
    text-align: center;
    font-weight: 700;               /* жирный */
    text-transform: uppercase;      /* как в оригинале */
    letter-spacing: .12em;          /* аккуратный трекинг */
  }

  /* чтобы картинка шла сразу под заголовком */
  #section3 .contbox img.big{
    display: block;
    margin: 0 auto;
  }
}

/* DESKTOP: короткая линия под заголовком в секции 2 */
@media (min-width:1024px){
  /* убираем длинную линию */
  #section3 { border-top: none !important; }            /* на случай если её рисует секция */
  #section3 .contbox h1{
    border: 0 !important;                                /* и если рисовал сам h1 */
    position: relative;
    padding-bottom: 12px;
  }
  #section3 .contbox h1::after{
    content: "";
    display: block;
    width: 120px;                                        /* длина линии */
    height: 2px;
    background: #111;
    margin: 10px auto 0;                                 /* по центру */
  }
}

/* DESKTOP: сетка 2×2 для #section2 .contbox .photo */
@media (min-width:1024px){
  /* контейнер секции по центру (если нужно, подхватится текущей шириной) */
  #section3 .contbox{
    max-width: 1200px;         /* подгони при желании под свой макс */
    margin: 0 auto;
  }

  /* сетка из двух колонок, без float/inline */
  #section3 .contbox .photo ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 24px;                 /* интервал между картинками; можно 30px */
    padding: 0;
    margin: 24px auto 0;
    list-style: none;
  }

  #section3 .contbox .photo li{
    margin: 0;
    padding: 0;
    float: none !important;    /* гасим старые float'ы, если были */
    display: block;
    width: 100%;
  }

  #section3 .contbox .photo li img{
    display: block;
    width: 100%;
    height: auto;
  }
}



/* DESKTOP ONLY: заголовок в section2 сверху и жирный */
@media (min-width:1024px){
  #section4 .contbox h1{
    position: static;   /* убираем абсолюты/смещения */
    float: none;
    display: block;
    width: 100%;
    margin: 30px auto 20px;        /* сверху/снизу отступы */
    padding: 0;
    text-align: center;
    font-weight: 700;               /* жирный */
    text-transform: uppercase;      /* как в оригинале */
    letter-spacing: .12em;          /* аккуратный трекинг */
  }

  /* чтобы картинка шла сразу под заголовком */
  #section4 .contbox img.big{
    display: block;
    margin: 0 auto;
  }
}

/* DESKTOP: сетка 2×2 для #section2 .contbox .photo */
@media (min-width:1024px){
  /* контейнер секции по центру (если нужно, подхватится текущей шириной) */
  #section4 .contbox{
    max-width: 1200px;         /* подгони при желании под свой макс */
    margin: 0 auto;
  }

  /* сетка из двух колонок, без float/inline */
  #section4 .contbox .photo ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 24px;                 /* интервал между картинками; можно 30px */
    padding: 0;
    margin: 24px auto 0;
    list-style: none;
  }

  #section4 .contbox .photo li{
    margin: 0;
    padding: 0;
    float: none !important;    /* гасим старые float'ы, если были */
    display: block;
    width: 100%;
  }

  #section4 .contbox .photo li img{
    display: block;
    width: 100%;
    height: auto;
  }
}

/* DESKTOP: короткая линия под заголовком в секции 2 */
@media (min-width:1024px){
  /* убираем длинную линию */
  #section4 { border-top: none !important; }            /* на случай если её рисует секция */
  #section4 .contbox h1{
    border: 0 !important;                                /* и если рисовал сам h1 */
    position: relative;
    padding-bottom: 12px;
  }
  #section4 .contbox h1::after{
    content: "";
    display: block;
    width: 120px;                                        /* длина линии */
    height: 2px;
    background: #111;
    margin: 10px auto 0;                                 /* по центру */
  }
}



/* DESKTOP ONLY: заголовок в section2 сверху и жирный */
@media (min-width:1024px){
  #section5 .contbox h1{
    position: static !important;   /* убираем абсолюты/смещения */
    float: none !important;
    display: block;
    width: 100%;
    margin: 30px auto 20px;        /* сверху/снизу отступы */
    padding: 0;
    text-align: center;
    font-weight: 700;               /* жирный */
    text-transform: uppercase;      /* как в оригинале */
    letter-spacing: .12em;          /* аккуратный трекинг */
  }

  /* чтобы картинка шла сразу под заголовком */
  #section5 .contbox img.big{
    display: block;
    margin: 0 auto;
  }
}

/* DESKTOP: короткая линия под заголовком в секции 2 */
@media (min-width:1024px){
  /* убираем длинную линию */
  #section5 { border-top: none !important; }            /* на случай если её рисует секция */
  #section5 .contbox h1{
    border: 0 !important;                                /* и если рисовал сам h1 */
    position: relative;
    padding-bottom: 12px;
  }
  #section5 .contbox h1::after{
    content: "";
    display: block;
    width: 120px;                                        /* длина линии */
    height: 2px;
    background: #111;
    margin: 10px auto 0;                                 /* по центру */
  }
}
/* DESKTOP: сетка 2×2 для #section2 .contbox .photo */
@media (min-width:1024px){
  /* контейнер секции по центру (если нужно, подхватится текущей шириной) */
  #section5 .contbox{
    max-width: 1200px;         /* подгони при желании под свой макс */
    margin: 0 auto;
  }

  /* сетка из двух колонок, без float/inline */
  #section5 .contbox .photo ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 24px;                 /* интервал между картинками; можно 30px */
    padding: 0;
    margin: 24px auto 0;
    list-style: none;
  }

  #section5 .contbox .photo li{
    margin: 0;
    padding: 0;
    float: none !important;    /* гасим старые float'ы, если были */
    display: block;
    width: 100%;
  }

  #section5 .contbox .photo li img{
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ==== DESKTOP: full-width header, inner content centered ==== */
@media (min-width: 1024px){
  /* растягиваем фон шапки на всю ширину окна */
  .gnb{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    /* «контейнер» 1100px за счёт внутренних отступов,
       чтобы центрировать содержимое без изменения разметки */
    padding-left:  max(24px, calc((100% - 1100px)/2));
    padding-right: max(24px, calc((100% - 1100px)/2));
    box-sizing: border-box;
  }

  /* не даём пунктам меню ломаться при большой ширине */
  .gnb .menu{ white-space: nowrap; }
}

/* ====== MOBILE ТОЛЬКО ДЛЯ СТРАНИЦЫ WEDDING ====== */
html.is-mobile body.page-wedding #section1 .contbox .photo ul,
html.is-mobile body.page-wedding #section2 .contbox .photo ul,
html.is-mobile body.page-wedding #section3 .contbox .photo ul,
html.is-mobile body.page-wedding #section4 .contbox .photo ul,
html.is-mobile body.page-wedding #section5 .contbox .photo ul{
  display:block;         /* превью идут столбиком */
  padding:0;
  margin:16px 0 0;
}

html.is-mobile body.page-wedding .contbox .photo ul li{
  list-style:none;
  width:100% !important; /* каждое превью на всю ширину */
  margin:14px 0 !important;
}

html.is-mobile body.page-wedding .contbox .photo ul li img{
  display:block;
  width:100% !important;
  height:auto !important;
  border-radius:6px;     /* по вкусу */
}

/* большой кадр тоже адаптивным — но только на мобайле */
html.is-mobile body.page-wedding .contbox img.big{
  display:block;
  width:100% !important;
  height:auto !important;
}

/* дополнительный зазор под блоком с описанием (по желанию) */
html.is-mobile body.page-wedding #section1 .contbox .text,
html.is-mobile body.page-wedding #section2 .contbox .text,
html.is-mobile body.page-wedding #section3 .contbox .text,
html.is-mobile body.page-wedding #section4 .contbox .text,
html.is-mobile body.page-wedding #section5 .contbox .text{
  margin:18px 0 4px;
}

/* ===== Только МОБАЙЛ для страницы VENUE ===== */
html.is-mobile body.page-venue #section2 .contbox .photo ul,
html.is-mobile body.page-venue #section3 .contbox .photo ul,
html.is-mobile body.page-venue #section4 .contbox .photo ul,
html.is-mobile body.page-venue #section5 .contbox .photo ul{
  display:block;
  padding:0;
  margin:16px 0 0;
}

html.is-mobile body.page-venue .contbox .photo ul li{
  list-style:none;
  width:100% !important;       /* превью на всю ширину */
  margin:14px 0 !important;
}

html.is-mobile body.page-venue .contbox .photo ul li img{
  display:block;
  width:100% !important;
  height:auto !important;
  border-radius:6px;            /* опционально */
}

/* большой кадр тоже резиновый */
html.is-mobile body.page-venue .contbox img.big{
  display:block;
  width:100% !important;
  height:auto !important;
}

/* чуть расстояния под текстом, если есть */
html.is-mobile body.page-venue #section2 .contbox .text,
html.is-mobile body.page-venue #section3 .contbox .text,
html.is-mobile body.page-venue #section4 .contbox .text,
html.is-mobile body.page-venue #section5 .contbox .text{
  margin:18px 0 4px;
}

/*Размеры контейнера карты*/
.map_kakao{
  width:100%;
  height:360px;       /* мобайл */
  border-radius:8px;
  overflow:hidden;
}

@media (min-width:1024px){
  .map_kakao{ height:480px; } /* десктоп */
}

/* =========================
   RESERVATION — ТОЛЬКО ДЕСКТОП
   ========================= */
@media (min-width:1024px){

  /* --- SECTION 1: центрируем контейнер и контент --- */
  /* сам контейнер секции по центру */
  body.page-reservation #section1.contWhite,
  #section1.contWhite{
    /* если у секции был странный выравнивающий стиль — обнулим */
    text-align: center;
  }

  /* основной бокс по центру фикс-шириной */
  body.page-reservation #section1.contWhite .contbox,
  #section1.contWhite .contbox{
    width: 1000px;           /* подгони при желании */
    max-width: 100%;
    margin: 0 auto;          /* центрируем */
    float: none;             /* если раньше было float */
  }

  /* заголовки сверху, по центру */
  body.page-reservation #section1.contWhite .contbox h1,
  body.page-reservation #section1.contWhite .contbox h2{
    display:block;
    text-align:center;
    margin: 28px 0 16px;
    font-weight:700;
  }

  /* большие картинки в секции — по центру */
  body.page-reservation #section1.contWhite .contbox img,
  body.page-reservation #section1.contWhite .contbox .big{
    display:block;
    margin: 0 auto 18px;     /* центр и отступ снизу */
    height:auto;
    max-width:100%;
  }

  /* текстовые блоки — аккуратно, без прилипания к левому краю */
  body.page-reservation #section1.contWhite .contbox p,
  body.page-reservation #section1.contWhite .contbox .text{
    margin: 10px auto 0;
    max-width: 760px;        /* комфортная ширина строки */
    line-height: 1.7;
    color:#333;
  }

  /* на всякий — гасим возможные старые float-ы рядом */
  body.page-reservation #section1.contWhite .contbox > *{
    float:none;
  }

  /* --- SECTION .contGray: FAQ — Q серые, A белые --- */
  /* центр контейнера */
  body.page-reservation .contGray .contbox{
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* если FAQ таблицей (.cont_faq) */
  body.page-reservation .contGray .cont_faq{
    width:100%;
    border-collapse: collapse;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    margin: 18px 0 28px;
    table-layout: fixed;
  }
  body.page-reservation .contGray .cont_faq th,
  body.page-reservation .contGray .cont_faq td{
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.6;
    vertical-align: top;
    border-top: 1px solid #efefef;
  }
  /* предполагаем, что строки идут парами: Q(нечётная) / A(чётная) */
  body.page-reservation .contGray .cont_faq tbody tr:nth-child(odd)  th,
  body.page-reservation .contGray .cont_faq tbody tr:nth-child(odd)  td{ background:#f6f6f6; } /* Q — серый */
  body.page-reservation .contGray .cont_faq tbody tr:nth-child(even) th,
  body.page-reservation .contGray .cont_faq tbody tr:nth-child(even) td{ background:#ffffff; } /* A — белый */

  /* если FAQ не таблицей, а списком .faq > .item (fallback) */
  body.page-reservation .contGray .faq .item{
    padding:14px 16px;
    border-top:1px solid #efefef;
  }
  body.page-reservation .contGray .faq .item:nth-child(odd){ background:#f6f6f6; } /* Q */
  body.page-reservation .contGray .faq .item:nth-child(even){ background:#fff;    } /* A */

  /* доп. косметика для меток Q/A, если есть th узкой колонкой */
  body.page-reservation .contGray .cont_faq th{
    width: 40px; text-align:center; font-weight:700; color:#777;
  }
}

/* DESKTOP: скрыть иконку, оставить серый бокс с рамкой и центрировать текст */
.is-desktop .page-reservation #section1 .cont_revbox li > img{
  display: none !important;
}

.is-desktop .page-reservation #section1 .cont_revbox{
  max-width: 1020px;
  margin: 28px auto 72px;
  padding: 32px 38px;

  /* СЕРЫЙ БОКС + РАМКА */
  background: #f1f1f1;
  border: 1px solid #e5e5e5;   /* серая рамка */
  border-radius: 10px;

  /* один столбец и центрирование текста */
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  justify-items: center;
  text-align: center;
}

/* чтобы лишние обёртки не ломали сетку */
.is-desktop .page-reservation #section1 .cont_revbox ul,
.is-desktop .page-reservation #section1 .cont_revbox ul > li{
  display: contents !important;
}

/* строки текста — без лишних отступов и по центру */
.is-desktop .page-reservation #section1 .cont_revbox li > p{
  grid-column: 1 / -1;
  margin: 6px 0 !important;
  text-align: center;
}

/* ТОЛЬКО для main.php: белые пункты и кнопка Language при прозрачной шапке */
body.page-main .gnb.gnb--overlay:not(.is-scrolled) .menu a,
body.page-main .gnb.gnb--overlay:not(.is-scrolled) .dropdown .dropbtn {
  color: #ffffffaf !important;
}
body .page-main .gnb.gnb.gnb--overlay:not(.is-scrolled) .dropdown-content a :hover {
  color: #000000 !important; /* чтобы в выпадающем меню был тёмный текст */
}

/* Когда шапка проскроллена/на белом фоне — вернуть тёмный */
body.page-main .gnb.gnb--overlay.is-scrolled .menu a,
body.page-main .gnb.gnb--overlay.is-scrolled .dropdown .dropbtn {
  color: #222 !important;
}

/* по желанию — лёгкий hover для прозрачной шапки */
body.page-main .gnb.gnb--overlay:not(.is-scrolled) .menu a:hover,
body.page-main .gnb.gnb--overlay:not(.is-scrolled) .dropdown .dropbtn:hover {
  opacity: .85;
}

/* Desktop: hover в меню Language — серый → чёрный */
html.is-desktop #language-switcher .dropdown-content a {
  /* текущее (серое) состояние оставляем; можно задать свой оттенок: */
  color: #cfcfcf;                 /* опционально: серый */
  -webkit-text-fill-color: #cfcfcf; /* iOS Safari */
}

/* наведение/фокус: чёрный текст */
html.is-desktop #language-switcher .dropdown-content a:hover,
html.is-desktop #language-switcher .dropdown-content a:focus {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: rgba(255,255,255,.9); /* чтобы текст читался; можно убрать */
}

/* === DESKTOP FIX: ровные отступы и центр дропдауна под кнопкой === */
@media (min-width:1024px){

  /* 1) .menu — без «ручных» отступов, всё на равных долях */
  .gnb .menu{
    display:flex !important;
    align-items:center;
    justify-content:stretch;
    gap:0 !important;              /* было 50px — больше не нужно */
    width:1000px;
    margin:0 auto;
    padding-right:0 !important;    /* убираем запас под absolute-свитчер */
    overflow:visible;              /* чтобы дропдаун не обрезался */
    white-space:nowrap;
  }

  /* 2) каждый пункт и сам language-switcher занимают по 1 доле */
  .gnb .menu > a,
  .gnb .menu > #language-switcher{
    flex:1 1 0 !important;
    text-align:center !important;
    margin:0 !important;
    padding:8px 0;
  }

  /* 3) сам переключатель — обычный flex-элемент, НЕ absolute */
  #language-switcher.dropdown{
    position:static !important;    /* было absolute right:60/top:50% */
    transform:none !important;
    right:auto !important;
    top:auto !important;
  }

  #language-switcher .dropbtn{
    background:transparent;
    border:0;
    cursor:pointer;
    line-height:1;
    padding:10px 14px;
    font-size:18px;
  }

  /* 4) выпадающее меню — строго по ЦЕНТРУ под кнопкой  */
  #language-switcher .dropdown-content{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    min-width:140px;
    left:auto;
    background:#fff;
    padding:1px 0;
    border:1px solid #eee;
    border-radius:8px;
    box-shadow:0 8px 16px rgba(0,0,0,.12);
    z-index:1000;
  }

  /* маленький «треугольник» сверху — опционально */
  #language-switcher .dropdown-content::before{
    content:"";
    position:absolute;
    top:-6px; left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:12px; height:12px; background:#fff;
    border-left:1px solid #eee; border-top:1px solid #eee;
  }

  #language-switcher .dropdown-content a{
    display:block;
    text-align:center;
    padding:10px 14px;
  }

  /* показываем дропдаун на hover/focus как раньше */
  #language-switcher:hover .dropdown-content,
  #language-switcher:focus-within .dropdown-content,
  #language-switcher .dropbtn:hover + .dropdown-content,
  #language-switcher .dropbtn:focus + .dropdown-content{
    display:block;
  }
}

/* один раз в CSS */
html { scroll-behavior: smooth; }

/* чтобы якорь не прятался под фикс-шапкой */
#section1, #section2, #section3, #section4, #section5 {
  scroll-margin-top: 55px; 
}