/* =========================================================
   0) Reset & Base
   ========================================================= */
*{ box-sizing: border-box;margin:0;padding:0; }
html,body{ margin:0; padding:0; }
html.no-scroll{ overflow:hidden; }
body{ font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}


.container{
  margin: 0 auto;
  padding: 0 16px;
}

.hidden{ display:none !important; }

.btn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  color:#222;
  text-decoration:none;
  line-height:1;
}
.btn.primary{ background:#222; color:#fff; border-color:#222; }

.main {
  max-width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 235px);
}
.main.is-sub {margin-top: 81px; padding:50px 0; }

.admin_login a{
  display:inline-block;
  border:1px solid #ccc;
  padding:3px 5px;
  border-radius:5px;
}
.admin_login > a:hover{
  background:#fff;
  color:#000 !important;
  text-decoration:none !important;
}
  .sub-layout{max-width:1200px;margin: 0px auto;}
/* =========================================================
   2) Header / Logo / Desktop Nav
   ========================================================= */
.hdr{
  position: fixed;
  top: 0;
  padding:0 10px;
  z-index: 2000;
  height: 80px;
  display:flex;
  align-items:center;
  width:100%;
  min-width:1200px;
  left:50%;
  margin-left:-50%;
  border-bottom:1px solid #999;
}
.hdr.is-scrolled,
.hdr.is-hover {
  background: rgba(255,255,255,1) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.hdr .container{
  max-width:1200px;
  display:flex;
  align-items:center;
  gap: 20px;
  justify-content: space-between;
  width:100%;
}

.logo a{
  display:inline-flex;
  align-items:center;
  height: 60px;
}
.logo img{ display:block; height:100%; }
.logo{ margin:0; }

/* Desktop Nav */
.nav .menu{
  display:flex; align-items:center;
  gap:16px; margin:0; padding:0; list-style:none;
}
.nav .menu > li{ position:relative; }
.nav .menu > li > a{
  display:inline-block; padding:10px 12px;font-size:15px;
  color:#222; text-decoration:none; font-weight:600;
}
.nav .menu > li > a:hover{ text-decoration:underline; font-weight:700; }
.nav .menu > li.has-sub > a::after{
  content:"▾"; font-size:10px; margin-left:6px; opacity:.7;
}

/* Dropdown */
.nav .submenu{
  position:absolute; top:100%; left:0; min-width:200px;
  padding:8px 0; margin:0; list-style:none;
  background:#fff; border:1px solid #e7e7e7; border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  display:none; z-index:2001;
}
.nav .submenu li a{
  display:block; padding:10px 14px;
  text-decoration:none; color:#333; white-space:nowrap;
}
.nav .submenu li a:hover{ background:#f6f7f9; }
.nav .menu > li:hover > .submenu,
.nav .menu > li:focus-within > .submenu{ display:block; }
.nav .menu a:focus{ outline:2px solid #9cc; outline-offset:2px; }

/* 우측 영역 */
.hdr__right{ display:flex; flex-direction:row; }
.auth{ display:flex; align-items:center; gap:8px; }

/* 언어 드롭다운 */
.lang-switch.dropdown{ position:relative; margin-left:10px; }
.dropdown__btn{
  border:1px solid #ddd; background:#c75f02; cursor:pointer;
  line-height:1; height:100%;
  border-radius:10px; padding:0 10px;color:#fff;
}
.dropdown__menu{
  position:absolute; right:0; top:100%;
  min-width:140px; margin-top:6px; padding:6px 0;
  border:1px solid #eee; background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  display:none; z-index:2002;
}
.dropdown__menu li{ list-style:none; }
.dropdown__menu a{ display:block; padding:8px 12px; text-decoration:none; color:#222; }
.dropdown__menu a:hover{ background:#f5f7fb; }
.dropdown.open .dropdown__menu{ display:block; }

/* =========================================================
   3) Mobile Toggle
   ========================================================= */
#mnav-toggle{
  display:none;
  width: 40px;
    height: 36px;
    margin-left: 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    text-align: center;
}

/* =========================================================
   4) Mobile Off-Canvas
   ========================================================= */
#mnav{
  position:fixed;
  top:60px; right:0;
  width:min(70vw, 360px);
  height:calc(100vh - 60px);
  background:#fff;
  border-left:1px solid #eee;
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:1600;
  overflow-y:auto; padding:20px;
}
#mnav.open{ transform:translateX(0); }

.mobile-menu > ul{ margin:0; padding:0; }
.mobile-menu > ul > li{
  list-style-position:inside; padding:0 0 10px 20px;
}
.mobile-menu > ul > li > a{ text-decoration:none; color:#333; }

#mnav-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:1500; opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
#mnav-backdrop.show{ opacity:1; visibility:visible; }

/* Drawer sections */
.mnav-section{ padding:16px 18px; border-bottom:1px solid #f1f1f3; }
.mnav-title{ font-weight:700; font-size:14px; color:#222; margin-bottom:10px; }
.mnav-links{ display:flex; flex-direction:column; gap:5px; }
.mnav-links a{
  display:block; padding:3px 8px; background:#efefef;
  text-decoration:none; color:#222; border-radius:8px;
}
.mnav-links a:hover{ background:#f6f7f9; }

/* Auth */
.auth-desktop{
  display:inline-flex; gap:10px; align-items:center; margin-left:10px;
}
.auth-desktop .auth-link{
  text-decoration:none; color:#222;background:#fff;
  padding:6px 10px; border:1px solid #ddd; border-radius:8px;
}
#mnav .auth-mobile{ display:none; }
#mnav .auth-mobile-sep{ display:none; border-top:1px solid #eee; margin:8px 0; }

/* =========================================================
   5) Footer
   ========================================================= */
.ftr{
  background:#222; color:#ccc;
  padding:20px 0; font-size:13px; text-align:center; line-height:1.6;
}
.ftr p{ margin:4px 0; }
.ftr a{ color:#ddd; text-decoration:none; }
.ftr a:hover{ text-decoration:underline; color:#fff; }
.ftr small{ display:block; margin-top:10px; color:#888; }

/* Footer 언어스위치 */
.ftr .lang-switch{ font-size:12px; margin-left:10px; }
.ftr .lang-switch a{ margin:0 4px; color:#ddd; text-decoration:none; }
.ftr .lang-switch a:hover{ color:#fff; text-decoration:underline; }

/* =========================================================
   6) Flash
   ========================================================= */
.flash{
  max-width:550px; margin:12px auto; padding:12px 14px;
  border-radius:10px; font-size:14px; text-align:center; display:block;
  border:1px solid #e5e5e5; background:#f9f9f9;
}
.flash-success{ border-color:#cce7d0; background:#f3fbf5; color:#166534; }
.flash-error{ border-color:#f5c2c7; background:#fff1f2; color:#b91c1c; }
.flash-info{ border-color:#c7d2fe; background:#eef2ff; color:#1e40af; }

/* =========================================================
   7) Responsive
   ========================================================= */
@media (max-width:1200px){
.hdr{
  height: 60px;
  display:flex;
  align-items:center;
  width:100%;
  min-width:100%;
  left:0;
  margin-left:0;
  border-bottom:1px solid #999;
}
.is-home .hdr{
	background:transparent;
}
.is-sub .hdr{
	background:#fff;
}
.container{
  margin: 0 auto;
  padding: 0px;
}
  .nav, .lang-switch-top, .auth{ display:none; }
  #mnav-toggle{ display:inline-block; }
  .hdr .container{ justify-content:space-between; gap:12px; }
  .logo a{height:40px;}
  .log-type{ margin:10px 0; }
  .auth-admin{ text-align:center; margin-top:8px; }
  .auth-user{ display:flex; justify-content:flex-end; align-items:center; gap:20px; }
  .auth-user .auth-name{ font-weight:bold; }
  .auth-guest{ display:flex; justify-content:flex-end; gap:12px; }
  .auth-desktop{ display:none; }
  #mnav .auth-mobile{ display:block; }
  .log-type a{ display:block; padding:5px 12px; border-radius:10px; border:1px solid #ccc; text-decoration:none; color:#666; font-weight:700; }
  #mnav .auth-mobile-sep{ display:block; }
  .lang-switch.dropdown{ margin-left:0; }
}

@media(max-width:768px){
    .main.is-sub {
        margin-top: 61px;
        padding: 10px 10px 30px;
    }

}

@media (max-width:420px){
  .hdr{ height:60px;}
  .logo a{ height:40px; }
  #mnav{ top:54px; height:calc(100vh - 60px); }
  .container{ padding:0px; }
  #mnav-toggle{ width:36px; height:36px; font-size:18px;}
  #mnav{ padding-bottom:8px; box-shadow:-10px 0 30px rgba(0,0,0,.15); }
  .mnav-links a{ font-size:12px; }
  .lang-switch.dropdown{margin-top:5px; height:25px;}
  .dropdown__btn{
		padding:3px 5px;border-radius:0;
	}
}