/* ===============================
   The Lady Learner - layout.css (clean)
   2025-10-16
   =============================== */

/* ===== Base (Desktop default) ===== */
body {
  margin: 0;
}

#ll-layout {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.ll-container {
  width: 1200px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
}

/* ===== Left nav (as sidebar on desktop) ===== */
#ll-header {
  width: 220px;
  padding: 0 30px 30px;
  border-right: 1px solid var(--palegray);
  /*display: flex;*/
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  top: 0;
  height: 100vh;
}

#ll-header .menu-toggle {
  display: none;
}

.menu-toggle .icon-close {
  display: none;
}

.menu-toggle.is-open .icon-menu {
  display: none;
}

.menu-toggle.is-open .icon-close {
  display: inline;
}

#ll-header .ll-logo {
  margin-top: 12px;
}

#ll-header .ll-logo a {
  color: var(--llred);
  text-decoration: none;
  font-size: var(--text-h3);
}

#ll-header .ll-logo svg {
  height:20px;
  fill:var(--llred);
}

#ll-header .header-inner {
  display: flex;
  align-items: center;
  height:46px; 
}

.ll-nav ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.ll-nav li {
}

.ll-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}

.ll-nav a:hover {
  color: var(--llred);
}

.ll-nav .current-menu-item>a,
.ll-nav .current_page_item>a,
.ll-nav .current-menu-ancestor>a {
  color: var(--llred);
}

.ll-nav .main-menu>li>a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.main-menu {
  word-spacing: -1px;
  letter-spacing: 0.25px;
}

/* 아이콘 매핑 (CSS 파일의 위치 기준으로 경로 지정)
   예시: /wp-content/themes/ladylearner/assets/icons/nav/*.svg */
.ll-nav .main-menu>li.ic-home>a::before {
  background-image: url("../icon/home.svg");
}

.ll-nav .main-menu>li.ic-summary>a::before {
  background-image: url("../icon/summary.svg");
}

.ll-nav .main-menu>li.ic-news>a::before {
  background-image: url("../icon/news.svg");
}

.ll-nav .main-menu>li.ic-journal>a::before {
  background-image: url("../icon/journal.svg");
}

.ll-nav .main-menu>li.ic-study>a::before {
  background-image: url("../icon/study.svg");
}

.ll-nav .main-menu>li.ic-events>a::before {
  background-image: url("../icon/events.svg");
}

.ll-nav .main-menu>li.ic-archive>a::before {
  background-image: url("../icon/archive.svg");
}

.ll-nav .main-menu>li.ic-blog>a::before {
  background-image: url("../icon/blog.svg");
}

.sub-menu {
  font-size:var(--text-tiny);
  padding-top:10px !important;
}

.info-menu {
  position: relative;
  font-size:var(--text-micro);
  margin: 0;
  padding: 0;
}

.social-menu {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.social-menu a {
  display: flex;
  gap: 4px;
  font-size: var(--text-tiny);
  color:var(--gray);
  align-items: center;
}

.social-menu a:hover {
  color: var(--darkgray);
}

.social-menu img {
  width: 12px;
  height: 12px;
}

.sidebar-meta {
  display: block;
  margin-top:30px;
}

.sidebar-meta small {
  font-size:var(--text-micro);
  color:var(--lightgray);
  display: block;
  width: 100%;
}

.info-menu a {
  text-decoration: none;
  color:var(--lightgray);
}

.info-menu a:hover {
  color:var(--gray);
}

.info-menu li {
  list-style: none;
  margin:4px 0;
}

/* ===== Main feed column ===== */
#ll-main {
  width: 720px;
}

/* ===== Right sidebar (desktop) ===== */
#ll-sidebar {
  width: 260px;
  padding: 0 30px 30px;
  border-left: 1px solid var(--palegray);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}



/* ===== Sidebar: user box ===== */
.sidebar-user {
  margin-bottom: 20px;
  height: 46px;
  display: flex;
  align-items: end;
  width: 100%;
  font-size: var(--text-small);
}

.sidebar-user .login-link {
  display: flex;
  gap:8px;
  align-items: center;
  margin-bottom:8px;
  color: var(--llred);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 500;
}

.sidebar-user .user-box {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.sidebar-user .user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border:1px solid var(--palegray)
}

.header-user .user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-bottom: -4px;
    border: 1px solid var(--palegray)
}

.sidebar-user .user-meta {
  display: flex;
  flex-direction: column;
}

.sidebar-user .user-nick {
  font-weight: 500;
}

.sidebar-user .logout-link {
  color: var(--gray);
  text-decoration: none;
}

/* sidebar - widget */

.widget {
  margin-bottom:30px;
}

.widget h3 {
  font-size:1rem;
  margin-bottom:10px;
  font-weight: 500;}

 .widget ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }

  .widget li {
    font-size:var(--text-small);
    padding: 10px 0;
    border-top:1px solid var(--palegray);
  }

.widget li:hover {
  color:var(--llred);
}
  .widget a {
    text-decoration: none;
    color:var(--ink);
  }

.widget-title {
  margin: 0 0 4px;
  font-size: var(--text-small);
}

.widget-meta {
  font-size: var(--text-tiny);
  color: var(--gray);
  margin-left: 2px;
}

.widget-events-week .widget-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:6px;
}
.widget-events-week h3 { margin:0; }
.widget-events-week .week-range { color:var(--gray); font-weight:400; font-size:var(--text-tiny); margin-left:.4em; }
.widget-events-week .more { font-size:var(--text-tiny); color:var(--gray); text-decoration:none; }
.widget-events-week .more:hover { text-decoration:underline; }

.widget-events-week .events-week-list {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; 
}

.widget-events-week .event-item a {
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink);
  padding:6px 0;
}
.widget-events-week .event-item a:hover { color: var(--llred); }

.widget-events-week .event-thumb {
  flex-shrink:0;
  width:72px; height:72px;
  border-radius:6px; overflow:hidden;
}
.widget-events-week .event-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
}

.widget-events-week .event-info {
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column;
  gap:2px;
}
.widget-events-week .event-title {
  font-weight:500; font-size:var(--text-small); line-height:1.3;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.widget-events-week .event-date { color:var(--gray); font-size:var(--text-tiny); }
.widget-events-week .event-badge {
  font-size:var(--text-micro); padding:2px 6px; border-radius:6px; white-space:nowrap;
  margin-top:2px; align-self:flex-start;
}


/* 문의 유형 섹션 전체 */

.ll-contact-inner {
  margin-top: 20px;
}

.ll-contact-type {
  margin-bottom: 24px;
}

/* 탭 컨테이너 */
.ll-contact-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 개별 탭(라벨) 래퍼 */
.ll-contact-type-option {
  position: relative;
}

/* 실제 라디오 버튼은 숨김 (접근성 유지) */
.ll-contact-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 탭처럼 보이게 하는 영역 */
.ll-contact-type-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--palegray);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  background-color: var(--paper);
  color: var(--darkgray);
  transition:
    background-color 0.16s ease-out,
    color 0.16s ease-out,
    border-color 0.16s ease-out,
    box-shadow 0.16s ease-out;
}

.ll-contact-email {
  margin-bottom: 20px;
}

/* 호버 상태 */
.ll-contact-type-option:hover .ll-contact-type-label {
  border-color: var(--gray);
  color: var(--ink);
}

/* 선택된 탭 */
.ll-contact-type-option input[type="radio"]:checked+.ll-contact-type-label {
  background-color: var(--llsoftblue);
  border-color: var(--llblue);
  color: var(--lldarkblue);
}

/* 모바일에서 두 줄 이상 쌓일 때 간격 */
@media (max-width: 640px) {
  .ll-contact-type-label {
    padding: 7px 12px;
    font-size: 13px;
  }
}

.ll-contact-section small {
  display: block;
  margin-bottom: 10px;
}

.ll-contact-actions button {
  width: 100%;
  margin-top: 10px;
}


/* ===== Overlays (default hidden) ===== */


/* =========================================================
   💻 Desktop (≥1025px)
   ========================================================= */
@media (min-width:1025px) {

  /* Top-header pattern is not used on desktop */
  .header-top {
    display: none !important;
  }

  /* Keep left nav and right sidebar visible */
  /*
  #ll-header {
    display: flex !important;
  }
*/
  #ll-sidebar {
    display: block !important;
  }
  

  /* Hide profile/login controls in left header on desktop */
  #ll-header .header-user,
  #ll-header .login-icon,
  #ll-header .header-avatar {
    display: none !important;
  }

  /* Hide hamburger on desktop */
  #ll-header .menu-toggle {
    display: none !important;
  }

  /* Ensure logo/title is visible even if wrapped */
  #ll-header .ll-logo {
    display: block !important;
    
  }

  /* Overlays unused on desktop */
  .ll-nav-overlay,
  .user-overlay {
    display: none !important;
  }
}

/* =========================================================
   📱 Tablet & Mobile (≤1024px)
   ========================================================= */
@media (max-width:1024px) {

  .ll-container{
    display: block;
    max-width: 720px;
  }

  /* Convert left nav to top fixed header */
  #ll-header {
    /*display: flex !important;*/
    position: fixed;
    top: 0;
    height: 54px;
    width: 100%;
    max-width: 720px;
    padding: 0 16px;
    background: var(--paper);
    border: 0;
    border-bottom: 1px solid var(--palegray);
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    z-index: 2000;
  }

  /* Header inner: 3 columns (☰ | logo | user) */
  #ll-header .header-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 54px;
    margin: 0 auto;
  }

  /* Left: hamburger, Center: logo, Right: user */
  #ll-header .menu-toggle {
    justify-self: start;
    display: block !important;
    cursor: pointer;
    color: var(--llred);
    z-index: 2100;
    background:none;
    border:none;
    padding: 0;
  }

  #ll-header .ll-logo {
    margin-top: 4px;
  }


  #ll-header .ll-logo svg {
    justify-self: center;
    text-align: center;
    height:20px;
  }

  #ll-header .ll-logo a {
    font-weight: 700;
    color: var(--llred);
    text-decoration: none;
    font-size: var(--text-h3);
  }

  #ll-header .header-user {
    justify-self: end;
    display: block !important;
  }

  #ll-header .header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
  }

  #ll-header .login-icon span {
    font-size: 26px;
    color: var(--llred);
  }

  /* Hide in-header nav blocks (use overlay instead) */
  #ll-header .ll-nav,
  #ll-header .ll-sub,
  #ll-header .social-menu {
    display: none !important;
  }

.social-menu {
  gap: 0;
}

.social-menu ul {
  list-style: none;
  padding: 0;
}

.social-menu li {
    margin-bottom:0;
  }

.social-menu a {
  padding: 4px 0 !important;
}

  /* Content spacing under fixed header */
  #ll-main {
    width: 100%;
    padding: 54px 0 80px;
  }

  /* Hide right sidebar on mobile/tablet */
  #ll-sidebar {
    height: auto;
    margin: 0 auto;
    border:none;
    max-width: 720px;
    width: 100%;
    padding: 0 20px 40px;
  }

  #ll-sidebar .sidebar-user, #ll-sidebar .widget {
    display: none;
  }

  #ll-sidebar .sidebar-meta {
    margin: 0;
  }

  #ll-sidebar .sidebar-meta small {
    font-size: var(--text-small);
  }

  #ll-sidebar .info-menu {
    font-size: var(--text-small);
  }
  /* Left menu overlay (slides in) */
  .ll-nav-overlay {
  position: fixed;
    top: 54px;
    width: 240px;
    height: calc(100vh - 54px);
    padding: 0 20px 20px;
    z-index: 999;
    background-color: var(--paper);
    border-right:1px solid var(--palegray);
    overflow-y: auto;
  
    /* 초기 상태: 화면 위로 접혀 있음 */
    opacity: 0;
    pointer-events: none;
  }

  .ll-nav-overlay.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .ll-nav-overlay.active {
    left: 0;
  }

  body.menu-open {
    overflow: hidden;
  }

  .ll-nav {
      font-size: var(--text-h4);
  }

  
    /* 데스크톱에서 오버레이 숨김 (임계값은 테마 기준으로 조정) */
    @media (min-width: 1025px) {
      .ll-nav-overlay {
        display: none !important;
      }
    }
}