@charset "UTF-8";

@font-face {
    font-family: 'NotoSansKR-Regular';
    font-style: normal;
    font-weight: 400;
    src: url('/templets/guide/font/NotoSansKR-Regular.woff2') format('woff2'),
         url('/templets/guide/font/NotoSansKR-Regular.woff') format('woff'),
         url('/templets/guide/font/NotoSansKR-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKR-Medium';
    font-style: normal;
    font-weight: 500;
    src: url('/templets/guide/font/NotoSansKR-Medium.woff2') format('woff2'),
         url('/templets/guide/font/NotoSansKR-Medium.woff') format('woff'),
         url('/templets/guide/font/NotoSansKR-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKR-Bold';
    font-style: normal;
    font-weight: 700;
    src: url('/templets/guide/font/NotoSansKR-Bold.woff2') format('woff2'),
         url('/templets/guide/font/NotoSansKR-Bold.woff') format('woff'),
         url('/templets/guide/font/NotoSansKR-Bold.otf') format('opentype');
}

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--gnb-w: 220px;
	--border: #e5e7eb;
	--text: #111111;
	--subtext: #334155;
	--brand: #0b6bff;
	--bg: #ffffff;
	--hover: #f3f4f6;
	--gnb-w: 220px;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	color: var(--text);
	background: var(--bg);
	font-family: NotoSansKR-Regular, "Noto Sans KR";
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
}

/* 배경이 화면 전체로 가득 차도록 */
.app-wrap {
	width: 100%;
	background: transparent; /* 사이트처럼 밝은 회색 or 원하는 색상 */
}

/* 내부 콘텐츠는 950px로 가운데 정렬 */
.app {
	display: grid;
	grid-template-rows: 58px 1fr;
	min-height: 100vh;   /* height -> min-height */
  	overflow: visible;   /* 또는 auto; 필요에 따라 */
}

/* Top bar */
.topbar {
	position: fixed !important; /* 또는 relative */
	top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    
	width: 100%;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box;
	height: 58px;
	border-bottom: 1px solid #E4E8EB;
	background: #F4F4F4;
}
/* 내부 콘텐츠만 950px로 가운데 정렬 + 플렉스 정렬 */
.topbar-inner {
	width: 100%;
	margin: 0;
	padding: 0 16px;
	height: 58px;
	display: grid; /* ← flex → grid */
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center; /* 세로 중앙 */
	gap: 16px;
	box-sizing: border-box;
	position: relative; /* 기준 유지(필요 시) */
	overflow: visible;
}

.topbar-spacer { /* 가운데 칸이 있다면 */
	min-width: 0; /* 콘텐츠가 커도 부모를 밀지 않도록 */
}

.brand {
	display: flex;
	align-items: center; /* ← 로고/텍스트도 중앙 */
	gap: 10px;
	min-width: 0;
	cursor: pointer;
}

.brand * {
	text-align: left !important;
}

.brand strong {
	display: inline-block;
	font-family: NotoSansKR-Bold;
	font-size: 16px;
	font-weight: 700;
	color: #111111;
}

.brand .logo {
	width: 62px;
	height: 30px;
	display: inline-block;
	margin-left: 9px;
}

.brand .divider {
	width: 1px;
	height: 15px;
	background: #9DA1A5;
	display: inline-block;
	flex: none;
	margin: 0 12px; /* 양옆 간격은 필요에 맞게 조절 */
	align-self: center;
}

.search {
	position: static !important; /* 절대배치 끔 */
	left: auto !important; /* 남아있던 left 무력화 */
	right: auto !important;
	inset: auto !important;
	justify-self: end; /* 그리드 우측 정렬 */
	margin: 0;
	display: flex;
	min-width: 0;
}

.search-box {
	display: flex;
	align-items: center;
	width: clamp(180px, 26vw, 320px); /* 기본 180, 최대 320 */
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	box-sizing: border-box;
	background: #fff;
}

.search-box .ico-search {
	width: 14px;
	height: 14px;
	flex: none;
	margin-right: 8px;
}

.search-box input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	font: inherit;
	background: transparent;
}

.search-box input::placeholder {
	color: #D9D9D9;
}

.btn-clear {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('/templets/guide/img/05Ic/14/Clear.svg'); 

    border: none;
    cursor: pointer;
    display: none; 
}

.search-input:not(:placeholder-shown) + .btn-clear {
    display: block;
}

/* Main region (GNB + Page) */
.workspace {
	display: block;
	min-height: 0;
}

/* GNB */
.gnb {
	position: fixed;
	top: 58px; /* 헤더 아래부터 */
	left: 0;
	width: var(--gnb-w);
	height: calc(100vh - 58px);
	overflow-y: auto;
	border-right: 1px solid var(--border);
	background: #fff;
}

.gnb-header {
	padding: 12px 12px;
	font-size: 14px;
	color: var(--subtext);
	border-bottom: 1px solid var(--border);
}

.gnb>a:hover, a:link, a:visited {
	text-decoration: none !important;
	color: #111111 !important;
}

/* Menu lists */
.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu>li {
	border-bottom: 1px solid #f2f3f5;
}

/* Clickable row */
.menu-btn {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	background: none;
	border: 0;
	padding: 12px;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.menu-btn .label {
	flex: 1; /* wrapping strictly inside this depth */
	word-break: keep-all; /* natural Korean wrapping */
	overflow-wrap: anywhere; /* safety for long English/URLs */
}

/* toggle icon placeholder (20x20 image box user will supply) */
.toggle-ico {
	flex: none;
	width: 20px;
	height: 20px;
	background-image: url('/templets/guide/img/05Ic/20/Plus.svg');
	background-repeat: no-repeat;
}

.toggle-ico-checked {
	flex: none;
	width: 20px;
	height: 20px;
	background-image: url('/templets/guide/img/05Ic/20/minus.svg');
	background-repeat: no-repeat;
}

/* Depth styles */
.lvl1 {
	font-family: NotoSansKR-Bold, "Noto Sans KR";
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.5px;
}

.lvl1 .menu-btn {
	font-family: NotoSansKR-Bold, "Noto Sans KR";
	font-weight: 700;
}

.lvl2>.menu-btn {
	padding-left: 22px;
	font-family: NotoSansKR-Regular;
	font-size: 16px;
	color: #2B2B2B;
	letter-spacing: -0.5px;
	line-height: 24px;
	font-weight: 400;
}

.lvl3>.menu-btn {
	padding-left: 26px;
	font-family: NotoSansKR-Regular;
	font-size: 15px;
	color: #111111;
	letter-spacing: -0.5px;
	line-height: 22px;
	font-weight: 400;
	background: #F4F4F4;
}

.lvl3>.menu-btn>.label {
	padding: 0px 2px 0px 22px;
}

.lvl3>.menu-btn>.checked {
	background: #FFFFFF;
	color: #1428A0;
	border-radius: 6px;
	padding: 12px 12px 12px 22px;
}

/* Nested lists hidden by default */
.submenu {
	display: none;
}

.open>.submenu {
	display: block;
}

/* Active / focus states (optional) */
.menu-btn:focus-visible {
	outline: 2px solid #93c5fd;
	outline-offset: -2px;
}

.menu-select {
	color: #ffffff !important;
	background-color: #1428A0 !important;
}

/* Page scroll area */
/* ⑤ 본문: 왼쪽에 GNB 폭만큼 여백을 주고, 내부 컨테이너를 가운데 정렬 */
.page {
	min-width: 0;
	overflow-y: auto;
	padding: 24px 40px; /* 상하좌우 기본 패딩 */
	padding-left: calc(40px + var(--gnb-w)); /* GNB 공간만큼 확보 */
	background: transparent; /* 상위 .app-wrap가 전체 배경 담당 */
}

/* ⑥ 가운데 정렬 + 반응형 폭
      - 최소 950px 보장
      - 뷰포트 커지면 1280px까지 확장
      - 그 사이 구간은 88vw 비율로 자연 확대  */
.page .container {
	width: clamp(950px, 88vw, 1280px);
	margin: 0 auto; /* 남는 공간 기준으로 가운데 정렬 */
	margin-top:58px;
}

.placeholder {
	height: 1400px;
	border: 1px dashed var(--border);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--subtext);
}

/* Small screens */
@media ( max-width : 960px) {
	.search input {
		width: 200px;
	}
}

.pc-floating-buttons{
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0px;
  pointer-events: auto;
}

.pc-fab{
  width: 64px;
  height: 64px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.pc-fab img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


.toast-copy{
  position: fixed;
  left: 50%;
  bottom: 40px;                  /* PC 기준 여백 */
  transform: translateX(-50%);
  z-index: 1500;
  pointer-events: none;           /* 안쪽만 클릭 가능 */
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.toast-copy.show{
  opacity: 1;
  visibility: visible;
}

.toast-copy-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 10px 14px 20px;
  border-radius: 12px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  pointer-events: auto;          /* 토스트 자체는 클릭 가능 */
}

/* 왼쪽 체크 아이콘 영역 */
.toast-copy-icon{
  width: 24px;
  height: 24px;
  background-image: url('/templets/guide/img/05Ic/20/check.svg');
  background-repeat: no-repeat;
	background-position:center;
  flex: none;
}

/* 메시지 텍스트 */
.toast-copy-text{
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 닫기(X) 버튼 */
.toast-copy-close{
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* X 아이콘 자리 */
.toast-copy-close-ico{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-image: url('/templets/guide/img/05Ic/Mob/24/Close_w.svg');
  background-repeat: no-repeat;
	background-position:center;
}

/* ===== PC 사이즈 튜닝 ===== */
@media (min-width: 769px){
  .toast-copy{
    width: 420px;                /* 이미지처럼 긴 바 느낌 */
    max-width: calc(100% - 160px); /* 양옆 여유 */
    bottom: 40px;
  }
}

/* ===== 모바일 사이즈 튜닝 ===== */
@media (max-width: 768px){
  .toast-copy{
    width: calc(100% - 32px);    /* 좌우 16px 여백 */
    max-width: 360px;
    bottom: 24px;
  }
}