/* 하위 페이지 전용 — 메인(site.css) 언어 위에 얹는 부품들 */

/* 페이지 히어로 — 다크, 큰 제목 + 한 줄 소개 + 아래 빨간 밑줄 */
.phero{position:relative;padding:clamp(150px,18vh,210px) 0 clamp(64px,7vw,104px);overflow:hidden;
  background:radial-gradient(60% 70% at 85% 20%,rgba(237,64,54,.14),transparent 70%),var(--bg)}
.phero::after{content:"";position:absolute;inset:0;background:var(--hexbg);opacity:.55;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent)}
.phero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(40px,6vw,110px);align-items:end}
.phero h1{font-size:clamp(40px,5.6vw,84px);max-width:14ch;color:#fff}   /* 페이지가 라이트로 바뀌어도 히어로는 늘 다크 — 글자색 고정 */
.phero .lede{padding-bottom:.4em;color:var(--mute)}
.phero .pn{position:absolute;right:-1.4vw;top:clamp(96px,10vh,150px);font-size:clamp(110px,16vw,250px);font-weight:800;line-height:.76;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none}
@media(max-width:980px){.phero .wrap{grid-template-columns:1fr;row-gap:22px}.phero .lede{padding-bottom:0}}

/* 넓은 사진 띠 */
.photo{margin:0;line-height:0;background:#111}
.photo img{width:100%;height:clamp(220px,28vw,420px);object-fit:cover;display:block;filter:saturate(.9)}

/* 카드 태그 줄 */
.card .tags{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;color:var(--dim)}
.card .tags li::before{content:"";display:inline-block;width:8px;height:9.2px;margin-right:6px;background:var(--hexo-dim) center/contain no-repeat;vertical-align:-1px}
.lightsec .card .tags{color:#6b6b78}

/* 사파리: 이미지 든 격자의 1fr 칸은 최소폭이 이미지 원본 폭이 되어 아이폰에서 페이지가 옆으로 벌어진다(site.css .post 와 같은 처방) */
.two>*,.collage>*,.feat>*,.docs>*,.works>*{min-width:0}

/* 두 칸 글 + 사진 콜라주 */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.two .txt h3{font-size:clamp(22px,2.1vw,30px);margin:0 0 14px;letter-spacing:-.03em}
.two .txt p{margin:0 0 30px;font-size:clamp(15px,1.1vw,17px);line-height:1.82;word-break:keep-all;color:var(--mute)}
.lightsec .two .txt p{color:#5a5a68}
.collage{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:auto auto;gap:14px}
.collage img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.collage img:first-child{grid-row:1/3;min-height:360px}

/* 성과 수치 5칸 */
.stats.s5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.stats.s5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.stats.s5{grid-template-columns:1fr 1fr}}
.stats.s5 .n{font-size:clamp(30px,3vw,44px)}

/* 대표 성과 — 사진 + 수치 + 과업, 행마다 좌우 교대 */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;padding:clamp(40px,4.5vw,72px) 0;border-top:1px solid var(--line)}
.feat:first-child{border-top:0;padding-top:0}
.feat:nth-child(even) .pic{order:2}
@media(max-width:900px){.feat{grid-template-columns:1fr}.feat:nth-child(even) .pic{order:0}}
.feat .pic{margin:0;line-height:0;background:#141019;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.feat .pic img{width:100%;aspect-ratio:892/544;object-fit:cover;display:block}
.feat h3{font-size:clamp(21px,2vw,29px);line-height:1.35;letter-spacing:-.03em;word-break:keep-all;margin:0 0 26px}
.feat h3 b{color:#fff;font-weight:700}
.kpis{display:flex;gap:clamp(22px,3vw,44px);margin:0 0 26px;padding:0;list-style:none}
.kpis b{display:block;font-size:clamp(30px,3vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff}
.kpis b small{font-size:.5em;font-weight:600;letter-spacing:0;margin-left:2px}
.kpis span{display:block;margin-top:8px;font-size:13px;color:var(--dim)}
.feat .tags{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.feat .tags li{font-size:12.5px;padding:6px 11px;border:1px solid var(--line);color:var(--mute);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}

/* 함께한 의료진 */
.docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media(max-width:1100px){.docs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.docs{grid-template-columns:1fr}}
.doc{--bxline:var(--line);--bxfill:var(--card);--c:26px;position:relative;overflow:hidden}
.doc img{width:100%;aspect-ratio:361/480;object-fit:cover;display:block;filter:saturate(.85)}
.doc .who{padding:18px 20px 22px}
.doc .who small{display:block;font-size:12.5px;color:var(--dim);margin-bottom:4px}
.doc .who b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.doc .who p{margin:0;font-size:14px;line-height:1.7;color:var(--mute);word-break:keep-all}

/* 포트폴리오 2열 (draftx 방식) */
.filt{display:flex;gap:clamp(14px,2vw,30px);padding:0 0 26px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--dim)}
.filt button{background:none;border:0;padding:6px 0;font:inherit;color:inherit;cursor:pointer;position:relative}
.filt button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.filt button.on{color:#fff}.filt button.on::after{transform:scaleX(1)}
.works{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.4vw,36px)}
@media(max-width:760px){.works{grid-template-columns:1fr}}
.wk{display:block;text-decoration:none;color:inherit;padding:clamp(26px,3vw,44px) 0 clamp(28px,3.2vw,50px);border-bottom:1px solid var(--line)}
.wk.hide{display:none}
.wk .lab{display:grid;gap:8px;margin-bottom:18px}
.wk .tl{display:flex;align-items:center;gap:8px;font-size:clamp(12px,.9vw,13.5px);color:var(--dim)}
.wk .tl i{width:11px;height:12.7px;background:var(--hexo) center/contain no-repeat;flex:none}
.wk .tl::before{content:"{ ";color:var(--mute)}.wk .tl::after{content:" }";color:var(--mute)}
.wk .who{font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.wk .en{font-size:11.5px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.wk figure{margin:0;aspect-ratio:16/12;overflow:hidden;background:#141019;clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}
.wk img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s var(--ease);filter:saturate(.9)}
.wk:hover img{transform:scale(1.04);filter:saturate(1)}
.wk:hover .who{text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:6px;text-decoration-thickness:2px}

/* 프로젝트 의뢰 */
.ctgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,90px);align-items:start}
@media(max-width:900px){.ctgrid{grid-template-columns:1fr}}
.ctinfo dl{margin:0;display:grid;gap:22px}
.ctinfo dt{font-size:12px;letter-spacing:.12em;color:var(--dim);margin-bottom:6px}
.ctinfo dd{margin:0;font-size:clamp(17px,1.4vw,21px);font-weight:500;letter-spacing:-.02em}
.ctinfo dd a{color:inherit;text-decoration:none}
.ctinfo dd a:hover{text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:5px}
.form{--bxline:var(--line);--bxfill:var(--card);--c:34px;padding:clamp(26px,2.8vw,40px)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.form label{display:block;margin-bottom:16px;font-size:13px;color:var(--mute)}
.form label span{display:block;margin-bottom:7px}
.form input,.form select,.form textarea{width:100%;height:50px;padding:0 14px;border:1px solid rgba(255,255,255,.14);background:#fff;color:#17171c;font:inherit;font-size:15px;border-radius:0}   /* 흰 바탕 — 반투명이면 뒤의 벌집 무늬가 비친다(2026-09-14 대표 지적) */
.form ::placeholder{color:#8a8797}
.form textarea{height:150px;padding:13px 14px;resize:vertical}
.form select option{color:#111}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--acc2)}
.form .agree{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--dim);margin:6px 0 22px}
.form .agree input{width:16px;height:16px;margin:2px 0 0}
.form .note{font-size:13px;color:var(--dim);margin:14px 0 0;min-height:1.4em}

/* 인사이트 빈 상태 */
.empty{padding:clamp(40px,5vw,72px) 0;border-top:1px solid rgba(0,0,0,.09);color:#5a5a68;font-size:15px;line-height:1.8}

/* 컨설팅 사례 — 제목은 왼쪽에 고정(sticky), 오른쪽 연대기만 흐른다 */
.hist{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,6vw,110px);align-items:start}
.hist .head.stick{display:block;position:sticky;top:110px;margin:0}
.hist .head.stick h2{max-width:none}
.hist .head.stick .lede{margin-top:22px;padding:0}
@media(max-width:980px){.hist{grid-template-columns:1fr}.hist .head.stick{position:static;margin-bottom:34px}}
/* 세로 연대기. 왼쪽 큰 연도 + 세로 축, 한 해의 병원은 옆으로 나란히 */
.chrono{position:relative;border-top:1px solid rgba(0,0,0,.1)}
.chrono::before{content:"";position:absolute;left:clamp(80px,7vw,120px);top:0;bottom:0;width:1px;background:rgba(0,0,0,.1)}
.era{display:grid;grid-template-columns:clamp(80px,7vw,120px) 1fr;align-items:start;padding:30px 0;border-bottom:1px solid rgba(0,0,0,.1);position:relative}
.era .y{font-size:clamp(26px,2.6vw,38px);font-weight:800;letter-spacing:-.05em;line-height:1;position:relative}
.era .y::after{content:"";position:absolute;right:-7px;top:.28em;width:13px;height:15px;transform:translateX(50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpolygon points='50,4 96,30.5 96,85.5 50,112 4,85.5 4,30.5' fill='%23D9362E'/%3E%3C/svg%3E") center/contain no-repeat}
.era:first-child .y{color:var(--pt)}
.era .body{padding-left:clamp(24px,3vw,44px);padding-right:60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px 28px}
.era .body b{display:block;font-size:clamp(16px,1.3vw,19px);font-weight:600;letter-spacing:-.02em;color:#17171c}
.era .body span{display:block;margin-top:4px;font-size:13px;line-height:1.55;color:#6b6b78;word-break:keep-all}
.era .ct{position:absolute;right:0;top:32px;font-size:12px;font-weight:600;letter-spacing:.08em;color:#8a8797}
@media(max-width:640px){.era{grid-template-columns:1fr;gap:12px}.chrono::before{display:none}.era .y::after{display:none}.era .body{padding:0}.era .ct{top:30px}}

/* 인사이트 글 — 칼럼 본문 타이포 */
.post-hero .wrap{display:block}
.post-hero h1{max-width:20ch;font-size:clamp(30px,4.2vw,62px);line-height:1.15;letter-spacing:-.04em;text-wrap:balance;word-break:keep-all}
.post-hero .kind{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:0 0 18px;font-size:13.5px;font-weight:600;letter-spacing:.06em;color:var(--mute)}
.post-hero .kind i{width:11px;height:12.7px;background:var(--hexo) center/contain no-repeat}
.article{max-width:760px;margin:0 auto;color:#2a2a33;font-size:clamp(16px,1.15vw,17.5px);line-height:1.9;word-break:keep-all}
.article .cover{margin:0 0 clamp(36px,4vw,56px);line-height:0}
.article .cover img{width:100%;max-height:520px;object-fit:cover;display:block;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.article h2{font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.03em;color:#17171c;margin:clamp(40px,4.4vw,60px) 0 14px}
.article h3{font-size:clamp(18px,1.6vw,22px);line-height:1.4;letter-spacing:-.025em;color:#17171c;margin:34px 0 10px;padding-left:16px;border-left:3px solid var(--pt)}
.article h2:first-child,.article .cover+h2{margin-top:0}
.article p{margin:0 0 1.1em}
.article strong{color:#17171c;font-weight:700}
.article figure{margin:28px 0;line-height:0;background:#eee}
.article figure img{width:100%;display:block;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.article figure+figure{margin-top:-14px}
.article ul,.article ol{padding-left:1.3em;margin:0 0 1.2em}
.article li{margin:.3em 0}
.article a{color:var(--pt);text-decoration:underline;text-underline-offset:4px}
.article .src{margin-top:34px;padding-top:18px;border-top:1px solid rgba(0,0,0,.1);font-size:13.5px;color:#6b6b78}
.buy{margin:34px 0 0;padding:22px 24px;background:#fff;border:1px solid rgba(0,0,0,.1);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.buy span{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:#8a8797;margin-right:6px}
.buy a{font-size:14.5px;font-weight:600;color:#17171c;text-decoration:none;padding:9px 14px;border:1px solid rgba(0,0,0,.14);transition:border-color .3s,color .3s}
.buy a:hover{border-color:var(--pt);color:var(--pt)}
.pn{max-width:760px;margin:clamp(48px,5vw,72px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid rgba(0,0,0,.1);padding-top:22px}
.pn a{text-decoration:none;color:#17171c;font-size:15px;font-weight:600;line-height:1.45;word-break:keep-all}
.pn a small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:#8a8797;margin-bottom:6px}
.pn a.next{text-align:right}
.pn a:hover{color:var(--pt)}
@media(max-width:600px){.pn{grid-template-columns:1fr}.pn a.next{text-align:left}}
.back{max-width:760px;margin:28px auto 0;font-size:14px}
.back a{color:#6b6b78;text-decoration:none}
.back a:hover{color:var(--pt)}

/* 인사이트 목록 — 카드뉴스(정사각) 썸네일은 자르지 않고 담는다 */
.post .thumb.fit{background:#ece9f1}
.post .thumb.fit img{object-fit:contain}

/* 인사이트 '준비 중' 카드 — 실제 글 6편 + 3장으로 3행을 채움 */
.post.soon{cursor:default}
.post.soon .thumb{background:#ece9f1 var(--hexbgd);background-size:auto,28px}
.post.soon h3{color:#6b6b78}.post.soon .tag{color:#8a8a96}

/* 포트폴리오 상세 — 디자인 보드: 잘라 올린 슬라이스를 틈 없이 이어 한 장처럼. 흰 보드가 많아 연한 배경 위에 얇은 테두리 */
.post-hero .kind .en{font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.board{max-width:1200px;margin:clamp(40px,5vw,72px) auto 0;line-height:0;background:#fff;border:1px solid rgba(0,0,0,.07);clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}
.board img{width:100%;height:auto;display:block}
.cover.wide{max-width:1200px;margin:0 auto clamp(36px,4vw,56px);line-height:0}
.cover.wide img{width:100%;max-height:560px;object-fit:cover;display:block;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.article:empty{display:none}