@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;900&display=swap');

:root{
  --bg:#FAFAF9;
  --surface:#FFFFFF;
  --border:#E4E4E0;
  --text:#1C1C1A;
  --text-dim:#75746E;
  --accent:#3D5AFE;
  --red:#E5484D;
  --blue:#3D5AFE;
  --green:#2F9E5B;
  --yellow:#D9A404;
  --warn:#C2680A;
  --radius:12px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Sans KR', sans-serif;
  line-height:1.7;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3{font-weight:700;letter-spacing:-0.01em;margin:0;}

.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:12px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;}
.brand-mark{
  width:11px;height:11px;border-radius:3px;
  background:conic-gradient(var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--blue) 75% 100%);
}
.top-nav{display:flex;gap:2px;flex-wrap:wrap;font-size:13.5px;}
.top-nav a{padding:8px 12px;border-radius:8px;color:var(--text-dim);}
.top-nav a:hover{color:var(--text);background:var(--bg);}
.top-nav a.active{color:var(--surface);background:var(--text);font-weight:700;}

main{max-width:880px;margin:0 auto;padding:0 24px 80px;}

.crumb{padding:20px 0 4px;font-size:13px;color:var(--text-dim);}
.crumb a{color:var(--accent);}
.crumb span{margin:0 6px;opacity:.5;}

.hero{padding:56px 0 36px;}
.eyebrow{
  color:var(--text-dim);
  font-size:13px;letter-spacing:.06em;margin:0 0 12px;font-weight:600;
}
.hero h1{font-size:clamp(24px,3.6vw,34px);line-height:1.4;}
.hero-sub{color:var(--text-dim);max-width:600px;margin:16px 0 28px;font-size:15px;}
.hero-shot{
  width:70%;border-radius:var(--radius);border:1px solid var(--border);
}

.page-hero{padding:40px 0 16px;}
.page-hero h1{font-size:clamp(24px,3.4vw,30px);margin-top:6px;}
.back-link{
  display:inline-block;margin-top:14px;
  font-size:13px;color:var(--accent);
}
.back-link:hover{text-decoration:underline;}

.section{padding:36px 0;border-top:1px solid var(--border);}
.section-title{
  display:flex;align-items:center;gap:10px;font-size:19px;margin-bottom:6px;
}
.section-num{
  font-size:11px;font-weight:700;
  color:var(--text-dim);border:1px solid var(--border);padding:3px 8px;border-radius:6px;
}
.section-desc{color:var(--text-dim);font-size:14px;margin:6px 0 22px;max-width:600px;}

.menu-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.menu-card{
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 18px;
  display:flex;flex-direction:column;gap:5px;
  transition:.15s ease;
}
.menu-card:hover{border-color:var(--text);}
.menu-num{
  font-weight:700;font-size:12px;color:var(--text-dim);
}
.menu-name{font-size:17px;font-weight:700;}
.menu-desc{color:var(--text-dim);font-size:13px;line-height:1.55;flex:1;}
.menu-arrow{
  margin-top:8px;font-size:12px;color:var(--accent);font-weight:600;
}

.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.status-item{
  display:flex;gap:12px;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:12px;
}
.status-item img{width:36px;height:36px;object-fit:contain;background:var(--bg);border-radius:6px;padding:5px;}
.status-item b{display:block;font-size:13.5px;}
.status-item span{color:var(--text-dim);font-size:12px;}

.btn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.btn-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;}
.btn-card b{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:4px;}
.btn-card p{margin:0;color:var(--text-dim);font-size:12.5px;}
.btn-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;}
.btn-dot--red{background:var(--red);}
.btn-dot--blue{background:var(--blue);}
.btn-dot--green{background:var(--green);}
.btn-dot--yellow{background:var(--yellow);}

.chip-nav{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0 10px;position:sticky;top:65px;z-index:10;background:var(--bg);}
.chip{
  font-size:12.5px;
  background:var(--surface);border:1px solid var(--border);
  padding:6px 11px;border-radius:8px;color:var(--text-dim);
}
.chip:hover{color:var(--text);border-color:var(--text);}

.sub-list{display:flex;flex-direction:column;gap:14px;padding-top:10px;}
.sub-section{
  scroll-margin-top:110px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 24px 24px;
}
.sub-section--overview{
  background:var(--bg);
}
.sub-section h3{font-size:17px;margin-bottom:12px;}

.shot{display:grid;gap:8px;margin:12px 0;}
.shot--single{grid-template-columns:1fr;max-width:200px;}
.shot--pair{grid-template-columns:repeat(2,1fr);max-width:320px;}
.shot--grid{grid-template-columns:repeat(3,minmax(140px,1fr));max-width:620px;}
.shot img{
  width:100%;border-radius:8px;border:1px solid var(--border);background:var(--bg);
}

.aside{
  border-radius:8px;padding:12px 14px;margin:10px 0;font-size:14px;
  border-left:3px solid var(--green);background:var(--bg);
}
.aside p{margin:5px 0;}
.aside ul{margin:5px 0;padding-left:18px;}
.aside li{margin:2px 0;}
.aside a{color:var(--accent);}
.aside a:hover{text-decoration:underline;}
.aside--warn{border-left-color:var(--warn);}
.aside--warn a{color:var(--warn);}
.aside--link{border-left-color:var(--accent);}
.aside--list{border-left-color:var(--blue);}

.btn-badge{
  display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:8px 11px;margin:5px 0;font-size:13px;
}
.btn-badge b{font-size:12.5px;white-space:nowrap;}
.btn-badge--red b{color:var(--red);}
.btn-badge--blue b{color:var(--blue);}
.btn-badge--green b{color:var(--green);}
.btn-badge--yellow b{color:var(--yellow);}

.note{color:var(--text-dim);font-size:13px;}
.note a{color:var(--accent);}

.deep-link{
  display:inline-block;margin-top:12px;
  font-size:13px;color:var(--surface);background:var(--text);
  padding:8px 13px;border-radius:8px;font-weight:600;
}

.site-footer{
  text-align:center;color:var(--text-dim);font-size:12.5px;
  padding:32px 24px 56px;border-top:1px solid var(--border);margin-top:16px;
}

@media (max-width:760px){
  .menu-grid{grid-template-columns:repeat(2,1fr);}
  .top-nav{display:none;}
}
@media (max-width:520px){
  .menu-grid{grid-template-columns:1fr;}
  .shot--pair, .shot--grid{grid-template-columns:repeat(2,1fr);}
}

/* sitemap toggle */
.sitemap-toggle{margin-top:4px;}
.sitemap-toggle summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--text);
  background:var(--surface);border:1px solid var(--border);
  padding:10px 16px;border-radius:999px;
  user-select:none;
}
.sitemap-toggle summary::-webkit-details-marker{display:none;}
.sitemap-toggle summary::before{
  content:"▸";display:inline-block;color:var(--text-dim);
  transition:transform .15s ease;
}
.sitemap-toggle[open] summary::before{transform:rotate(90deg);}
.sitemap-toggle summary:hover{border-color:var(--text);}
.sitemap-toggle[open] summary{margin-bottom:20px;}

/* sitemap tree */
.sitemap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px;}
.map-branch{list-style:none;margin:0;padding:0;}
.map-branch li{margin:0;}
.map-branch a{
  display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:13.5px;color:var(--text);
}
.map-branch a:hover{color:var(--accent);}
.map-num{font-size:10.5px;color:var(--text-dim);min-width:30px;flex:none;font-variant-numeric:tabular-nums;}

.map-root{border-bottom:1px solid var(--border);margin-bottom:6px;padding-bottom:6px;}
.map-root a{font-weight:700;font-size:15px;}

.map-depth-1{padding-left:16px;border-left:2px solid var(--border);margin-left:2px;}
.map-depth-1 a{color:var(--text);}

.map-depth-2{padding-left:34px;border-left:2px solid var(--border);margin-left:2px;}
.map-depth-2 a{font-size:12px;color:var(--text-dim);padding:3px 0;}
.map-depth-2 .map-num{opacity:.6;}

@media (max-width:760px){
  .sitemap{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .sitemap{grid-template-columns:1fr;}
}

/* menu card icon */
/* .menu-icon{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:8px;border:1px solid var(--border);background:var(--bg);
  margin-bottom:10px;
} */
.menu-icon{
    width:60%;      /* 80%, 85%, 90% 등으로 조절 */
    height:60%;
    object-fit:contain;
}
/* nested sub-menu grouping */
.menu-group{
  margin:12px 0 6px 14px;
  padding:16px 16px 16px 20px;
  border-radius:10px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;
}
.menu-group--d2{
  background:#EEF0FF;
  border:1.5px solid #C7CCFA;
}
.menu-group--d3{
  background:#FFF4E0;
  border:1.5px solid #F4D89B;
  margin-left:14px;
}
.group-label{
  font-size:11px;font-weight:700;letter-spacing:.03em;
  display:inline-block;width:fit-content;
  padding:3px 9px;border-radius:999px;
  margin-bottom:-2px;
}
.group-label--d2{background:var(--accent);color:#fff;}
.group-label--d3{background:var(--warn);color:#fff;}

.sub-section--d1{}
.sub-section--d2{
  padding:14px 16px 16px;
  background:#FFFFFF;
  border:1px solid #C7CCFA;
}
.sub-section--d2 h3{font-size:14.5px;color:var(--accent);}
.sub-section--d3{
  padding:11px 14px 13px;
  background:#FFFFFF;
  border:1px solid #F4D89B;
  box-shadow:none;
}
.sub-section--d3 h3{font-size:13px;color:var(--warn);font-weight:700;}

.shot-item{
    text-align:center;
}

.shot-item img{
    width:100%;
    display:block;
}

.shot-item .note{
    margin-top:6px;
}