/* 페이지 넘김 구조(요약·이력 → 목차 → 프로젝트별 페이지 → 연락처)와 움직이는 흐름도 */
body{padding-bottom:76px;}
.print-only{display:none;}
.page .shell{padding-top:22px;padding-bottom:40px;}
.page.is-on{animation:pagein .28s ease both;}
@keyframes pagein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 상단 바 */
.topbar-name{color:var(--ink);}
.topbar-name:hover{text-decoration:none;color:var(--accent);}
.topbar-page{flex:1;text-align:center;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
a.print-btn{display:inline-block;text-decoration:none;}

/* 첫 페이지 CTA */
.hero-cta{margin:18px 0 0!important;}
.cta{display:inline-flex;align-items:center;gap:4px;padding:9px 18px;border-radius:999px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;transition:transform .15s,box-shadow .15s;}
.cta:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 16px rgba(47,75,158,.25);}

/* 목차 페이지 */
.toc-h{font-size:24px;font-weight:900;margin:48px 0 8px;letter-spacing:-.3px;}
.toc-lead{margin:0 0 26px;color:var(--ink-soft);font-size:14px;max-width:62ch;}
.toc-group{font-size:13px;font-weight:700;margin:30px 0 4px;padding-left:10px;border-left:3px solid var(--accent);}
.toc-list{list-style:none;margin:0;padding:0;}
.toc-row{display:grid;grid-template-columns:132px 1fr auto;gap:18px;align-items:center;padding:14px 10px;border-bottom:1px solid var(--line);color:var(--ink);border-radius:10px;transition:background .15s;}
.toc-row:hover{background:var(--accent-soft);text-decoration:none;}
.toc-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.toc-thumb{display:block;width:132px;height:84px;border-radius:10px;overflow:hidden;background:#eef0f6;border:1px solid var(--line);}
.toc-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:0;transition:transform .25s;}
.toc-row:hover .toc-thumb img{transform:scale(1.05);}
.toc-main{display:flex;flex-direction:column;gap:4px;min-width:0;}
.toc-title{font-size:16px;font-weight:800;line-height:1.35;}
.toc-row:hover .toc-title{color:var(--accent);}
.toc-sum{font-size:12.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:64ch;}
.toc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px;}
.toc-period{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;align-self:start;padding-top:3px;}
.toc-foot{display:flex;justify-content:space-between;margin:26px 0 0;font-size:13.5px;font-weight:600;}

/* 하단 이전·다음 */
.pager{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px max(16px,calc((100vw - 920px)/2 + 24px)) calc(10px + env(safe-area-inset-bottom));background:rgba(250,249,247,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line);}
.pg-btn{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:34%;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s;}
.pg-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft);}
.pg-btn:disabled{opacity:.35;cursor:default;}
.pg-btn:focus-visible,.toc-fab:focus-visible,.pg-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pg-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pg-dots{display:flex;gap:6px;align-items:center;}
.pg-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#cfd3dd;cursor:pointer;transition:width .2s,background .2s;}
.pg-dot:hover{background:#9aa3b8;}
.pg-dot[aria-current="page"]{width:22px;background:var(--accent);}

/* 플로팅 목차 */
.toc-fab{position:fixed;right:max(16px,calc((100vw - 920px)/2 + 8px));bottom:calc(76px + env(safe-area-inset-bottom));z-index:21;padding:10px 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(28,32,41,.28);transition:transform .15s,background .15s;}
.toc-fab:hover{background:var(--accent);transform:translateY(-1px);}
.toc-pop{position:fixed;right:max(16px,calc((100vw - 920px)/2 + 8px));bottom:calc(126px + env(safe-area-inset-bottom));z-index:22;width:min(340px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;padding:8px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 18px 44px rgba(28,32,41,.2);}
.toc-pop:not([hidden]){animation:pagein .18s ease both;}
.toc-pop .pp-group{margin:10px 10px 4px;font-size:11.5px;font-weight:700;color:var(--muted);}
.toc-pop a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);font-size:14px;font-weight:600;}
.toc-pop a small{font-weight:500;color:var(--muted);font-size:11.5px;white-space:nowrap;}
.toc-pop a:hover{background:var(--accent-soft);text-decoration:none;}
.toc-pop a[aria-current="page"]{background:var(--accent);color:#fff;}
.toc-pop a[aria-current="page"] small{color:#dbe4ff;}

/* 움직이는 흐름도 */
.scenes{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:18px;}
.scene-fig{margin:0;}
.scene-host{position:relative;border-radius:16px;overflow:hidden;line-height:0;}
.scene{display:block;width:100%;height:auto;font-family:inherit;}
.scene text{font-family:inherit;}
.scene-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:8px;}
.scene-replay{flex:none;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-soft);font:inherit;font-size:11.5px;line-height:1.4;cursor:pointer;}
.scene-replay:hover{border-color:var(--accent);color:var(--accent);}
.scene-fig figcaption{font-size:12px;color:var(--muted);line-height:1.55;max-width:80ch;}

@media (max-width:720px){
  .topbar-page{display:none;}
  .toc-row{grid-template-columns:84px 1fr;gap:12px;}
  .toc-thumb{width:84px;height:60px;}
  .toc-period{grid-column:2;padding-top:0;}
  .pg-btn .pg-lbl{display:none;}
  .pg-btn{padding:8px 16px;}
  .pg-dots{gap:4px;}
  .pg-dot{width:6px;height:6px;}
  .pg-dot[aria-current="page"]{width:16px;}
}
@media (prefers-reduced-motion:reduce){
  .page.is-on,.toc-pop:not([hidden]){animation:none;}
}

/* 인쇄: 모든 페이지를 이어서 출력하고 탐색 요소는 숨김 */
@media print{
  body{padding-bottom:0;}
  .page[hidden]{display:block!important;}
  .page .shell{padding-bottom:0;}
  .print-only{display:block!important;}
  .project-media.print-only{display:grid!important;}
  .scenes{display:none!important;}
  .page .shell{padding-top:0;}
  .group-label.dup{display:none;}
  .page.is-on{animation:none;}
}

/* 폰 데모가 있는 페이지: 데모는 왼쪽, 설명은 오른쪽, 큰 이미지는 그 아래 2단으로 쌓기 */
.card-body:has(.demo--phone){grid-template-columns:340px minmax(0,1fr);column-gap:28px;align-items:start;}
.card-body:has(.demo--phone) .demo{order:1;grid-column:1;grid-row:1;}
.card-body:has(.demo--phone) .facts{order:2;grid-column:2;grid-row:1;}
.card-body:has(.demo--phone) .project-media{order:3;grid-column:1/-1;grid-row:2;margin-top:8px;}

/* 데모 틀과 캡션은 왼쪽, 대표 화면 4장은 데모·설명 아래 가로 한 줄 (화면에서만) */
@media screen{
  .card-body:has(.demo--phone) .demo{display:contents;}
  .card-body:has(.demo--phone) .demo-frame{grid-column:1;grid-row:1 / 3;}
  .card-body:has(.demo--phone) .demo>figcaption{grid-column:2;grid-row:2;margin-top:0;padding-top:10px;border-top:1px solid var(--line);align-self:start;}
  .card-body:has(.demo--phone) .facts{grid-column:2;grid-row:1;}
  .card-body:has(.demo--phone) .story{grid-column:1 / -1;grid-row:3;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px;}
  .card-body:has(.demo--phone) .project-media{grid-row:4;}
}

/* 이미지 2단 적재 (화면에서만). 눌러서 크게 볼 수 있음 */
.card-body .project-media:not(.print-only){display:block;column-count:2;column-gap:16px;max-width:none;}
.card-body .project-media:not(.print-only) figure{break-inside:avoid;margin:0 0 16px;}
.card-body .project-media:not(.print-only) img{cursor:zoom-in;transition:box-shadow .15s;}
.card-body .project-media:not(.print-only) img:hover{box-shadow:0 6px 18px rgba(28,32,41,.16);}

.lightbox{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,22,30,.82);cursor:zoom-out;animation:pagein .15s ease both;}
.lightbox img{max-width:min(1200px,100%);max-height:100%;width:auto;height:auto;border-radius:12px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.lightbox button{position:absolute;right:18px;top:14px;padding:6px 14px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}

@media screen and (max-width:860px){
  .card-body:has(.demo--phone){grid-template-columns:1fr;}
  .card-body:has(.demo--phone) .demo-frame,.card-body:has(.demo--phone) .demo>figcaption,.card-body:has(.demo--phone) .facts,.card-body:has(.demo--phone) .story{grid-column:1;grid-row:auto;}
  .card-body:has(.demo--phone) .demo-frame{max-width:400px;width:100%;margin:0 auto;}
  .card-body:has(.demo--phone) .story{grid-template-columns:repeat(2,1fr);}
  .card-body:has(.demo--phone) .demo-frame{order:1;}
  .card-body:has(.demo--phone) .demo>figcaption{order:2;border-top:0;padding-top:0;}
  .card-body:has(.demo--phone) .facts{order:3;}
  .card-body:has(.demo--phone) .story{order:4;}
  .card-body:has(.demo--phone) .project-media{order:5;}
  .card-body:has(.demo--phone) .demo{grid-column:1;grid-row:auto;}
  .card-body:has(.demo--phone) .facts{grid-column:1;grid-row:auto;}
  .card-body:has(.demo--phone) .project-media{grid-column:1;grid-row:auto;}
}
@media screen and (max-width:620px){
  .card-body .project-media:not(.print-only){column-count:1;}
}
@media print{
  .card-body:has(.demo--phone) .project-media{order:0;}
  .card-body .project-media:not(.print-only){column-count:auto;display:grid;grid-template-columns:1fr;max-width:none;}
  .card-body .project-media:not(.print-only) figure{margin:0;}
  .card-body .project-media img{cursor:auto;box-shadow:none;}
}