/*
 * 사용가이드 '수납' 내비게이션 — 서랍을 여는 아이콘 버튼과, 번들이 없을 때의 서랍 모양.
 * Figma 2026-09-22 새 시안: 사용가이드 홈 20192:102100 / 상세 20192:106359
 * (메뉴 서랍 20392:50478, 메뉴 시트 20418:56404, 목차 서랍 20460:56756).
 *
 *   1000px 이하 : 좌측 메뉴는 왼쪽에서, 목차는 오른쪽에서 나오는 360px 서랍
 *   700px 이하  : 좌측 메뉴는 아래에서 올라오는 시트, 목차는 아예 없음(버튼은 화면 CSS 가 숨긴다)
 *
 * 새 시안 주석은 시트·목차 숨김을 '360px 일 때부터'로 적었지만, 2026-09-22 사용자 결정으로
 * 사용가이드·망고소식 화면은 700px 을 그대로 쓴다. guideDrawer.js 의 sheetUnder 와 같은 값이다.
 *
 * 서랍의 자리·딤·전환은 MangoReact drawer 컴포넌트(Drawer.module.css)가 그린다.
 * 여기 있는 규칙은 두 갈래다.
 *   - `.is-fallback` 이 붙은 규칙: 번들(mango.js)이 늦거나 막혔을 때 쓰는 기본 구현 전용.
 *     컴포넌트가 붙으면 guideDrawer.js 가 기본 구현을 만들지 않으므로 걸리지 않는다.
 *   - 컴포넌트 덮기(딤 농도·손잡이·그림자): 시안이 디자인 시스템 기본값과 달라 이 화면들에서만 바꾼다.
 *     공용 컴포넌트는 다른 화면도 쓰므로 고치지 않고 번들도 다시 빌드하지 않는다(2026-09-22 결정).
 * 메뉴 서랍·시트의 안쪽 여백과 서랍 검색창은 guide.css, 목차 글자는 guideToc.css 와 각 화면 CSS 가 진다.
 */

/* 딤. 시안(20392:52759 / 20460:56754)은 검정 20% 다. 디자인 시스템 팝업(50%)보다 옅다. 흐림은 넣지 않는다. */
.guide-drawer-fallback-backdrop {position:fixed;top:0;right:0;bottom:0;left:0;z-index:996;background:rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s linear .25s;}
.guide-drawer-fallback-backdrop.is-open {opacity:1;visibility:visible;transition:opacity .25s ease-out;}
/* 컴포넌트 딤. guideDrawer.js 가 body 끝에 둔 자리(.guide-drawer-mount) 안에 컴포넌트 뿌리(div#…Component)가 서고,
   그 첫 자식이 딤이다(Drawer.tsx). 모듈 클래스(.backdrop)는 한 단이라 이 선택자가 이긴다.
   메뉴·목차 서랍, 홈·상세가 모두 이 자리를 쓰므로 한 줄로 끝난다. */
.guide-drawer-mount > div > :first-child {background:rgba(0,0,0,.2);}

/* 뒤쪽이 따라 구르지 않게 막는다. 이 화면들의 스크롤 상자는 window 가 아니라 main 이다. */
body.guide-drawer-open {overflow:hidden;}
body.guide-drawer-open main {overflow:hidden;}
/* .guide-top 은 z-index:1 로 쌓임 맥락을 만든다. 그 안의 서랍이 헤더(994) 위로 올라오게 잠깐 올린다. */
body.guide-drawer-open .user-guide .guide-top {z-index:997;}
/* 서랍·시트가 열린 동안 사이트 공통 플로팅 버튼(고객센터 #floating_view z999 · 맨 위로 .page-navigation z998)을 감춘다.
   두 버튼은 공용 규칙(notification.css·default.css)이라 고치지 않는다. 그대로 두면 서랍(997)·딤(996)보다 위라 패널 위에 뜬다.
   시안 서랍·시트(20392:50478, 20418:56404, 20460:56756)와 딤(20392:52759, 20460:56754)에는 두 버튼이 없다.
   열림은 패널의 aria-modal 로 읽는다 — 컴포넌트(Drawer.tsx)와 기본 구현(guideDrawer.js) 모두 여는 동안에만 달고, 넓은 화면(off)에서는 뗀다.
   여는 버튼의 aria-expanded 는 컴포넌트 서랍에서 바뀌지 않아 쓰지 않는다. body.guide-drawer-open 줄은 :has 를 모르는 브라우저의 기본 구현 몫이다
   (선택자 목록에 섞으면 :has 를 모르는 브라우저가 줄 전체를 버리므로 따로 둔다). */
body:has(#guideLnbPanel[aria-modal="true"], #guideToc[aria-modal="true"]) :is(#floating_view, .page-navigation) {visibility:hidden;}
body.guide-drawer-open #floating_view,
body.guide-drawer-open .page-navigation {visibility:hidden;}

@media screen and (max-width:1000px) {
	/* 두 번째 선택자는 .user-guide .guide-top .lnb-wrap(0,3,0) 과 자릿수를 맞추기 위한 것이다. */
	.user-guide .guide-drawer.is-fallback,
	.user-guide .guide-top .guide-drawer.is-fallback {
		position:fixed;top:0;bottom:0;z-index:997;
		box-sizing:border-box;width:360px;max-width:calc(100% - 44px);height:100%;
		margin:0;border:0;border-radius:0;background:#fff;
		visibility:hidden;transition:transform .25s ease-out,visibility 0s linear .25s;
	}
	.user-guide .guide-drawer.is-fallback.is-left,
	.user-guide .guide-top .guide-drawer.is-fallback.is-left {right:auto;left:0;transform:translateX(-100%);}
	.user-guide .guide-drawer.is-fallback.is-right,
	.user-guide .guide-top .guide-drawer.is-fallback.is-right {right:0;left:auto;transform:translateX(100%);}
	.user-guide .guide-drawer.is-fallback.is-open,
	.user-guide .guide-top .guide-drawer.is-fallback.is-open {visibility:visible;transform:none;transition:transform .25s ease-out;}
	.user-guide .guide-drawer.is-fallback:focus {outline:none;}
}

/* 좌측 메뉴는 700px 부터 하단 시트로 바뀐다(시안 20418:56404. 폭은 2026-09-19 에 700 으로 정했고 09-22 에도 유지).
   시트 안쪽 여백(위 32 = 손잡이 자리 28 + 4)은 guide.css 가 진다. 시안 시트에는 그림자가 없다. */
@media screen and (max-width:700px) {
	.user-guide .guide-drawer.is-fallback.is-sheet,
	.user-guide .guide-top .guide-drawer.is-fallback.is-sheet {
		top:auto;right:0;bottom:0;left:0;
		width:100%;max-width:none;height:min(570px,85vh);
		border-radius:20px 20px 0 0;
		transform:translateY(100%);box-shadow:none;
	}
	/* 위쪽 손잡이. 시트라는 것과 어디를 잡아 내리면 되는지를 보여 주는 표시다. 시안 20418:56406 은 32x4 #D9D9D9, 위 8. */
	.user-guide .guide-drawer.is-fallback.is-sheet::before {content:'';position:absolute;top:8px;left:50%;width:32px;height:4px;margin-left:-16px;border-radius:50px;background:#D9D9D9;}
	.user-guide .guide-drawer.is-fallback.is-sheet.is-open {transform:none;}
}
/* 컴포넌트 시트도 같은 손잡이·그림자로 덮는다. 손잡이는 Drawer.tsx 가 시트를 열 때 패널 첫 자식으로
   넣는 aria-hidden 칸(높이 28, 끌기 자리)이고 막대는 그 ::after 다. 표시(data-drawer)는 컴포넌트가 붙인다. */
#guideLnbPanel[data-drawer="sheet"] {box-shadow:none;}
#guideLnbPanel[data-drawer="sheet"] > [aria-hidden="true"]:first-child::after {top:8px;width:32px;height:4px;margin-left:-16px;border-radius:50px;background:#D9D9D9;}

/* 시트를 위·아래로 끄는 동작(guideSheet.js, 2026-10-08 실기기 점검 뒤).
   컴포넌트는 transform 전환 0.25s 만 준다. 높이가 바뀔 때(기본 <-> 꽉 참)도 건너뛰지 않게 높이 전환을 더하고, 빠르게 튕긴 뒤 붙는 결을 살리는 곡선을 쓴다.
   끄는 동안(.is-sheet-dragging)은 전환을 끄고 손끝을 그대로 따라가게 한다. 시트 높이는 --drawer-sheet-height 로 바꾼다(컴포넌트의 height 규칙이 이 변수를 읽는다).
   손잡이 칸은 컴포넌트가 28px 로 만든다. 잡기 쉽게 34px 로 키운다 — 시트 안쪽 위 여백이 32px 라 그 아래의 검색창과는 겹치지 않는다.
   목록 끝에서 더 밀어도 뒤(main)로 스크롤이 넘어가지 않게 한다. */
#guideLnbPanel[data-drawer="sheet"] {transition:transform .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1);}
#guideLnbPanel[data-drawer="sheet"].is-sheet-dragging {transition:none !important;will-change:transform,height;}
#guideLnbPanel[data-drawer="sheet"] > [aria-hidden="true"]:first-child {height:34px;}
#guideLnbPanel[data-drawer="sheet"] .guide-lnb {overscroll-behavior:contain;}

/*
 * 수납 바의 아이콘 버튼 (Figma 20418:56308 / 20418:56311) — 34x34 원형, 테두리 1px #E0E1E5, 아이콘 16.
 * 시안의 안쪽 여백 9 는 안쪽 선(테두리가 크기를 먹지 않는다) 기준이라 9 + 16 + 9 = 34 다. CSS 테두리는 상자 안에서 1 씩 먹으므로
 * 여백을 8 로 두어야 아이콘 칸이 16 으로 남는다(1 + 8 + 16 + 8 + 1 = 34). 9 면 칸이 14 로 줄어 아이콘 양끝이 잘린다.
 * 서버가 그린 .guide-nav-btn 과 MangoReact iconButton(홀더에 .is-component)이 같은 모양이 되게 맞춘다.
 */
.guide-nav-btn {box-sizing:border-box;display:flex;flex:none;align-items:center;justify-content:center;width:34px;height:34px;padding:8px;border:1px solid #E0E1E5;border-radius:30px;background:#fff;cursor:pointer;transition:background-color .15s ease-out;}
/* 마우스 위에서만 hover 색을 쓴다. 폰에서는 한 번 누르면 hover 가 그 자리에 남아 버튼이 계속 눌린 것처럼 보였다. 눌리는 동안은 :active 가 맡는다. */
@media (hover:hover) {
	.guide-nav-btn:hover {background:#F3F3F3;}
}
.guide-nav-btn:active {background:#F3F3F3;}
/* 컴포넌트로 바뀐 버튼의 hover 는 IconButton 컴포넌트가 그린다(홀더는 display:contents 라 위 규칙이 닿지 않는다).
   손가락만 있는 기기(hover:none)에서는 누른 자리에 :hover 가 남아 버튼이 계속 눌린 색이므로 흰색으로 되돌리고, 누르는 동안만 :active 로 보인다.
   홈의 50px 버튼은 같은 규칙이 guideHome.css 에 있다. */
@media (hover:none) {
	.guide-inpage-bar > .guide-nav-btn.is-component > button:hover {background-color:#fff;}
	.guide-inpage-bar > .guide-nav-btn.is-component > button:active {background-color:#F3F3F3;}
}
.guide-nav-btn[hidden] {display:none;}
/* 34px 원형 버튼은 눈에 보이는 크기를 그대로 두고, 터치로 누를 자리만 위아래·좌우 5px 씩 넓혀 44px 로 만든다(보이지 않는 영역도 버튼으로 눌린다).
   홀더(.is-component)는 display:contents 라 여기서 빼고 안쪽 단추에 건다. 홈의 50px 버튼은 이미 충분해 해당 없다. */
.guide-inpage-bar > .guide-nav-btn:not(.is-component),
.guide-inpage-bar > .guide-nav-btn.is-component > button {position:relative;}
.guide-inpage-bar > .guide-nav-btn:not(.is-component)::after,
.guide-inpage-bar > .guide-nav-btn.is-component > button::after {content:'';position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;}
.guide-nav-btn > i {display:block;flex:none;width:16px;height:16px;background-position:center;background-repeat:no-repeat;background-size:16px 16px;}
/* 컴포넌트를 그릴 자리. 홀더는 줄에서 사라지고 그 안의 단추가 그대로 선다(rmate create 가 홀더 바로 아래에 button 을 그린다).
   모양은 디자인 시스템 iconButton 의 'circle' 변형(IconButton.module.css)이 그리는데, 그 변형도 padding 9 에 아이콘 flex-shrink 기본값이라
   칸이 14x16 으로 눌린다. 공용 컴포넌트와 번들은 고치지 않으므로(2026-09-22 결정) 수납 바 안에서만 여백 8 과 아이콘 flex:none 을 덮는다.
   모듈 클래스(두 단)보다 세게 마크업 구조로 잡는다. */
.guide-nav-btn.is-component {display:contents;}
.guide-inpage-bar > .guide-nav-btn.is-component > button {padding:8px;}
.guide-inpage-bar > .guide-nav-btn.is-component > button > i {flex:none;}

@media (prefers-reduced-motion:reduce) {
	.guide-drawer-fallback-backdrop,
	.user-guide .guide-drawer.is-fallback,
	#guideLnbPanel[data-drawer="sheet"],
	.guide-nav-btn {transition:none !important;}
}