/* Shared reading rhythm; Korean words and Japanese punctuation wrap differently. */
:root[lang="ko"]{--copy-tracking:-.015em}
:root[lang="en"]{--copy-tracking:0em}
:root[lang="ja"]{--copy-tracking:0em}
:root[lang="en"] body{word-break:normal}
:root[lang="ja"] body{word-break:normal;line-break:strict}
:is(p,li,dd,.ct-desc,.sub){overflow-wrap:anywhere;letter-spacing:var(--copy-tracking,0);text-wrap:pretty}
:is(.wknd-copy,.okay-copy,.wknd-thesis,.okay-thesis,.case-head,.card,.step,.cm-panel,.scene-caption){min-width:0}
:is(.wknd-copy,.okay-copy) p{max-width:100%;line-height:1.85;text-align:start}
:is(.wknd-thesis,.okay-thesis) p{max-width:100%;line-height:1.85;text-align:start;font-family:var(--sans)}
:is(.wknd-copy,.okay-copy,.wknd-thesis,.okay-thesis) h4{line-height:1.12;overflow-wrap:anywhere;text-wrap:balance}
.case-head .desc{max-width:64em;line-height:1.8;text-align:start}
.copy-break{white-space:normal}
.work .editorial-grid .ct-br{white-space:normal;overflow:visible;text-overflow:clip;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
:root[lang="ko"] :is(p,li,dd,.ct-desc,.sub){word-break:keep-all}
:root[lang="ja"] :is(p,li,dd,.ct-desc,.sub,h3,h4){word-break:normal;line-break:strict}
:root[lang="en"] :is(p,li,dd,.ct-desc,.sub){word-break:normal}
:is(.wknd-note,.okay-note,.tag,.sheet dd){overflow-wrap:anywhere;line-height:1.65}
.case-head .desc + *{min-width:0}
@media(max-width:760px){
  :is(.wknd-thesis,.okay-thesis){gap:24px}
  :is(.wknd-copy,.okay-copy){padding-inline:0}
  :is(.wknd-copy,.okay-copy) p{font-size:1rem;line-height:1.85}
  :is(.wknd-thesis,.okay-thesis) p{font-size:1.05rem}
  :is(.wknd-copy,.okay-copy) h4{font-size:clamp(2rem,7vw,3.2rem)}
  .case-head{padding-right:36px}
}
.sheet dd{white-space:normal;overflow:visible;text-overflow:clip;letter-spacing:0;line-height:1.7}
/* Captions remain legible on both the light page and dark film overlays. */
:root[data-theme="light"] .case .pal .lb{color:#62605c}
.pal{flex-wrap:wrap;row-gap:10px}
.pal .lb{min-width:0;flex:1 1 220px;line-height:1.65}
.case-film .scap{right:12px;width:fit-content;max-width:calc(100% - 24px);flex-wrap:wrap;gap:4px 10px;line-height:1.6}
.case-film .scap i{color:#e2e1de;letter-spacing:.02em}

/* Studio copy uses separate thoughts, not a single forced headline. */
.studio .manifesto{max-width:920px;font-family:var(--sans);font-weight:500}
.studio .manifesto p{margin:0;max-width:30em;font-size:clamp(22px,2.7vw,38px);line-height:1.65;letter-spacing:-.025em;text-wrap:pretty}
.studio .manifesto p+p{margin-top:24px;max-width:34em;font-size:clamp(17px,1.8vw,24px);font-weight:400;line-height:1.8;color:var(--mut)}
.pblock .head .sub{max-width:48em;line-height:1.8}
.copy-lead,.copy-support{display:block}
.copy-lead{font-size:1.12em;font-weight:500;color:var(--ivory)}
.copy-support{margin-top:12px;max-width:38em}
.pitem h3{line-height:1.55;text-wrap:balance}
.pitem p{line-height:1.85}
:root[lang="en"] .studio .manifesto p,:root[lang="ja"] .studio .manifesto p{letter-spacing:0}
@media(max-width:760px){.studio .manifesto p{max-width:25em;font-size:23px;line-height:1.7}.studio .manifesto p+p{font-size:17px;margin-top:22px;line-height:1.85}.pitem h3{margin-bottom:14px}}

/* Each narrative sentence starts a new line; short phrases stay together. */
:is(.wknd-thesis,.wknd-copy,.okay-thesis,.okay-copy) p{white-space:pre-line;text-wrap:wrap;word-break:normal;overflow-wrap:normal}
:root[lang="ko"] :is(.wknd-thesis,.wknd-copy,.okay-thesis,.okay-copy) p{word-break:keep-all}

/* Editorial line breaks also cover summaries, process, service and FAQ copy. */
:is(.case p,.pitem p,.step p,.faq p,.head .sub,.contact .wrap>p,.ct-desc){white-space:pre-line;text-wrap:wrap;overflow-wrap:break-word}
.case-head .sentence-break{display:block;height:0;white-space:normal}
.faq details p{line-height:1.85;max-width:100%}

/* About: align the introduction and show the actual scope of work. */
.studio .manifesto{margin-inline:0;max-width:100%}
.studio .manifesto p{max-width:27em;text-wrap:balance}
.studio .manifesto p+p{max-width:40em;text-wrap:pretty}
.studio-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.studio-projects a{display:block;position:relative;min-width:0;overflow:hidden}
.studio-projects a img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.studio-projects a span{position:absolute;left:0;right:0;bottom:0;padding:30px 20px 16px;background:linear-gradient(transparent,#0009);color:#fff;font:12px/1.5 var(--sans)}
.studio-projects a:focus-visible{outline:3px solid var(--coral);outline-offset:-4px}
.about-services h3{font:500 clamp(18px,1.9vw,25px)/1.5 var(--sans);word-break:keep-all}
.about-services p{font:400 14px/1.85 var(--sans);margin-top:14px;color:var(--mut)}
:root[lang="ja"] .about-services h3{word-break:normal}
@media(max-width:600px){.studio-projects{grid-template-columns:1fr 1fr}.studio-projects a:first-child{grid-column:1/-1}.studio-projects a img{aspect-ratio:4/3}.studio-projects a:first-child img{aspect-ratio:16/9}.about-services{grid-template-columns:1fr 1fr;gap:28px 20px}.studio .manifesto p{font-size:23px}}

/* We Do shares the Studio palette; the shade follows both color themes. */
.wedo{background:var(--bg-2);color:var(--ivory)}
#wgl{opacity:1;background:radial-gradient(ellipse at 80% 25%,var(--bg) 0%,transparent 68%),linear-gradient(135deg,var(--bg-2),var(--bg));}
.wedo .kick{color:var(--mut)}
.wedo .wd-c.on{opacity:1;color:var(--mut)}
.wedo .tlink{color:var(--ivory)}

/* About — one continuous brand story, with a readable static mobile layout. */
.wedo .about-principle{max-width:38em;font-size:clamp(18px,2vw,24px);line-height:1.75;color:var(--mut);margin-bottom:40px;word-break:keep-all}
.wedo .about-services{margin:0;max-width:none}
.about-process .head{align-items:flex-end}
.about-process .head h2{font-size:clamp(52px,7vw,100px);line-height:1.08}
.process-example{max-width:1240px;margin:0 auto 32px;color:var(--mut);font-size:13px;line-height:1.7}
.process-walk{max-width:1240px;margin:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:7%;align-items:start}
.process-chapter{min-height:65vh;display:flex;flex-direction:column;justify-content:center;padding:48px 0;border-top:1px solid var(--line)}
.process-number{font:12px/1.5 var(--mono);letter-spacing:.08em;color:var(--mut)}
.process-chapter h3{font:500 clamp(24px,2.8vw,38px)/1.45 var(--sans);margin:20px 0;word-break:keep-all;text-wrap:pretty}
.process-chapter p{font-size:16px;line-height:1.9;white-space:pre-line;color:var(--mut);word-break:keep-all}
.process-screen{position:sticky;top:130px;padding-top:20px}
.process-stack{display:grid;perspective:1200px}
.process-frame{grid-area:1/1;min-width:0;margin:0;opacity:0;visibility:hidden;transform:translateY(24px) rotateY(-5deg) scale(.97);transition:opacity .55s ease,transform .7s ease,visibility .55s;pointer-events:none}
.process-frame.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.process-frame img,.process-frame video{display:block;width:100%;height:min(52vh,520px);object-fit:contain;background:var(--bg-2);border-radius:4px}
.process-frame figcaption{margin:18px 0 24px;font:12px/1.5 var(--mono);color:var(--mut)}
.process-mobile{display:none}
.about-next{background:var(--bg-2);text-align:center}
.about-next h2{font:500 clamp(28px,4vw,56px)/1.4 var(--sans);word-break:keep-all;margin:26px 0}
.about-next p{line-height:1.9;color:var(--mut);font-size:17px}
.about-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:24px;margin-top:36px}
.showroom.logo-opening .room-intro,.showroom.logo-opening .room-location,.showroom.logo-opening .room-hint{color:#eef0ec;text-shadow:0 1px 8px #0008}
.story-ready .logo-opening .room-intro,.story-ready .logo-opening .room-location,.story-ready .logo-opening .room-copy,.story-ready .logo-opening .room-bottom{opacity:clamp(0,calc(1 - max(0,var(--scatter,0) - .35)*2.2),1)}
:root[lang="ja"] .process-chapter h3,:root[lang="ja"] .process-chapter p{word-break:normal}
@media(max-width:760px){
 .process-walk{display:block}.process-screen{display:none}.process-chapter{min-height:0;padding:32px 0 48px}.process-mobile{display:block;margin:24px 0 0}.process-mobile img,.process-mobile video{display:block;width:100%;max-height:65svh;object-fit:contain;background:var(--bg-2)}
 .process-chapter h3{font-size:25px}.process-chapter p{font-size:15px}.about-process .head h2{font-size:52px}.about-next p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.process-frame{transition:none;transform:none}}

.work-next{max-width:1240px;margin:64px auto 0;padding-top:32px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}.work-next p{color:var(--mut);line-height:1.8}

/* Services share About's editorial palette and customer-facing sequence. */
.service-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px;align-items:start}
.service-item{min-width:0;border-top:1px solid var(--line);padding-top:20px}
.service-item>img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;display:block;margin-bottom:24px}
.service-index{font:11px/1.6 var(--mono);letter-spacing:.08em;color:var(--mut)}
.service-item h3,.service-options h3{font:500 clamp(23px,2.5vw,32px)/1.5 var(--sans);margin:12px 0;word-break:keep-all}
.service-item p,.service-options p{font-size:16px;line-height:1.85;color:var(--mut);word-break:keep-all;text-wrap:pretty}
.service-item details{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-item summary{cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;list-style:none;padding:12px 0}
.service-item summary::-webkit-details-marker{display:none}
.service-item summary::after{content:'+';font-size:22px;font-weight:300;transition:transform .2s}
.service-item details[open] summary::after{transform:rotate(45deg)}
.service-item summary:focus-visible{outline:2px solid var(--ivory);outline-offset:5px}
.service-item ul{padding:0 0 22px 20px;margin:0;color:var(--mut);font-size:15px;line-height:1.85}
.service-item li+li{margin-top:10px}
.service-note{max-width:1240px;margin:36px auto 0;font:14px/1.9 var(--sans);color:var(--mut);text-wrap:pretty;word-break:keep-all}
.service-options{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.service-options article{border-top:1px solid var(--line);padding-top:24px}
.service-actions{max-width:1240px;margin:32px auto 0;display:flex;align-items:center;flex-wrap:wrap;gap:24px}
:root[lang="ja"] :is(.service-item p,.service-options p,.service-note,.service-item h3,.service-options h3){word-break:normal}
@media(max-width:760px){.service-grid,.service-options{grid-template-columns:1fr;gap:36px}.service-item p,.service-options p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.service-item summary::after{transition:none}}

/* ── Services 호버 인터랙션 (2026-09-11) — 포인터 기기 전용. 이미지 슬로우 줌 + 커서 따라가는 코럴 글로우 + 인덱스 강조 ── */
@media (hover:hover) and (pointer:fine){
  .service-item{position:relative;transition:border-color .6s var(--ease,ease)}
  .service-item:hover{border-top-color:var(--coral)}
  .service-item>img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s ease;will-change:transform}
  .service-item:hover>img{transform:scale(1.025);filter:saturate(1.06) contrast(1.02)}
  .service-item .service-index{display:inline-block;transition:color .45s ease,letter-spacing .45s ease,transform .45s var(--ease,ease)}
  .service-item:hover .service-index{color:var(--coral);letter-spacing:.22em;transform:translateX(4px)}
  .service-item h3{transition:transform .55s var(--ease,ease)}
  .service-item:hover h3{transform:translateX(6px)}
  .service-item::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:6px;opacity:0;transition:opacity .5s ease;
    background:radial-gradient(420px circle at calc(var(--x,-999)*1px) calc(var(--y,-999)*1px),rgba(255,126,184,.14),rgba(255,126,184,0) 62%)}
  .service-item:hover::after{opacity:1}
  .service-item summary{transition:color .3s ease}
  .service-item summary:hover{color:var(--coral)}
}