/* ================================================================
   AS-LAYOUT.CSS  v2.0  —  ArcSafe Mobile-First Layout Engine
   ================================================================
   철학: 모바일 1-column이 DEFAULT. 1024px 이상에서만 multi-column.
   이 파일 하나가 레이아웃 유일한 진실 소스.
   arcsafe.css는 색상/타이포/컴포넌트만 담당.
   ================================================================ */

/* ----------------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
  --nav-h:      64px;
  --sidebar-w:  248px;
  --toc-w:      220px;

  /* Fluid padding — 모바일 16px, 데스크탑 52px */
  --px: clamp(16px, 5vw, 52px);

  /* Z-index */
  --z-nav: 100;
  --z-mob: 100;
}

/* ----------------------------------------------------------------
   BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

/* ----------------------------------------------------------------
   PC NAV  (기본 숨김 → 1024px 이상에서 표시)
   ---------------------------------------------------------------- */
nav.platform-nav,
.as-nav,
.topbar {
  display: none;          /* 모바일: 숨김 */
}

@media (min-width: 1024px) {
  nav.platform-nav,
  .as-nav {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    height: var(--nav-h);
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--px);
    background: rgba(250,252,253,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid #eaecf0;
  }

  .topbar {
    display: flex;
  }
}

/* ----------------------------------------------------------------
   MOBILE BOTTOM NAV  (기본 표시 → 1024px 이상에서 숨김)
   ---------------------------------------------------------------- */
.mobile-nav,
.as-mobile-nav {
  display: block;         /* 모바일: 표시 */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-mob);
  background: rgba(250,252,253,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1.5px solid #eaecf0;
  padding: 6px 0 env(safe-area-inset-bottom, 10px);
}

body { padding-bottom: 68px; }   /* 탭바 높이 확보 */

@media (min-width: 1024px) {
  .mobile-nav,
  .as-mobile-nav {
    display: none;        /* PC: 숨김 */
  }

  body { padding-bottom: 0; }
}

/* ----------------------------------------------------------------
   DOC LAYOUT  (sidebar + content + toc)
   ----------------------------------------------------------------
   모바일 DEFAULT: 단일 컬럼, sidebar/toc 숨김
   1024px+: 3-column grid 활성화
   ---------------------------------------------------------------- */

/* 모바일: 단순 블록 */
.doc-layout,
.layout-docs {
  display: block;
}

/* sidebar/toc: 모바일 숨김 */
.doc-sidebar,
.ld-sidebar,
.case-sidebar,
.codes-sidebar,
.doc-right-panel,
.ld-toc {
  display: none;
}

/* 본문: 모바일 전체 폭 */
.doc-body,
.ld-content {
  width: 100%;
  max-width: 72ch;
  padding: 20px var(--px) 40px;
}

/* 1024px 이상: 3-column 활성화 */
@media (min-width: 1024px) {

  .doc-layout,
  .layout-docs {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
    min-height: calc(100vh - var(--nav-h));
    align-items: start;
  }

  .doc-sidebar,
  .ld-sidebar {
    display: block;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .doc-right-panel,
  .ld-toc {
    display: block;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .doc-body,
  .ld-content {
    padding: 40px 48px 80px;
    max-width: none;
  }
}

/* ----------------------------------------------------------------
   CODES / CASES LAYOUT  (sidebar + main)
   ---------------------------------------------------------------- */
.codes-layout,
.cases-layout,
.layout-tools {
  display: block;
}

.codes-sidebar,
.cases-sidebar,
.lt-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .codes-layout,
  .cases-layout,
  .layout-tools {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: calc(100vh - var(--nav-h));
    align-items: start;
  }

  .codes-sidebar,
  .cases-sidebar,
  .lt-sidebar {
    display: block;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
}

/* ----------------------------------------------------------------
   CASE LAYOUT  (content + right panel)
   ---------------------------------------------------------------- */
.case-layout { display: block; }
.case-right-panel { display: none; }

@media (min-width: 1024px) {
  .case-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 32px;
  }
  .case-right-panel { display: block; }
}

/* ----------------------------------------------------------------
   HOME  tools grid
   ---------------------------------------------------------------- */
.tools-grid,
.codes-grid {
  display: grid;
  grid-template-columns: 1fr;   /* 모바일: 1열 */
  gap: 16px;
}

.featured-inner {
  display: block;               /* 모바일: 단순 블록 */
}
.featured-right { display: none; }   /* 모바일: 숨김 */

@media (min-width: 640px) {
  .tools-grid,
  .codes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .codes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .featured-right { display: block; }
}

/* ----------------------------------------------------------------
   ABOUT / CONTACT grid
   ---------------------------------------------------------------- */
.about-grid,
.contact-grid {
  display: block;
  padding: 36px var(--px);
}

@media (min-width: 1024px) {
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 64px var(--px);
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 64px var(--px);
  }
}

/* ----------------------------------------------------------------
   CRITERION / CHECKLIST / STORY  (컴포넌트 반응형)
   ---------------------------------------------------------------- */

/* criterion: 모바일 세로 스택 */
.criterion-row {
  display: flex;
  flex-direction: column;
}
.cr-condition { border-right: none; border-bottom: 1px solid #eaecf0; }
.cr-level     { border-right: none; border-bottom: 1px solid #eaecf0; justify-content: flex-start; }

@media (min-width: 1024px) {
  .criterion-row {
    display: grid;
    grid-template-columns: 210px 90px 1fr;
  }
  .cr-condition { border-right: 1px solid #eaecf0; border-bottom: none; }
  .cr-level     { border-right: 1px solid #eaecf0; border-bottom: none; justify-content: center; }
}

/* checklist: 모바일 1열 → PC 2열 */
.checklist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 1024px) {
  .checklist-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ait-step: 모바일 축약 */
.ait-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
}
.ait-verdict { display: none; }

@media (min-width: 1024px) {
  .ait-step {
    grid-template-columns: 40px 120px 1fr 80px;
  }
  .ait-verdict { display: flex; }
}

/* story-step: 모바일 축약 */
.story-step {
  display: grid;
  grid-template-columns: 72px 1fr;
}

/* hub-grid: 모바일 1열 → PC 3열 */
.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .hub-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------
   CI LOGO
   ---------------------------------------------------------------- */
.nav-logo-img {
  height: 30px;
  width: auto;
}