@import url("./chrome.css");
@import url("./pairing.css");

:root{
  --bg:#f4f5f3; --panel:#ffffff; --ink:#202426; --ink2:#5b6468; --line:#d5dadb; --control:#7a858a;
  --accent:#23695c; --accent-hover:#194e45; --accent-ink:#23695c; --soft:#e8eeeb; --stage:#e9ecea;
  --dark:#171d20; --dark-ink:#f4f5f3; --dark-muted:#b5c0c4; --dark-link:#8dd7bd; --dark-line:#3a4448;
  --sans:"Inter","Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(1rem,.96rem + .2vw,1.125rem)/1.7 var(--sans);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,.card,.sub,.pill,.facts li,.steps li,.tool-list{word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink)}
a:hover{color:var(--accent-hover)}
:where(a,summary,button):focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;border-radius:8px;z-index:200}
h1,h2,h3{font-family:var(--sans);margin:0 0 .5em;color:var(--ink);font-weight:700}
h1{font-size:clamp(2rem,1.2rem + 3.5vw,4rem);line-height:1.22;letter-spacing:-.025em;overflow-wrap:anywhere;text-wrap:balance}
h2{font-size:clamp(1.625rem,1.2rem + 1.8vw,2.5rem);line-height:1.35;letter-spacing:-.025em;text-wrap:balance}
h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:600;line-height:1.35;letter-spacing:-.01em}
p{margin:0 0 1em}
.sub{color:var(--ink2);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;max-width:32em}
.kicker{margin:0 0 12px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}
small,.note,.copy{font-size:clamp(.875rem,.84rem + .15vw,.9375rem);line-height:1.6}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:8px;font-weight:600;font-size:16px;line-height:1.3;text-decoration:none;border:1px solid var(--control);color:var(--ink);background:var(--panel)}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.more{font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}

/* sections */
.hero{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,40px)}
.hero .sub:last-child{margin-bottom:0}
.hero .grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.hero .grid>*,.alt>*,.cards>*{min-width:0}
@media(min-width:900px){.hero .grid{grid-template-columns:1.1fr .9fr}}
.band{padding-block:clamp(48px,6.25vw,80px)}
.band:not(.dark)+.band:not(.dark){padding-top:0}
.hero+.band:not(.dark){padding-top:clamp(16px,3vw,40px)}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:24px}
.band-head h2{margin:0}
.cards{display:grid;gap:20px}
@media(min-width:640px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0}
.card p{margin:0;color:var(--ink2)}
.card .more{margin-top:auto}
.card:focus-within{border-color:var(--accent)}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--control)}
a.card:hover h3{color:var(--accent-ink)}
a.card .more{color:var(--accent-ink)}
.pill{display:inline-block;max-width:100%;padding:3px 10px;border-radius:6px;background:var(--soft);color:var(--accent-ink);font-size:13px;font-weight:600;line-height:1.5}

/* product card: 화면 무대 + 정보 */
.card.product{padding:0;gap:0;overflow:hidden}
.stage{display:flex;align-items:center;justify-content:center;height:clamp(240px,24vw,300px);padding:22px;background:var(--stage);border-bottom:1px solid var(--line)}
.stage-link{display:block}
.stage-img{max-height:100%;max-width:100%;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:0 1px 2px rgba(23,29,32,.06),0 6px 18px rgba(23,29,32,.08)}
.stage-img.phone,.stage-img.tablet{height:100%;width:auto;object-fit:contain}
.stage-img.wide{width:100%;height:auto;border-radius:8px}
.product-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 24px 24px;flex:1}
.product-body :is(h2,h3){margin:0;font-size:clamp(1.125rem,1.05rem + .3vw,1.3rem);font-weight:600;line-height:1.35;letter-spacing:-.01em;text-wrap:wrap}
.product-body :is(h2,h3) a{color:inherit;text-decoration:none}
.product-body :is(h2,h3) a:hover{color:var(--accent-ink)}
.product-body p{font-size:15px;line-height:1.6}
.product-body .row{margin-top:4px}
.product-body .btn{min-height:44px;padding:8px 16px;font-size:15px}
.platforms{font-size:14px;color:var(--ink2);font-weight:500}
.product-body .more{margin-top:auto;padding-top:4px}

/* dark band */
.band.dark{background:var(--dark);color:var(--dark-ink)}
.band.dark h2,.band.dark h3{color:var(--dark-ink)}
.band.dark p,.band.dark .sub,.band.dark .addr{color:var(--dark-muted)}
.band.dark .kicker{color:var(--dark-link)}
.band.dark a:not(.btn){color:var(--dark-link)}
.band.dark .btn:not(.primary){background:transparent;color:var(--dark-ink);border-color:var(--control)}
.band.dark .btn:not(.primary):hover{border-color:var(--dark-ink)}
.band.dark :where(a,summary,button):focus-visible{outline-color:var(--dark-link)}
.split{display:grid;gap:48px}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:64px}}

/* Photo and copy stay separate; the photo is capped at 767px wide when stacked. */
.photo-hero{display:grid;gap:32px;align-items:center;background:var(--dark);color:var(--dark-ink);padding:clamp(32px,4.5vw,64px) max(clamp(16px,4vw,40px),calc((100% - 1120px)/2))}
.ph-media{min-width:0;width:100%;max-width:767px;margin-inline:auto}
.ph-media img{width:100%;height:auto;border-radius:8px}
.ph-copy{order:-1;width:100%;min-width:0;padding:0;margin:0}
.photo-hero h1{color:var(--dark-ink);font-size:clamp(2rem,1rem + 2.5vw,3rem);line-height:1.25;margin:0 0 20px;text-wrap:wrap}
.photo-hero .sub{color:var(--dark-muted);font-size:clamp(1rem,.95rem + .25vw,1.125rem);max-width:30em;margin:0}
.photo-hero .btn:not(.primary){background:transparent;color:var(--dark-ink);border-color:var(--control)}
.photo-hero .btn:not(.primary):hover{border-color:var(--dark-ink)}
.photo-hero :where(a,summary,button):focus-visible{outline-color:var(--dark-link)}
@media(min-width:900px){
  .photo-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;padding-inline:max(40px,calc((100% - 1120px)/2))}
}

/* 작업 커버: 정사각 + 아래 이름 */
.cover{margin:0;min-width:0}
.cover img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:6px;background:var(--stage);box-shadow:0 0 0 1px rgba(32,36,38,.06)}
.cover figcaption{display:flex;flex-direction:column;gap:3px;margin-top:12px;font-size:15px;line-height:1.6}
.cover figcaption strong{font-weight:600;color:var(--ink)}
.cover figcaption span{color:var(--ink2)}
.cover figcaption .cat{font-size:13px;font-weight:600;color:var(--accent-ink)}
.covers{display:grid;gap:16px;grid-auto-flow:column;grid-auto-columns:minmax(132px,42%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.covers .cover{scroll-snap-align:start}
@media(min-width:760px){
  .covers{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;gap:24px 20px;padding-bottom:0}
  .covers.strip-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .covers.strip-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .covers.strip-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .covers.strip-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.work-grid{display:grid;gap:32px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}}
@media(min-width:1000px){.work-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.work-group+.work-group .wrap{padding-top:40px;border-top:1px solid var(--line)}
[id]{scroll-margin-top:88px}
.work-nav{margin-top:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:15px;font-weight:500}
.chips.links li{padding:0;border:0;background:none}
.chips.links a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:1px solid var(--control);border-radius:999px;background:var(--panel);color:var(--ink);text-decoration:none;font-weight:500}
.chips.links a:hover{border-color:var(--ink);color:var(--ink)}
.roles{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.roles summary{cursor:pointer;font-weight:600;font-size:clamp(1.125rem,1.05rem + .3vw,1.3rem);padding:14px 0;color:var(--ink)}
.roles[open] summary{margin-bottom:12px}

/* 엔지니어 */
/* profile.png 은 원 둘레에 흰 여백이 있어 조금 키워 원 안만 보이게 한다 */
.portrait{display:block;border-radius:50%;overflow:hidden;width:100%;max-width:220px;aspect-ratio:1/1;background:var(--dark)}
.portrait img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.engineer{display:grid;gap:28px;align-items:center}
.engineer p{color:var(--ink2);max-width:36em}
.engineer .kicker{color:var(--accent-ink)}
.engineer h2{margin-bottom:.3em}
@media(min-width:700px){.engineer{grid-template-columns:200px minmax(0,1fr);gap:48px}}
.portrait-hero .pt-grid{display:grid;gap:28px;align-items:center}
.portrait-hero .portrait{max-width:240px}
@media(min-width:700px){.portrait-hero .pt-grid{grid-template-columns:240px minmax(0,1fr);gap:56px}}
/* 모바일: 작은 원 + 이름 옆에, 본문은 아래 전체 폭 */
@media(max-width:699px){
  .band-engineer{padding-block:32px}
  .engineer{grid-template-columns:104px minmax(0,1fr);column-gap:16px;row-gap:0;align-items:center}
  .engineer>div{display:contents}
  .engineer .portrait{grid-column:1;grid-row:1/3;width:104px;max-width:104px}
  .engineer .kicker{grid-column:2;grid-row:1;align-self:end;margin-bottom:2px}
  .engineer h2{grid-column:2;grid-row:2;align-self:start;margin:0}
  .engineer p:not(.kicker),.engineer .more{grid-column:1/-1}
  .engineer h2+p{margin-top:16px}
  .portrait-hero{padding-top:28px}
  .portrait-hero .pt-grid{grid-template-columns:112px minmax(0,1fr);column-gap:16px;row-gap:0;align-items:center}
  .portrait-hero .pt-grid>div{display:contents}
  .portrait-hero .portrait{grid-column:1;grid-row:1/3;width:112px;max-width:112px}
  .portrait-hero h1{grid-column:2;grid-row:1;align-self:end;margin:0 0 4px}
  .portrait-hero .sub{grid-column:2;grid-row:2;align-self:start;margin:0}
  .portrait-hero .cta-row,.portrait-hero .row{grid-column:1/-1;margin-top:20px}
}

/* 녹음실 사진: 파일 비율 그대로(세로 4:5 port, 가로 3:2 land) */
.pic{margin:0;min-width:0}
.pic img{display:block;width:100%;height:auto;object-fit:cover;border-radius:10px;background:var(--stage)}
.pic.port img{aspect-ratio:4/5}
.pic.land img{aspect-ratio:3/2}
.pic figcaption{margin-top:10px;font-size:15px;color:var(--ink2)}
.band.dark .pic figcaption{color:var(--dark-muted)}
/* 홈 띠: 한 줄, 사진 폭을 비율(0.8 : 1.5)만큼 나눠 높이를 맞춘다 */
.pics{display:flex;gap:20px}
.pics .pic.port{flex:4 1 0}
.pics .pic.land{flex:7.5 1 0}
/* 녹음실 페이지 */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
@media(min-width:640px){
  .gallery{grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px}
  .gallery .port{grid-column:span 3}
  .gallery .land{grid-column:span 6}
}
/* bento(사진 5장: 부스 세로 · 보관함 세로 · 프리앰프+컴프 가로 · 모니터 컨트롤러 가로 · 부스 안쪽 가로).
   휴대폰 2칸 = 부스 한 줄 / [보관함 세로 두 줄 | 가로 둘 쌓기] / 부스 안쪽 한 줄.
   넓은 화면 12칸 = [부스 7 | 보관함 5] + [가로 둘 쌓기 4 | 부스 안쪽 8 (두 줄)].
   크기가 정해진 칸이 줄 높이를 정하고, 두 줄을 차지하는 칸 사진은 그 높이를 채운다(object-fit cover). */
.gallery.bento>.pic:nth-child(1),.gallery.bento>.pic:nth-child(5){grid-column:1/-1}
.gallery.bento>.pic:nth-child(1) img{aspect-ratio:1/1;object-position:50% 45%}
.gallery.bento>.pic:nth-child(5) img{aspect-ratio:7/5}
.gallery.bento>.pic:nth-child(2){grid-column:1;grid-row:span 2;display:flex;flex-direction:column}
.gallery.bento>.pic:nth-child(2) img{flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto;object-position:50% 50%}
.gallery.bento>.pic:nth-child(3),.gallery.bento>.pic:nth-child(4){grid-column:2}
@media(min-width:640px){
  .gallery.bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense}
  .gallery.bento>.pic:nth-child(1){grid-column:1/8}
  .gallery.bento>.pic:nth-child(1) img{aspect-ratio:1/1}
  .gallery.bento>.pic:nth-child(2){grid-column:8/13;grid-row:auto}
  .gallery.bento>.pic:nth-child(3),.gallery.bento>.pic:nth-child(4){grid-column:1/5}
  .gallery.bento>.pic:nth-child(5){grid-column:5/13;grid-row:span 2;display:flex;flex-direction:column}
  .gallery.bento>.pic:nth-child(5) img{flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto;object-position:50% 50%}
}
.gear{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gear li{padding:10px 0;border-bottom:1px solid var(--line);font-weight:500}
.band.dark .gear,.band.dark .gear li{border-color:var(--dark-line)}
.gear-groups{display:grid;gap:28px 40px}
@media(min-width:760px){.gear-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gear-group :is(h3,h4){margin:0 0 8px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink2)}
.band.dark .gear-group :is(h3,h4){color:var(--dark-muted)}
.gear-row{display:grid;gap:12px 32px;margin-top:48px}
.gear-row>h3{margin:0}
@media(min-width:860px){.gear-row{grid-template-columns:200px minmax(0,1fr)}.gear-row>h3{padding-top:2px}}

/* 홈 앱(보조) 띠: 작은 휴대폰 화면 */
.apps-band .band-head .sub{margin:6px 0 0;font-size:16px}
.app-row{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.app-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.app-row a{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.app-row a:hover .mini-name{color:var(--accent-ink);text-decoration:underline}
.mini-stage{display:flex;justify-content:center;align-items:center;height:clamp(200px,22vw,250px);padding:16px;background:var(--stage);border-radius:var(--r)}
.mini{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:#fff}
.mini-name{font-weight:600;font-size:15px}

/* 플러그인: 어두운 머리 */
.dark-hero{background:var(--dark);color:var(--dark-ink);padding-block:clamp(56px,8vw,112px)}
.dark-hero h1{color:var(--dark-ink);margin-bottom:.25em}
.dark-hero .kicker{color:var(--dark-link)}
.dark-hero .sub{color:var(--dark-muted);margin-top:20px}
.dark-hero .pill{background:#24302f;color:var(--dark-link)}
.dark-hero .btn:not(.primary){background:transparent;color:var(--dark-ink);border-color:var(--control)}
.dark-hero .btn:not(.primary):hover{border-color:var(--dark-ink)}
.dark-hero :where(a,summary,button):focus-visible{outline-color:var(--dark-link)}
.dark-hero+.band:not(.dark){padding-top:clamp(48px,7vw,96px)}

/* Web tools and their matching app live together in each group. */
.tool-group h2{margin-bottom:24px}
.tool-group-grid{display:grid;gap:20px;align-items:start}
.group-apps{display:grid;gap:16px;min-width:0}
.tool-cards{display:grid;gap:20px;min-width:0}
@media(min-width:700px){.tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){
  .tool-group-grid{grid-template-columns:minmax(0,1fr) 320px;gap:24px}
  .group-apps{grid-column:2;grid-row:1}
  .tool-cards{grid-column:1;grid-row:1}
}
.tool-card{min-width:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tool-card:focus-within{border-color:var(--accent)}
.tc-img{display:block;background:var(--stage);border-bottom:1px solid var(--line);overflow:hidden}
.tc-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
.tc-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px;flex:1;min-width:0}
.tc-body h3{margin:0;font-size:clamp(1.125rem,1.05rem + .3vw,1.3rem)}
.tc-body h3 a{color:var(--ink);text-decoration:none}
.tc-body h3 a:hover{color:var(--accent-ink);text-decoration:underline}
.tc-body p{margin:0;color:var(--ink2);font-size:15px;line-height:1.7;max-width:32em}
.tc-app{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding:6px 10px;border-radius:6px;background:var(--soft);font-weight:600;font-size:13px;line-height:1.5;text-decoration:none}
.tc-app:hover{text-decoration:underline}
@media(max-width:699px){
  .tool-card{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start}
  .tc-img{border:0;border-radius:6px;margin:16px 0 16px 12px}
  .tc-body{padding:16px 14px;gap:6px}
  .tc-body h3{font-size:17px;line-height:1.45}
  .tc-body p{font-size:14px}
}

/* Reverse links on app detail pages: deliberate cards with a readable preview. */
.web-counterparts{padding:20px 0 0}
.web-counterparts h2{font-size:18px;margin:0 0 14px}
.web-previews{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:0;padding:0}
.web-previews li{min-width:0}
.web-previews a{height:100%;display:flex;gap:16px;align-items:center;padding:12px 16px 12px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);text-decoration:none}
.web-previews a:hover{border-color:var(--control)}
.web-previews a:hover strong{color:var(--accent)}
.web-previews img{flex:none;width:112px;height:70px;object-fit:contain;background:var(--stage);border:1px solid var(--line);border-radius:6px}
.wp-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.wp-copy strong{font-size:15px;font-weight:600;line-height:1.4}
.wp-copy small{font-size:13px;line-height:1.4;color:var(--ink2)}
/* 띠 바로 아래 첫 기능 블록은 위쪽 여백을 줄인다 */
.web-counterparts+.band{padding-top:clamp(8px,2vw,16px)}
.web-counterparts+.band .alt:first-child{padding-top:24px}
@media(max-width:559px){
  .web-previews{grid-template-columns:minmax(0,1fr);gap:10px}
  .web-previews a{gap:14px;padding:10px 14px 10px 10px}
  .web-previews img{width:96px;height:60px}
}

/* plugin strip */
.strip{border-bottom:1px solid var(--line);background:var(--panel)}
.strip-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;min-height:72px;padding-block:16px}
.strip .kicker{margin:0}
.strip a{font-weight:600;text-decoration:none;color:var(--ink)}
.strip a:hover{color:var(--accent-ink)}

/* compact link lists (home tools / guides) */
.link-list{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--line)}
.link-list li{border-bottom:1px solid var(--line);padding:14px 0}
.link-list a{font-weight:600;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);text-decoration:none;color:var(--ink)}
.link-list a:hover{color:var(--accent-ink);text-decoration:underline}
.link-list p{margin:4px 0 0;color:var(--ink2);font-size:15px;line-height:1.6}

/* app detail */
@media(min-width:900px){.app-hero .grid{grid-template-columns:minmax(0,.45fr) minmax(0,.55fr)}}
.app-hero h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);margin-top:14px}
.hero-shot{display:flex;justify-content:center}
.shot{border-radius:20px;border:1px solid var(--line);background:#fff;width:100%;margin:0 auto}
.shot.phone{max-width:340px}
.shot.tablet,.shot.wide{max-width:560px;border-radius:14px}
.alt .shot.phone{max-width:300px}
.alt .shot.tablet{max-width:480px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.facts li{padding:6px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:15px}
.bullets{padding-left:20px;margin:16px 0}.bullets li{margin:6px 0}
.alt{display:grid;gap:28px;align-items:center;padding:32px 0}
.alt+.alt{border-top:1px solid var(--line)}
@media(min-width:800px){.alt{grid-template-columns:1fr 1fr;gap:56px}.alt.rev .alt-img{order:2}}
.alt-text p{color:var(--ink2);max-width:32em}
.alt-text h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:600;line-height:1.35;letter-spacing:-.01em;text-wrap:wrap}
.steps{counter-reset:s;display:grid;gap:16px;padding:0;margin:0;list-style:none}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
.steps li{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--soft);color:var(--accent-ink);font-weight:700;margin-bottom:10px}
.tool-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:760px){.tool-list{grid-template-columns:repeat(2,1fr)}}
.tool-list li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.tool-list a{font-weight:600;font-size:18px;text-decoration:none}
.tool-list p{margin:6px 0 0;color:var(--ink2)}

/* 언어별 조판: 한국어는 keep-all, 일본어·중국어는 공백이 없으므로 되돌린다 */
html:lang(ja) body,html:lang(zh-Hans) body,
html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3,html:lang(ja) .card,html:lang(ja) .sub,html:lang(ja) .pill,html:lang(ja) .facts li,html:lang(ja) .steps li,html:lang(ja) .tool-list,
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3,html:lang(zh-Hans) .card,html:lang(zh-Hans) .sub,html:lang(zh-Hans) .pill,html:lang(zh-Hans) .facts li,html:lang(zh-Hans) .steps li,html:lang(zh-Hans) .tool-list{word-break:normal;line-break:strict;overflow-wrap:anywhere}
html:lang(ja){--sans:"Inter","Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans KR",system-ui,sans-serif}
html:lang(zh-Hans){--sans:"Inter","PingFang SC","Microsoft YaHei","Noto Sans KR",system-ui,sans-serif}
html:lang(de) body,html:lang(es) body,html:lang(fr) body,html:lang(pt-BR) body{hyphens:auto}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media (max-width:640px){.shots{grid-template-columns:1fr}}
.addr{margin:.8em 0 0;color:var(--ink2)}
.note{margin:.8em 0 0;color:var(--ink2)}
.works{width:100%;border-collapse:collapse;font-size:15px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.works th,.works td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;word-break:keep-all;overflow-wrap:break-word}
.works th{background:var(--soft);color:var(--accent-ink);font-size:14px;font-weight:600}
@media (max-width:640px){
.works{border:0;background:transparent}
.works,.works tbody,.works tr,.works td{display:block;width:100%}
.works thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.works tr{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:8px 12px;margin:0 0 10px}
.works td{border:0;padding:3px 0}
.works td::before{content:attr(data-label);display:inline-block;min-width:4.5em;margin-right:8px;color:var(--ink2);font-size:13px;font-weight:700}
.works td:empty{display:none}
}
.works .album{font-size:13px;color:var(--ink2)}

.prose-copy{max-width:42em}
.prose-copy p:last-child{margin-bottom:0}
html [lang="ko"]{word-break:keep-all;line-break:auto;overflow-wrap:normal;hyphens:none}

/* Screens stay legible without turning each feature into a full phone-height page. */
.app-hero .shot.phone{max-height:540px;width:auto;max-width:100%}
.alt .shot.phone{max-height:460px;width:auto;max-width:100%}
.store-copy{max-width:800px;font-size:16px;line-height:1.8}
@media(max-width:799px){
  .app-hero .shot.phone{max-height:400px}
  .alt .shot.phone{max-height:360px}
  .alt{gap:20px;padding-block:28px}
  .alt-img{display:flex;justify-content:center}
}
@media(max-width:640px){
  .shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .shots .shot{max-height:360px;width:auto;max-width:100%;scroll-snap-align:start}
}
.chips.links a{min-height:44px}
.more{display:inline-flex;align-items:center;min-height:44px}
.link-list a{display:inline-flex;align-items:center;min-height:44px}
.link-list li{padding-block:8px}

@media(min-width:700px){
  .tool-cards.tc-1{grid-template-columns:minmax(0,1fr)}
  .tc-1 .tool-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .tc-1 .tc-img{border-bottom:0;align-self:center}
}
/* Keep the studio overview compact while preserving the original photo crops. */
@media(max-width:639px){
  .gallery figcaption{font-size:14px}
  .pics{gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .pics .pic.port,.pics .pic.land{flex:none;scroll-snap-align:start}
  .pics .pic img{height:240px;width:auto;max-width:none}
  .pics .pic figcaption{width:0;min-width:100%}
  .cards.c3 .stage{height:200px;padding:16px}
}