/* =========================================
   SkillLens — 레이아웃
   헤더 / 사이드바 / 메인 / 푸터
   ========================================= */

/* ── 전체 구조 ── */
.sl-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sl-body {
  display: flex;
  flex: 1;
  padding-top: var(--header-h);
}

/* ── 헤더 ── */
.sl-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  z-index: 100;
}

.sl-logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--bk);
  flex-shrink: 0;
}
.sl-logo span { color: var(--o); }

.sl-header-company {
  font-size: 12px;
  color: var(--g5);
  padding: 2px 10px;
  background: var(--g1);
  border-radius: 20px;
}

.sl-header-spacer { flex: 1; }

.sl-header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--g7);
}

.sl-avatar {
  width: 30px; height: 30px;
  background: var(--og);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.sl-hamburger {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur);
}
.sl-hamburger:hover { background: var(--g1); }
.sl-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--g7);
  border-radius: 1px;
  transition: all 0.3s;
}

/* ── 사이드바 ── */
.sl-sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  background: var(--wh);
  border-right: 1px solid var(--bd);
  overflow-y: auto;
  z-index: 90;
  padding: 16px 0 32px;
  transition: transform 0.3s var(--ease);
}

/* 네비게이션 그룹 */
.nav-group { margin-bottom: 2px; }

.nav-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--g7);
  cursor: pointer;
  border-radius: 8px;
  margin: 0 8px;
  transition: all var(--dur);
  user-select: none;
}
.nav-group-title:hover { background: var(--g1); color: var(--bk); }
.nav-group.active > .nav-group-title { color: var(--o); }

.nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-arrow { margin-left: auto; color: var(--g3); font-size: 18px; transition: transform 0.2s; }
.nav-lock  { margin-left: auto; font-size: 12px; }
.nav-group.open .nav-arrow { transform: rotate(90deg); }

/* 서브메뉴 */
.nav-sub { display: none; padding: 2px 8px 4px 44px; }
.nav-group.open .nav-sub { display: block; }

.nav-item {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--g5);
  border-radius: 6px;
  transition: all var(--dur);
}
.nav-item:hover { color: var(--bk); background: var(--g1); }
.nav-item.current {
  color: var(--o);
  background: var(--orange-bg);
  font-weight: 600;
}

.nav-group-title.locked { opacity: 0.5; }
.locked-sub { padding: 8px 8px 8px 44px; }
.nav-locked-msg {
  font-size: 12px; color: var(--g5);
  line-height: 1.6;
}
.nav-locked-msg a { color: var(--o); }

/* ── 메인 콘텐츠 ── */
.sl-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 32px 40px;
  max-width: 1280px;
  width: 100%;
}

/* ── 푸터 ── */
.sl-footer {
  margin-left: var(--sidebar-w);
  border-top: 1px solid var(--bd);
  padding: 20px 40px;
  font-size: 12px;
  color: var(--g4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sl-footer a { color: var(--g4); }
.sl-footer a:hover { color: var(--o); }
.sl-footer-onet { font-size: 11px; color: var(--g3); }

/* ── 모바일 ── */
@media (max-width: 768px) {
  .sl-hamburger { display: flex; }
  .sl-sidebar {
    transform: translateX(-100%);
    width: 280px;
    box-shadow: var(--shadow-lg);
  }
  .sl-sidebar.open { transform: translateX(0); }
  .sl-main { margin-left: 0; padding: 20px 16px; }
  .sl-footer { margin-left: 0; padding: 16px; }
  .sl-header-company { display: none; }
}

/* ════════════════════════════════════════════════════════
   공통 레이아웃 — 헤더 + 사이드바 + 프로필 (layout.js가 생성)
   페이지 인라인에서 발본색원 → 여기 한 곳에서 관리
   ════════════════════════════════════════════════════════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:200;height:56px;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 24px;gap:14px}
.hdr-logo{display:inline-flex;align-items:center;text-decoration:none}
.hdr-sp{flex:1}
.hdr-ham{display:none;width:36px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:8px;background:none;border:none;cursor:pointer}
.hdr-ham span{display:block;width:20px;height:2px;background:var(--g7,#444);border-radius:1px}

.sidebar{position:fixed;top:56px;left:0;bottom:0;width:230px;background:#fff;border-right:1px solid var(--bd);overflow-y:auto;z-index:100;padding:16px 0 90px;transition:transform .28s cubic-bezier(.25,1,.5,1)}
.sl-nav{padding:0}
.nv-grp{margin-bottom:2px}
.nv-hd{display:flex;align-items:center;gap:10px;padding:11px 16px;margin:0 8px;border-radius:10px;font-size:15px;font-weight:700;color:var(--g7,#444);cursor:pointer;transition:all .18s;width:calc(100% - 16px);text-align:left;text-decoration:none}
.nv-hd:hover{background:var(--g1,#f5f4f1);color:var(--bk,#0a0a0a)}
.nv-hd.on{color:var(--o,#F47721)}
.nv-ico{font-size:15px;width:20px;text-align:center}
.nv-arr{margin-left:auto;font-size:16px;color:var(--g2,#e0e0e0);transition:transform .2s;cursor:pointer;padding:2px 4px}
.nv-grp.open .nv-arr{transform:rotate(90deg)}
.nv-sub{display:none;padding:2px 8px 4px 42px}
.nv-grp.open .nv-sub{display:block}
.nv-a{display:block;padding:8px 12px;font-size:14px;color:var(--g5,#666);border-radius:8px;transition:all .15s;text-decoration:none}
.nv-a:hover{color:var(--bk,#0a0a0a);background:var(--g1,#f5f4f1)}
.nv-a.cur{color:var(--o,#F47721);background:rgba(244,119,33,.08);font-weight:700}
.nv-a.nv-locked{color:var(--g4,#999);display:flex;align-items:center;justify-content:space-between}
.nv-lk{font-size:11px;opacity:.6}

/* 사이드바 하단 프로필 */
.sidebar-profile{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;border-top:1px solid var(--bd);background:#fff;display:flex;align-items:center;gap:10px}
.sidebar-profile.guest{justify-content:center}
.profile-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--o,#F47721),var(--o2,#FF9A52));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:14px;font-weight:700;color:var(--bk,#0a0a0a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-co{font-size:12px;color:var(--g5,#666);margin-top:1px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.profile-toggle{background:none;border:none;cursor:pointer;font-size:14px;color:var(--g4,#999);padding:4px}
.profile-menu{display:none;position:absolute;bottom:64px;left:16px;right:16px;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.12);padding:6px;z-index:120}
.profile-menu.open{display:block}
.profile-mi{display:block;padding:9px 12px;font-size:13.5px;color:var(--g7,#444);border-radius:8px;text-decoration:none}
.profile-mi:hover{background:var(--g1,#f5f4f1)}
.sb-login-btn{display:block;width:100%;text-align:center;padding:10px;background:var(--o,#F47721);color:#fff;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none}

/* 본문 영역 — 사이드바 폭만큼 밀기 */
.bw{margin-left:230px;padding-top:56px;transition:margin-left .28s cubic-bezier(.25,1,.5,1)}

@media(max-width:768px){
  /* 햄버거가 오른쪽 → 사이드바도 오른쪽에서 슬라이드 (오른손 엄지 동선) */
  .sidebar{left:auto;right:0;transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  .bw{margin-left:0}
  .hdr-ham{display:flex}
  .hdr-logo svg{width:34px!important;height:34px!important}  /* 모바일 로고 더 크게 */
}

/* ════ 공통 푸터 (layout.js가 .bw 끝에 생성) ════ */
.ft{border-top:1px solid var(--bd);margin-top:64px;padding:36px 48px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.ftl{font-size:13px;color:var(--g5);line-height:1.7}
.ftl a{color:var(--o)}
.ft-en{margin-top:4px}
.ftlinks{display:flex;gap:16px;font-size:12px;color:var(--g4);margin-top:8px;flex-wrap:wrap;align-items:center}
.ftlinks a{color:var(--g4)}
.ftlinks a:hover{color:var(--o)}
.fto img{height:56px;width:auto;display:block}
@media(max-width:768px){
  .ft{grid-template-columns:1fr;text-align:center;padding:28px 20px;margin-top:48px}
  .ft-en{display:none}          /* 모바일: 긴 영문 고지 숨김 */
  .fto{display:flex;justify-content:center}
  .fto img{max-width:120px;height:auto}
  .ftlinks{justify-content:center}
}