/* 개편 인사이트 목록·글 — 시안 lab/common/insight.css 그대로(바꾸면 두 곳). 공통 틀(base.css) 위에 이 두 페이지만의 모양 */

/* ── 목록 1. 첫 화면: 업무 장면 영상이 한 번 빠르게 넘어가고, 그 위로 실제 글 제목이 서로 반대 방향으로 흐름 ── */
.ih{position:relative;height:82vh;min-height:560px;overflow:hidden;background:var(--ink)}
.ih-media{position:absolute;inset:0;will-change:transform}
.ih-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.ih-media video.on{opacity:1}
.ih-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,16,.62) 0%,rgba(11,12,16,.45) 40%,rgba(11,12,16,.88) 100%)}
.ih-rows{position:absolute;inset:14% 0 50%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.ih-row{display:flex;gap:0;white-space:nowrap;font-size:clamp(18px,1.7vw,26px);font-weight:600;letter-spacing:-.03em;color:rgba(245,244,240,.16);will-change:transform}
.ih-row span{display:inline-block;padding-right:56px}
.ih-row span::after{content:"/";margin-left:56px;color:rgba(245,244,240,.18);font-weight:400}
.ih-row .n{color:rgba(217,197,154,.6);font-weight:700}
.ih-type{position:absolute;left:40px;right:40px;bottom:9vh;display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.ih-type .mono{color:var(--mute);display:block;margin-bottom:22px}
.ih-t{font-size:clamp(52px,7.6vw,132px);font-weight:700;letter-spacing:-.06em;line-height:.98}
.ih-sub{font-size:16px;line-height:1.7;color:rgba(245,244,240,.8);max-width:300px;text-align:right}
.ih-meta{position:absolute;left:40px;right:40px;bottom:3vh;display:flex;justify-content:space-between;color:var(--mute)}

/* ── 목록 2. 맨 위 글 하나 크게 ── */
.feat{padding:16vh 0 12vh}
.feat-h{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}
.feat-h .mono{opacity:.6}
.feat-a{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:end}
.feat-pic{position:relative;overflow:hidden;aspect-ratio:1200/630;clip-path:inset(100% 0 0 0);background:#cfcdc6}
.feat-pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.feat-a:hover .feat-pic img{transform:scale(1.04)}
.feat-meta{display:flex;gap:18px;opacity:.65;margin-bottom:22px}
.feat-t{font-size:clamp(30px,3.1vw,52px);font-weight:700;letter-spacing:-.05em;line-height:1.12}
.feat-t small{display:block;font-size:.5em;font-weight:500;letter-spacing:-.03em;line-height:1.4;margin-top:14px;opacity:.75}
.feat-s{font-size:16px;line-height:1.75;margin-top:22px;max-width:520px}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font-weight:600;font-size:15px;border-bottom:1px solid currentColor;padding-bottom:4px}
.more svg{width:16px;height:16px;transition:transform .35s}
.more:hover svg{transform:translateX(5px)}

/* ── 목록 3. 글 목록: 줄 목록 + 분류 글자 탭(밑줄) ── */
.lst{padding:4vh 0 18vh}
.lst-h{display:flex;justify-content:space-between;align-items:end;gap:30px;border-bottom:1px solid currentColor;padding-bottom:18px}
.lst-h .mono{opacity:.6}
.tabs{display:flex;gap:30px;flex-wrap:wrap}
.tabs button{position:relative;background:none;border:0;color:inherit;font:inherit;font-size:15px;font-weight:600;padding:6px 0;cursor:pointer;opacity:.45;transition:opacity .3s}
.tabs button sup{font-family:var(--mono);font-size:10px;margin-left:4px;font-weight:500}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.tabs button.on{opacity:1}
.tabs button.on::after{transform:scaleX(1);transform-origin:left}
.tabs button:hover{opacity:1}
.irs{margin:0 -16px}
.ir{position:relative;display:grid;grid-template-columns:110px 150px minmax(0,1fr) 40px;gap:24px;align-items:center;padding:26px 16px;border-bottom:1px solid var(--line-d);overflow:hidden;isolation:isolate;transition:color .45s}
.ir::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.7,0,.2,1);z-index:-1}
.ir .d,.ir .c{opacity:.6}
.ir .c small{display:block;font-size:.85em;margin-top:2px}
.ir .tt{font-size:clamp(20px,1.75vw,28px);font-weight:700;letter-spacing:-.04em;line-height:1.3;max-width:44vw;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.ir .tt small{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em;margin-top:6px;opacity:.6}
.ir .th{display:none}
.ir .ar{justify-self:end;width:18px;height:18px;opacity:.5;transition:transform .45s,opacity .3s}
.ir.gone{display:none}
@media (hover:hover){
  .ir.on{color:var(--white)}
  .ir.on::before{transform:scaleY(1);transform-origin:bottom}
  .ir.on .tt{transform:translateX(16px)}
  .ir.on .ar{opacity:1;transform:translateX(-6px)}
}
/* 올린 줄의 썸네일: 제목을 가리지 않게 오른쪽 빈자리에서 마우스 높이만 따라옴 */
.ithumb{position:fixed;left:0;top:0;width:min(24vw,340px);aspect-ratio:1200/630;z-index:60;pointer-events:none;overflow:hidden;clip-path:inset(50% 0 50% 0);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.ithumb.on{clip-path:inset(0 0 0 0)}
.ithumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.ithumb img.on{opacity:1}
.lst-empty{padding:40px 0;opacity:.6;display:none}

/* ── 글 상세 ── */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:96;background:#fff;mix-blend-mode:difference;transform:scaleX(0);transform-origin:left;pointer-events:none}
.dh{padding:150px 0 9vh}
.back{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;opacity:.75;transition:opacity .3s}
.back:hover{opacity:1}
.back svg{width:16px;height:16px;transition:transform .35s}
.back:hover svg{transform:translateX(-4px)}
.dh-meta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--mute);margin:56px 0 26px}
.dh-meta b{color:var(--butter);font-weight:500}
.dh-t{font-size:clamp(38px,4.9vw,84px);font-weight:700;letter-spacing:-.055em;line-height:1.06;max-width:1180px}
.dh-st{font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.03em;line-height:1.45;color:rgba(245,244,240,.72);margin-top:24px;max-width:860px}
.dh-pic{margin-top:9vh;position:relative;overflow:hidden;aspect-ratio:1200/630;max-height:78vh;clip-path:inset(0 0 100% 0)}
.dh-pic img{width:100%;height:100%;object-fit:cover}
.read{padding:12vh 0 14vh;display:grid;grid-template-columns:1fr minmax(0,680px) 1fr;gap:40px}
.toc{position:sticky;top:110px;align-self:start;max-width:230px}
.toc .mono{display:block;opacity:.55;margin-bottom:14px}
.toc a{display:block;font-size:13px;line-height:1.45;padding:7px 0 7px 14px;border-left:1px solid var(--line-d);opacity:.5;transition:opacity .3s,border-color .3s}
.toc a.on{opacity:1;border-left-color:currentColor}
.lead{font-size:19px;line-height:1.8;font-weight:500;letter-spacing:-.02em;padding-bottom:36px;margin-bottom:44px;border-bottom:1px solid var(--line-d)}
.art{font-size:17px;line-height:1.9;letter-spacing:-.01em}
.art p{margin:0 0 1.4em}
.art h2{font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1.3;margin:2.4em 0 .9em;padding-top:.9em;border-top:1px solid var(--line-d);scroll-margin-top:100px}
.art h3{font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.4;margin:1.8em 0 .6em}
.art strong{font-weight:700}
.art a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;word-break:break-all}
.art ul,.art ol{margin:0 0 1.4em 1.2em}
.art li{margin:.35em 0;padding-left:.2em}
.art ul li::marker{content:"— ";color:var(--navy)}
.art figure{margin:2.2em 0}
.art figure img{width:100%;height:auto;border:1px solid var(--line-d)}
.art figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.02em;line-height:1.6;opacity:.6;margin-top:10px}
.art table{width:100%;border-collapse:collapse;margin:1.6em 0 2em;font-size:14px;line-height:1.6;display:block;overflow-x:auto}
.art th{background:var(--navy);color:#fff;font-weight:700;text-align:left;padding:10px 12px;white-space:nowrap}
.art td{padding:10px 12px;border-bottom:1px solid var(--line-d);vertical-align:top}
.art blockquote{border-left:2px solid var(--navy);padding:4px 0 4px 20px;margin:1.6em 0;font-weight:500}
.art pre{background:var(--ink);color:var(--white);padding:18px 20px;font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre-wrap;margin:1.6em 0}
.art code{font-family:var(--mono);font-size:.88em}
.art .ins-callout{background:#F8F7F4;border-top:2px solid var(--navy);padding:22px 24px 6px;margin:2em 0}
.art .ins-checklist{border:1px solid var(--line-d);padding:22px 24px 6px;margin:2em 0}
.art ul.ins-checklist{list-style:none;margin-left:0}
.art ul.ins-checklist li::marker{content:none}
.art ul.ins-checklist li{padding-left:0}
.rel{padding:14vh 0 8vh}
.rel-h{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}
.rel-h .mono{color:var(--mute)}
.rel-g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.rc{display:block}
.rc .pic{overflow:hidden;aspect-ratio:1200/630;clip-path:inset(100% 0 0 0)}
.rc .pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rc:hover .pic img{transform:scale(1.06)}
.rc .m{display:flex;gap:14px;color:var(--mute);margin:18px 0 10px}
.rc b{display:block;font-size:20px;font-weight:700;letter-spacing:-.04em;line-height:1.35}

@media (max-width:860px){
  .ih{height:86vh}
  .ih-type{left:20px;right:20px;grid-template-columns:1fr;gap:18px;bottom:12vh}
  .ih-sub{text-align:left;font-size:15px}
  .ih-meta{left:20px;right:20px}
  .ih-meta span:nth-child(2){display:none}
  .ih-row span{padding-right:36px}.ih-row span::after{margin-left:36px}
  .feat{padding:11vh 0 8vh}
  .feat-a{grid-template-columns:1fr;gap:26px}
  .feat-t{font-size:28px}
  .lst-h{flex-direction:column;align-items:flex-start}
  .tabs{gap:18px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{font-size:14px;white-space:nowrap;flex:none}
  .lst-h .tabs{margin-right:-20px;padding-right:20px}
  .irs{margin:0}
  .ir{grid-template-columns:96px minmax(0,1fr);gap:6px 16px;padding:18px 0}
  .ir .th{display:block;grid-row:1/4;width:96px;aspect-ratio:1200/630;overflow:hidden}
  .ir .th img{width:100%;height:100%;object-fit:cover}
  .ir .d{grid-column:2;grid-row:1}.ir .c{display:none}
  .ir .tt{grid-column:2;font-size:17px;max-width:none}
  .ir .tt small{display:none}
  .ir .ar{display:none}
  .ithumb{display:none}
  .dh{padding:110px 0 7vh}
  .dh-meta{margin:36px 0 20px}
  .read{grid-template-columns:1fr;padding:8vh 0 10vh}
  .toc,.read > .sp{display:none}
  .lead{font-size:17px}
  .art{font-size:16px;line-height:1.85}
  .art h2{font-size:23px}
  .rel-g{grid-template-columns:1fr;gap:36px}
}

/* 서비스별 작은 탭(콘텐츠별 전략일 때만) · 인애드 일상 사진첩 · 크게 보기 — 2026-11-09 대표 1-1·2-1 */
.subtabs{gap:22px;padding:14px 0 12px;border-bottom:1px solid var(--line-d)}
.subtabs button{font-size:13.5px}
.subtabs[hidden],.irs[hidden],.gal[hidden],.lb[hidden]{display:none}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 20px;padding-top:36px}
.gc{display:block;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.gc .ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#d6d4cd}
.gc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gc:hover .ph img{transform:scale(1.05)}
.gc .n{position:absolute;right:12px;bottom:12px;background:var(--ink);color:var(--white);font-size:10.5px;padding:4px 8px}
.gc .d{display:block;margin-top:14px;font-size:11px;opacity:.6}
.gc b{display:block;margin-top:6px;font-size:18px;font-weight:700;letter-spacing:-.03em}
.lb{position:fixed;inset:0;z-index:200;background:rgba(11,12,16,.94);color:var(--white);display:flex;align-items:center;justify-content:center}
.lb-in{width:min(1100px,100% - 48px);height:min(88vh,860px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px}
.lb-top{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.lb-top button,.lb-nav button{background:none;border:1px solid rgba(245,244,240,.4);color:inherit;font:inherit;cursor:pointer}
.lb-top button{font-family:var(--sans,inherit);font-size:13px;font-weight:600;padding:7px 14px}
.lb-pic{display:flex;align-items:center;justify-content:center;min-height:0}
.lb-pic img{max-width:100%;max-height:100%;object-fit:contain}
.lb-bot{display:flex;justify-content:space-between;align-items:end;gap:20px}
.lb-bot .mono{display:block;font-size:11px;opacity:.6;margin-bottom:6px}
.lb-bot b{font-size:18px;font-weight:700;letter-spacing:-.03em}
.lb-nav{display:flex;gap:8px}
.lb-nav button{width:52px;height:44px;font-size:18px;transition:background .3s,color .3s}
.lb-nav button:hover,.lb-top button:hover{background:var(--white);color:var(--ink)}
@media (max-width:860px){
  .subtabs{gap:14px;overflow-x:auto;flex-wrap:nowrap}
  .subtabs button{white-space:nowrap;flex:none;font-size:13px}
  .gal{grid-template-columns:1fr 1fr;gap:24px 12px}
  .gc b{font-size:15px}
  .lb-in{width:calc(100% - 32px);height:84vh}
}

/* 목록 모양: 썸네일 갤러리형(2026-11-09 대표 A안, .v-grid 3열 카드). 휴대폰은 썸네일 왼쪽 줄 목록 */
.ir .sm{display:none}
@media (min-width:861px){
  .irs.v-grid{margin:0}
  .irs.v-grid .ir::before{display:none}
  .irs.v-grid .ir.on{color:inherit}
  .irs.v-grid .ir.on .tt{transform:none}
  .irs.v-grid .ir .th img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .irs.v-grid .ir:hover .th img{transform:scale(1.05)}
  .irs.v-grid .ir:hover .tt{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
  .irs.v-grid .ir .sm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.6;opacity:.7}
  .irs.v-grid .ir .ar{display:none}
  .irs.v-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 24px;padding-top:44px}
  .irs.v-grid .ir.gone{display:none}
  .irs.v-grid .ir{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:0;border:0;gap:0}
  .irs.v-grid .ir .th,.irs.v-grid .ir .tt,.irs.v-grid .ir .sm{align-self:stretch}
  .irs.v-grid .ir .th{display:block;order:0;aspect-ratio:1200/630;overflow:hidden;background:#d6d4cd;margin-bottom:18px}
  .irs.v-grid .ir .c{order:1;font-size:11px}
  .irs.v-grid .ir .c small{display:inline;margin:0 0 0 8px}
  .irs.v-grid .ir .tt{order:2;margin-top:8px;font-size:21px;max-width:none}
  .irs.v-grid .ir .tt small{font-size:13.5px}
  .irs.v-grid .ir .sm{order:3;margin-top:10px}
  .irs.v-grid .ir .d{order:4;margin-top:14px;font-size:11px}
}

/* 운영 이식 때 더한 것(2026-11-09): 본문 명령문 상자 '복사' 버튼, 썸네일 없는 글 자리 */
.art pre{position:relative}
.art .ins-copy-btn{position:absolute;top:10px;right:10px;background:var(--paper);color:var(--ink);border:1px solid var(--line-d);font:inherit;font-size:12px;font-weight:600;padding:5px 10px;cursor:pointer}
.art .ins-copy-btn.done{background:var(--ink);color:var(--white)}
.ir .th:empty,.feat-pic:empty,.rc .pic:empty{background:#d6d4cd}