/* 포트폴리오 상세(케이스 스터디) 공용 */
.case-hero{padding:168px 0 56px}
.case-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-soft);margin-bottom:28px;transition:color .2s}
.case-back:hover{color:var(--ink)}
.case-hero h1{font-size:clamp(44px,7.4vw,96px);font-weight:800;letter-spacing:-.05em;line-height:1.05;margin-top:18px}
.case-lead{margin-top:22px;max-width:680px;font-size:clamp(17px,2vw,21px);font-weight:500;color:var(--ink-mid);line-height:1.7}
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.case-meta dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.case-meta dd{margin-top:8px;font-size:16px;font-weight:600;line-height:1.5}
.case-meta dd a{color:var(--red)}
.case-cover{margin-top:56px;border-radius:var(--r-lg);overflow:hidden}
.case-cover .work-thumb.framed{aspect-ratio:16/9}
.case-cover .shot-frame{left:10%;right:22%;top:11%}
.case-cover .phone-frame{right:9%;top:26%;width:17%;border-radius:28px;padding:6px}
.case-cover .phone-frame img{border-radius:22px}
.case-cover .shot-bar{height:34px;padding:0 16px;gap:8px}
.case-cover .shot-bar i{width:9px;height:9px}

/* 본문 섹션 */
.case-sec{padding:96px 0}
.case-sec.tint{background:var(--panel)}
.case-head{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;margin-bottom:48px}
.case-no{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--red);padding-top:14px}
.case-head h2{font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.18}
.case-head p{margin-top:18px;max-width:640px;font-size:17px;color:var(--ink-mid);line-height:1.75}
.case-body{margin-left:232px}

/* 인용 — 고객 요청 */
.case-quote{background:var(--ink);color:var(--white);border-radius:var(--r-lg);padding:44px 48px}
.case-quote p{font-size:clamp(20px,2.6vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.5}
.case-quote span{display:block;margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.case-keys{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}

/* 3칸 요점 카드 */
.case-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.case-point{background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow);padding:28px}
.case-sec.tint .case-point{box-shadow:none}
.case-point .mono{font-size:12px;color:var(--red)}
.case-point h4{font-size:19px;font-weight:700;margin-top:10px;letter-spacing:-.02em}
.case-point p{margin-top:8px;font-size:15px;color:var(--ink-mid);line-height:1.65}

/* 이미지 보드 */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);background:var(--white);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile img{max-width:68%;max-height:68%;object-fit:contain}
.tile.fill img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.tile.wide{grid-column:span 2;aspect-ratio:2/1}
.tile figcaption,.tile .cap{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft)}
.board.new{grid-template-columns:repeat(5,1fr)}
.board.new .tile{background:var(--panel);transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.board.new .tile:hover{transform:translateY(-6px) rotate(-3deg)}
.board.new .tile img{max-width:62%;max-height:62%;filter:drop-shadow(0 14px 18px rgba(22,21,19,.12))}

/* 로고 → 방향 */
.logo-row{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:stretch}
.logo-card{border-radius:var(--r-lg);background:var(--white);display:flex;align-items:center;justify-content:center;padding:36px;box-shadow:var(--shadow)}
.logo-card img{max-width:78%}
.rule-list{display:grid;gap:14px}
.rule{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline;background:var(--white);border-radius:var(--r-md);padding:22px 26px;box-shadow:var(--shadow)}
.rule b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.rule span{font-size:15.5px;color:var(--ink-mid);line-height:1.65}

/* 컬러 */
.swatch-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.swatch-row.four{grid-template-columns:repeat(4,1fr)}
.swatch-row.three{grid-template-columns:repeat(3,1fr)}
.swatch{border-radius:var(--r-md);overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.swatch i{display:block;aspect-ratio:1/.72;background:var(--c)}
.swatch.el i{display:flex;align-items:center;justify-content:center}
.swatch.el i img{max-width:54%;max-height:64%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.14))}
.swatch div{padding:14px 16px 16px}
.swatch b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.swatch span{display:block;margin-top:3px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.swatch em{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--ink-mid);line-height:1.5}
.sub-h{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;margin:44px 0 16px}
.sub-h:first-child{margin-top:0}

/* 파운데이션 카드 */
.fd-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
.fd{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:32px}
.fd h4{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:22px;font-weight:500}
.fd-type .row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0}
.fd-type .row span{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);flex-shrink:0}
.fd-type .row b{letter-spacing:-.03em;line-height:1.25;color:#463A2E}
.fd-type .serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;letter-spacing:0}
.fd-shape{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fd-shape div{aspect-ratio:1/1;background:#FFE4F2;display:flex;align-items:flex-end;padding:10px;font-family:var(--mono);font-size:11px;color:#E0629F}
.fd-elev{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fd-elev div{background:#FFFCF5;border-radius:24px;padding:26px 18px;text-align:center;font-size:13.5px;font-weight:600;color:#463A2E}
.fd-elev div small{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;font-weight:400;color:#7B6C5B}
.fd-comp{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hd-btn{display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:700;transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.hd-btn:hover{transform:translateY(-4px) scale(1.04)}
.hd-btn.p{background:#FF4D94;color:#fff;box-shadow:0 8px 0 rgba(70,58,46,.14)}
.hd-btn.g{background:#fff;color:#463A2E;box-shadow:0 4px 0 rgba(70,58,46,.14)}
.hd-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:700}
.hd-card{background:#FFFEFB;border-radius:32px;box-shadow:0 18px 44px rgba(70,58,46,.10);padding:24px 22px;color:#463A2E;position:relative;margin-top:18px}
.hd-card img{position:absolute;right:-10px;top:-18px;width:64px}
.hd-card b{display:block;font-size:17px;font-weight:800}
.hd-card p{margin-top:8px;font-size:13.5px;color:#7B6C5B;line-height:1.6}

/* 결과 화면 */
.shots{display:grid;gap:20px}
.shot-wide{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lift);background:var(--ink)}
.shot-wide .shot-bar{height:34px;padding:0 16px;gap:8px}
.shot-wide .shot-bar i{width:9px;height:9px}
.shot-wide img{display:block;width:100%;height:auto}
.shot-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.shot-cap{margin-top:12px;font-size:14px;color:var(--ink-soft)}

/* 다음 작업 */
.case-next{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--panel);border-radius:var(--r-lg);padding:40px 44px}
.case-next b{display:block;font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:-.04em}
.case-next span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}

@media (max-width:960px){
  .case-hero{padding:124px 0 40px}
  .case-meta{grid-template-columns:1fr 1fr;margin-top:40px}
  .case-sec{padding:64px 0}
  .case-head{grid-template-columns:1fr;gap:6px;margin-bottom:32px}
  .case-no{padding-top:0}
  .case-body{margin-left:0}
  .case-points,.logo-row,.fd-grid,.shot-two{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(2,1fr)}
  .board.new{grid-template-columns:repeat(3,1fr)}
  .swatch-row,.swatch-row.four{grid-template-columns:repeat(2,1fr)}
  .swatch-row.three{grid-template-columns:1fr}
  .case-quote{padding:32px 26px}
  .rule{grid-template-columns:1fr;gap:6px}
  .case-next{flex-direction:column;align-items:flex-start;padding:30px 26px}
}

/* ── 조정: 표지(영상)를 맨 위로, 소개는 그 아래. 전체적으로 한 단계 작게 ── */
.case-hero.hero{text-align:left;padding:120px 0 40px}
.case-hero .case-back{margin-bottom:18px}
.case-cover{margin-top:0}
.case-cover video,.result-full img{display:block;width:100%;height:auto}
.case-cover .phone-frame video{border-radius:22px}
.case-intro{margin-top:40px}
.case-logo{width:76px;height:auto;margin-bottom:16px}
.case-hero.hero h1{font-size:clamp(36px,5vw,64px);line-height:1.08;margin-top:14px}
.case-lead{margin-top:14px;max-width:600px;font-size:clamp(15.5px,1.6vw,18px);line-height:1.65}
.case-meta{margin-top:32px;gap:20px}
.case-meta dd{font-size:15px;margin-top:6px}

.case-sec{padding:64px 0}
.case-head{grid-template-columns:160px 1fr;gap:24px;margin-bottom:28px}
.case-no{padding-top:8px;font-size:12px}
.case-head h2,.result-text h2{font-size:clamp(22px,2.6vw,32px);line-height:1.25}
.case-head p,.result-text p{margin-top:10px;max-width:560px;font-size:15.5px;line-height:1.65}
.case-body{margin-left:184px}

.case-quote{padding:28px 32px;border-radius:var(--r-md)}
.case-quote p{font-size:clamp(17px,1.9vw,22px)}
.case-quote span{margin-top:12px;font-size:11px}
.case-points{gap:14px;margin-top:16px}
.case-point{padding:20px 22px}
.case-point h4{font-size:16.5px;margin-top:6px}
.case-point p{font-size:14px;margin-top:4px}
.case-point .mono{font-size:11px}

.board{grid-template-columns:repeat(6,1fr);gap:10px}
.tile{border-radius:var(--r-sm)}
.tile .cap{left:10px;bottom:8px;font-size:10px}
.board.new{grid-template-columns:repeat(8,1fr)}
.board.new .tile{background:var(--white)}

.logo-row{grid-template-columns:220px 1fr;gap:16px}
.logo-card{padding:24px;border-radius:var(--r-md)}
.rule-list{gap:10px}
.rule{grid-template-columns:72px 1fr;gap:14px;padding:14px 20px;border-radius:var(--r-sm)}
.rule b{font-size:15px}
.rule span{font-size:14.5px}

.swatch-row{gap:10px}
.swatch{border-radius:var(--r-sm)}
.swatch i{aspect-ratio:1/.56}
.swatch div{padding:10px 12px 12px}
.swatch b{font-size:13.5px}
.swatch span{font-size:11px}
.swatch em{margin-top:4px;font-size:12px}
.sub-h{margin:28px 0 12px;font-size:11.5px}

.fd-grid{gap:16px}
.fd{padding:22px 24px;border-radius:var(--r-md)}
.fd h4{margin-bottom:14px;font-size:11.5px}
.fd-type .row{padding:6px 0}
.fd-type .row span{font-size:11px}
.fd-shape{gap:10px}
.fd-shape div{font-size:10.5px}
.fd-elev{gap:12px}
.fd-elev div{padding:18px 12px;font-size:13px;border-radius:18px}
.hd-btn{height:40px;padding:0 20px;font-size:14px}
.hd-chip{height:24px;padding:0 10px;font-size:11.5px}

/* 결과: 왼쪽 전체 캡처, 오른쪽 글(따라오게 고정) */
.result-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.result-full{border-radius:var(--r-md)}
.result-text{position:sticky;top:112px}
.result-text .case-no{display:block;padding:0;margin-bottom:12px}
.shot-wide.plain{background:none;box-shadow:var(--shadow);border-radius:var(--r-sm)}
.shot-cap{margin-top:8px;font-size:13px}

@media (max-width:960px){
  .case-hero.hero{padding:96px 0 28px}
  .case-sec{padding:48px 0}
  .case-head{grid-template-columns:1fr;gap:4px;margin-bottom:20px}
  .case-body{margin-left:0}
  .board{grid-template-columns:repeat(3,1fr)}
  .board.new{grid-template-columns:repeat(5,1fr)}
  .logo-row{grid-template-columns:1fr}
  .logo-card img{max-width:140px}
  .swatch-row{grid-template-columns:repeat(3,1fr)}
  .result-split{grid-template-columns:1fr;gap:28px}
  .result-text{position:static;order:-1}
}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media (max-width:520px){.ba{grid-template-columns:1fr}}
.board.orig{grid-template-columns:repeat(8,1fr)}
@media (max-width:960px){.board.orig{grid-template-columns:repeat(4,1fr)}}
/* 표지: PC 창을 잘라내지 않고 위아래 같은 여백으로 띄운다 (창 아래에 어중간한 띠가 남던 문제) */
.case-cover .work-thumb.framed{aspect-ratio:auto;padding:5.2% 0}
.case-cover .shot-frame{position:relative;left:auto;right:auto;top:auto;margin:0 22% 0 10%;border-radius:14px;transform:none}
.case-cover .phone-frame{top:50%;transform:translateY(-44%)}
@media (max-width:960px){.case-cover .work-thumb.framed{padding:7% 0}.case-cover .shot-frame{margin:0 24% 0 6%}.case-cover .phone-frame{right:5%;width:22%;border-radius:18px;padding:4px}.case-cover .phone-frame video{border-radius:14px}}

/* 01 기획 — 요청 문장 + 단어별 화면의 답 */
.req{padding:6px 0 4px}
.req-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
.req p{margin-top:12px;font-size:clamp(22px,2.8vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1.45;color:var(--ink)}
.req mark{background:var(--m);color:inherit;padding:.04em .32em;border-radius:.4em}
.req-map{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.req-item{display:flex;align-items:center;gap:16px;background:var(--panel);border-radius:var(--r-md);padding:18px 20px}
.req-item img{width:52px;height:52px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 8px 10px rgba(22,21,19,.12))}
.req-item span{display:block;font-size:13px;font-weight:700;color:var(--ink-soft)}
.req-item b{display:block;margin-top:2px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.4}
@media (max-width:960px){.req-map{grid-template-columns:1fr}}
/* 표지 아래 본문부터는 양옆으로 조금 더 들여 쓴다 (표지는 전체 폭 유지) */
@media (min-width:961px){
  .case-intro{padding:0 clamp(24px,4vw,56px)}
  .case-sec > .wrap{padding-left:calc(28px + clamp(24px,4vw,56px));padding-right:calc(28px + clamp(24px,4vw,56px))}
}

/* 줄바꿈: 문장 단위로 끊고, 남는 줄은 길이를 고르게 */
.case-lead{max-width:760px}
.case-head p,.result-text p{max-width:640px}
.case-lead,.case-head h2,.case-head p,.result-text h2,.result-text p,.req p,.req-item b,.case-point p,.rule span,.fd p,.shot-cap{text-wrap:balance}

/* 08 후기 — 말풍선 카드 */
.talks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.talk-card{background:var(--tc);border-radius:6px 26px 26px 26px;padding:22px 26px 24px}
.talk-step{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(70,58,46,.6)}
.talk-card blockquote{margin-top:10px;font-size:clamp(16px,1.5vw,19px);font-weight:700;letter-spacing:-.025em;line-height:1.55;color:#463A2E;text-wrap:balance}
.talk-by{margin-top:16px;font-size:13px;color:var(--ink-soft)}
@media (max-width:960px){.talks{grid-template-columns:1fr}}

/* ── ARCTOS 상세에서 추가한 공용 조각 ── */
.case-logo.wide{width:120px}
.case-cover .phone-frame img{display:block;width:100%;height:auto;border-radius:22px}
.rule.wide{grid-template-columns:150px 1fr}
.tile.dark{background:#2A2825}
.tile.dark .cap{color:rgba(255,255,255,.6)}
.board.parts{grid-template-columns:repeat(5,1fr)}
.board.duo{grid-template-columns:repeat(2,1fr)}
.case-points.four{grid-template-columns:repeat(4,1fr)}
.case-points.four h4{font-size:14.5px;letter-spacing:0}
.chips-c{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}
.chip-c{display:block;aspect-ratio:1/1;border-radius:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(22,21,19,.06)}
.chip-c.metal{background:linear-gradient(135deg,var(--c) 0%,color-mix(in srgb,var(--c) 55%,#fff) 34%,var(--c) 52%,color-mix(in srgb,var(--c) 68%,#000) 100%)}
.agree{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;background:var(--white);border-radius:var(--r-md);padding:16px 20px;font-size:14.5px;color:var(--ink-mid)}
.agree i{width:20px;height:20px;border-radius:6px;background:var(--ink);flex-shrink:0;position:relative}
.agree i::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.agree span{flex:1;min-width:200px}
.agree b{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--white);font-size:14px;font-weight:700}
@media (max-width:960px){.board.parts{grid-template-columns:repeat(3,1fr)}.case-points.four{grid-template-columns:1fr 1fr}.chips-c{grid-template-columns:repeat(8,1fr)}.rule.wide{grid-template-columns:1fr}}
.case-cover .shot-frame img{display:block;width:100%;height:auto}
.result-full video{display:block;width:100%;height:auto}
.case-video{overflow:hidden;border-radius:var(--r-md)}
.case-video video{display:block;width:100%;height:auto}

/* 직접 조작하는 데모 */
.live-demo{position:relative;background:var(--panel);border-radius:var(--r-md);padding:44px 12px 12px}
.live-demo iframe{display:block;width:100%;height:1200px;border:0;border-radius:var(--r-sm);background:transparent}
.live-tag{position:absolute;left:18px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--red)}
.rule-list.four{grid-template-columns:1fr 1fr}
@media (max-width:960px){.rule-list.four{grid-template-columns:1fr}.live-demo{padding:40px 6px 6px}}
.live-demo iframe{transform-origin:0 0}

/* 전 → 후 */
.ba-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0}
.ba-card{position:relative;aspect-ratio:1/.86;background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:44px 28px 28px}
.ba-card.tint{background:var(--panel);box-shadow:none}
.ba-card img{max-width:100%;max-height:100%;object-fit:contain}
.ba-tag{position:absolute;left:18px;top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft)}
.ba-arrow{width:44px;height:44px;margin:0 -10px;z-index:1;border-radius:50%;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;box-shadow:var(--shadow-lift)}
@media (max-width:960px){.ba-row{grid-template-columns:1fr}.ba-arrow{margin:-10px auto;transform:rotate(90deg)}}
.result-stack{display:grid;gap:20px}

/* Daily 8 */
.d8-type{display:grid;gap:6px}
.d8-type b{display:block;line-height:1.3;letter-spacing:-.01em}
.d8-type span{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-bottom:14px}
.d8-serif{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:40px;color:#12110F;letter-spacing:-.02em}
.d8-serif em{font-style:italic}
.board.mascots{grid-template-columns:repeat(6,1fr)}
.tile.mascot .cap{left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff}
.talks.one{grid-template-columns:1fr}
@media (max-width:960px){.board.mascots{grid-template-columns:repeat(3,1fr)}}
.d8-ba .ba-card{aspect-ratio:auto;padding:48px 24px 24px}
.d8-ba .ba-card img{max-height:560px;width:auto;border-radius:18px}