/* 머리·모바일 메뉴·바닥·퀵메뉴 - ~/OneDrive/WEB/Projects/docs/ui/site-shell-standard.md v2.2 §1.3·§3.4 그대로(goin.co.kr 판, lastchaptercokr 에서 옮김). 셸 토큰은 site.css :root
   이 사이트에 맞춘 것: 브랜드(글자 로고), 그림자 색(검정 테마), 모바일 메뉴 버튼 바탕(--color-surface), 바닥 */

/* ── 브랜드 (madebyai - 로고 이미지가 생기기 전까지 글자 로고) ── */
.brand{display:inline-flex;align-items:baseline;gap:0;text-decoration:none;color:var(--color-text);font-size:24px;font-weight:800;letter-spacing:-.04em;line-height:1}
.brand:hover{color:var(--color-text)}
.brand .brand-by{color:var(--color-text-muted);font-weight:500}
.brand-sub{display:block;margin-top:8px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--color-text-muted)}
@media (max-width:575.98px){.site-header .brand{font-size:21px}}

/* ── 머리 (PC) ── */
.header-space{height:var(--header-h)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--header-h);background:var(--header-bg);border-bottom:1px solid var(--color-border);
  transition:height .4s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,background-color .4s ease,border-color .4s ease;will-change:transform}
html.header-compact .site-header{height:var(--header-h-compact);background-color:var(--header-glass);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom-color:transparent;box-shadow:var(--header-shadow)}
.site-page :where([id]){scroll-margin-top:calc(var(--header-h-compact) + 16px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:24px}
.header-inner>.brand{flex-shrink:0;transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
html.header-compact .header-inner>.brand{transform:scale(.84)}

/* ── 읽기 진행선 ── */
.header-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--nav-accent);transform-origin:left center;transform:scaleX(var(--progress,0));opacity:0;transition:opacity .4s ease;pointer-events:none}
html.has-progress .header-progress{opacity:1}

/* ── 주 메뉴 (밑줄·옅은 배경이 미끄러진다 - 위치는 site.js 가 --x·--y·--w·--h 로 넣는다) ── */
.main-nav{position:relative;display:flex;align-items:center;gap:24px;font-weight:500}
.main-nav form{margin:0}
.main-nav>a:not(.button),.nav-link-button{position:relative;z-index:1;padding:12px 0;border:0;background:transparent;color:var(--color-text-light);font:inherit;text-decoration:none;cursor:pointer;transition:color .3s ease}
.main-nav>a:not(.button):hover,.main-nav>a:not(.button):focus-visible,.main-nav>a.is-active,.nav-link-button:hover{color:var(--color-primary)}
.main-nav>a.is-active{font-weight:650}
.nav-glide,.nav-indicator{position:absolute;left:0;top:0;pointer-events:none;opacity:0;width:var(--w,0);transform:translate(var(--x,0),var(--y,0))}
.nav-glide{z-index:0;height:var(--h,0);margin:0 -12px;padding:0 12px;box-sizing:content-box;border-radius:999px;background:var(--nav-glide)}
.nav-indicator{z-index:2;height:2px;border-radius:2px;background:var(--nav-accent)}
.main-nav.is-ready .nav-glide,.main-nav.is-ready .nav-indicator{transition:transform .5s cubic-bezier(.3,1.25,.4,1),width .5s cubic-bezier(.3,1.25,.4,1),height .3s ease,opacity .3s ease}
.main-nav.is-hovering .nav-glide{opacity:.75}
.main-nav.has-target .nav-indicator{opacity:1}

/* ── 주 버튼: 빛 스침 + 아이콘 회전 ── */
.nav-cta,.mobile-cta,.mobile-nav-cta{position:relative;overflow:hidden;isolation:isolate}
.nav-cta::after,.mobile-cta::after,.mobile-nav-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / 22%) 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.nav-cta:hover::after,.nav-cta:focus-visible::after,.mobile-cta:active::after,.mobile-nav-cta:active::after{transform:translateX(120%)}
.nav-cta svg,.mobile-nav-cta svg{transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.nav-cta:hover svg,.nav-cta:focus-visible svg{transform:rotate(90deg)}

/* ── 모바일 메뉴 버튼: 「메뉴/닫기」 글자 + 세 줄 → X (aria-expanded 하나로) ── */
.mobile-actions,.mobile-nav,.mobile-nav-cta,.nav-backdrop{display:none}
.mobile-menu-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-primary);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;line-height:1;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
.mobile-menu-toggle[aria-expanded=true]{border-color:var(--color-primary);background:var(--color-primary-soft)}
.mobile-menu-toggle .menu-label{display:inline-grid;overflow:hidden}
.mobile-menu-toggle .menu-label>span{grid-area:1/1;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
.mobile-menu-toggle .menu-label-close{transform:translateY(110%);opacity:0}
.mobile-menu-toggle[aria-expanded=true] .menu-label-open{transform:translateY(-110%);opacity:0}
.mobile-menu-toggle[aria-expanded=true] .menu-label-close{transform:none;opacity:1}
.menu-burger{position:relative;display:inline-block;width:18px;height:14px}
.menu-burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.3,1.3,.5,1),opacity .2s ease,top .3s ease,width .3s ease}
.menu-burger i:nth-child(1){top:0}.menu-burger i:nth-child(2){top:6px;width:72%}.menu-burger i:nth-child(3){top:12px}
.mobile-menu-toggle:hover .menu-burger i:nth-child(2){width:100%}
.mobile-menu-toggle[aria-expanded=true] .menu-burger i:nth-child(1){top:6px;transform:rotate(45deg)}
.mobile-menu-toggle[aria-expanded=true] .menu-burger i:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-menu-toggle[aria-expanded=true] .menu-burger i:nth-child(3){top:6px;transform:rotate(-45deg)}

@media (max-width:991.98px){
  .main-nav{display:none}
  .header-inner{gap:10px}
  .mobile-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
  .mobile-cta{white-space:nowrap}
  /* 펼친 메뉴 - 기준은 머리 전체(.site-header) */
  .mobile-nav:not([hidden]){display:block;position:absolute;left:0;right:0;top:100%;background:var(--header-bg);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);box-shadow:0 18px 30px rgb(0 0 0 / 50%);max-height:calc(100dvh - var(--header-h-compact));overflow-y:auto;overscroll-behavior:contain;animation:nav-drop .24s cubic-bezier(.2,.7,.2,1)}
  .mobile-nav-inner{padding-block:6px 20px}
  .mobile-nav-links a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--color-border);font-size:16px;font-weight:560;color:var(--color-text);text-decoration:none;transition:color .25s ease,padding-left .35s cubic-bezier(.2,.7,.2,1)}
  .mobile-nav-links a::before{content:"";position:absolute;left:0;top:50%;width:3px;height:22px;margin-top:-11px;border-radius:2px;background:var(--nav-accent);transform:scaleY(0);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
  .mobile-nav-links a.active{padding-left:14px;color:var(--color-primary);font-weight:650}
  .mobile-nav-links a.active::before{transform:scaleY(1)}
  .mobile-nav-links svg{width:16px;height:16px;color:var(--color-text-light);transition:transform .35s cubic-bezier(.3,1.3,.5,1),color .25s ease}
  .mobile-nav-links a:hover svg,.mobile-nav-links a:active svg,.mobile-nav-links a.active svg{transform:translateX(4px);color:var(--nav-accent)}
  .mobile-nav-account{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
  .mobile-nav-account form{margin:0}
  .mobile-nav-account .button{width:100%;font-size:14px;gap:6px}
  .mobile-nav-account .button svg{width:16px;height:16px}
  /* 항목이 차례로 내려온다 */
  .mobile-nav:not([hidden]) .mobile-nav-links a,.mobile-nav:not([hidden]) .mobile-nav-account>*{animation:nav-item .3s cubic-bezier(.2,.7,.2,1) both}
  .mobile-nav:not([hidden]) .mobile-nav-links a:nth-child(2){animation-delay:.03s}
  .mobile-nav:not([hidden]) .mobile-nav-links a:nth-child(3){animation-delay:.06s}
  .mobile-nav:not([hidden]) .mobile-nav-links a:nth-child(4){animation-delay:.09s}
  .mobile-nav:not([hidden]) .mobile-nav-links a:nth-child(5){animation-delay:.12s}
  .mobile-nav:not([hidden]) .mobile-nav-links a:nth-child(6){animation-delay:.15s}
  .mobile-nav:not([hidden]) .mobile-nav-links a:nth-child(7){animation-delay:.18s}
  .mobile-nav:not([hidden]) .mobile-nav-account>*{animation-delay:.2s}
  /* 뒤 덮개 + 스크롤 멈춤 */
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:25;background:var(--overlay);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
  html.nav-open .nav-backdrop{opacity:1;visibility:visible;transition:opacity .35s ease}
  html.nav-open,html.nav-open body{overflow:hidden}
  body:has(.mobile-nav:not([hidden])) .quick-menu{display:none}
}
/* 좁은 화면 머리 - 로고는 줄이지 않는다 */
@media (max-width:480px){.mobile-cta{min-height:44px;padding:0 10px;font-size:13px}.mobile-cta svg{display:none}.mobile-menu-toggle{padding:8px 10px;gap:5px}}
@media (max-width:374px){.mobile-cta{padding:0 8px}.mobile-menu-toggle{padding:8px}}
@media (max-width:359px){.mobile-cta{display:none}.mobile-nav-cta{display:flex;width:100%;margin:14px 0 6px}}
@keyframes nav-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes nav-item{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 우측 퀵메뉴 ── 전환점 1400px(§3.2 - 본문 폭 1160px, goin 과 같음) */
.quick-menu{position:fixed;top:50%;right:20px;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;width:72px;background:var(--band);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 14px 34px rgb(0 0 0 / 50%)}
.quick-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:62px;padding:11px 4px;border:0;background:none;color:var(--band-text);font:inherit;font-size:12px;font-weight:520;line-height:1.25;letter-spacing:-.01em;text-decoration:none;cursor:pointer}
.quick-item+.quick-item{border-top:1px solid var(--band-line)}
.quick-item svg{width:20px;height:20px}
.quick-item:hover{background:rgb(255 255 255 / 8%);color:var(--band-accent)}
.quick-item:focus-visible{outline:3px solid var(--nav-accent);outline-offset:-4px}
.quick-top{display:none}
.quick-top.is-visible{display:flex}
@media (max-width:1399.98px){
  /* TOP 하나만 남는 구간 - TOP 이 숨으면 빈 테두리가 선으로 보이므로 바째 숨긴다(has-top 은 site.js) */
  .quick-menu{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:12px;width:46px;transform:none;display:none}
  .quick-menu.has-top{display:flex}
  .quick-menu.has-widget{display:none}
  .quick-item:not(.quick-top){display:none}
  .quick-item{min-height:46px;padding:10px 4px}
  .quick-label{display:none}
  .site-footer{padding-bottom:72px}
}

@media (prefers-reduced-motion:reduce){
  .site-header,.header-inner>.brand,.nav-glide,.nav-indicator,.main-nav.is-ready .nav-glide,.main-nav.is-ready .nav-indicator,.nav-cta::after,.mobile-cta::after,.mobile-nav-cta::after,.menu-burger i,.mobile-menu-toggle .menu-label>span,.nav-backdrop,.mobile-nav-links a,.mobile-nav-links a::before,.mobile-nav-links a svg,.header-progress{transition:none!important}
  .mobile-nav:not([hidden]),.mobile-nav:not([hidden]) .mobile-nav-links a,.mobile-nav:not([hidden]) .mobile-nav-account>*{animation:none}
}
@media print{
  .site-header{position:static;transform:none!important;height:auto;box-shadow:none}
  .header-space,.nav-backdrop,.header-progress,.nav-glide,.nav-indicator,.mobile-nav,.mobile-actions,.quick-menu{display:none!important}
}

/* ── 바닥 (goin·lastchaptercokr 방식: 소개 단 + 제목 있는 링크 3단 + 사업자 정보 3줄. css-standard §16.3 - 767px 이하 메뉴 2열) ── */
.site-footer{border-top:1px solid var(--color-border);background:var(--color-bg-alt);color:var(--color-text-muted);font-size:14px}
.footer-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:48px 32px}
.footer-about .brand{font-size:26px}
.footer-note{margin-top:14px;line-height:1.7}
.footer-heading{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--color-text)}
.footer-links ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-links a{text-decoration:none;color:var(--color-text-muted)}
.footer-links a:hover{color:var(--color-text)}
/* 아래 칸 - 왼쪽 사업자 정보, 오른쪽 약관 링크·저작권·최종 업데이트(오른쪽 정렬). 좁은 화면은 위아래로 */
.footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;padding-block:20px 32px;border-top:1px solid var(--color-border);font-size:13px}
.footer-biz{display:grid;gap:6px}
.footer-company{display:flex;flex-wrap:wrap;gap:4px 16px}
.footer-company a{text-decoration:none}
.footer-meta{display:grid;gap:6px;justify-items:end;text-align:right}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px}
.footer-legal a{color:var(--color-text-muted);text-decoration:none}
.footer-legal a:hover{color:var(--color-text)}
.footer-legal .footer-privacy{color:var(--color-text-soft);font-weight:700}
.footer-copy{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;color:var(--color-text-dim)}
@media (max-width:767.98px){.footer-bottom{grid-template-columns:1fr}.footer-meta{justify-items:start;text-align:left}.footer-legal,.footer-copy{justify-content:flex-start}}
@media (max-width:991.98px){.footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-about{grid-column:1/-1}}
@media (max-width:767.98px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-block:36px 24px}}