/* Arupix 자체 호스팅 서체(r5 · 2026-09-18) — Google Fonts latin 부분집합 woff2 · OFL(Inter Tight · Instrument Serif · DM Mono) · 라이선스는 pack 이 fonts/LICENSES/ 에 동봉 */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300 500;font-display:swap;src:url(assets/fonts/inter-tight.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/dm-mono-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/dm-mono-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-400i.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Arupix — 우리 에이전시 판 · 문법 출처: study/hobro-eye · study/oimachi-eye · AGENCY-LEARN §1·§2 · GRAMMAR-CANON G-B1/B3/B5/B7/H5
   r3(2026-09-11) 이식: 판 뒤집힘(revelatio §3 · upvent §13) · 낱말 밝아짐(boldium §11) · 숫자 채움(agr §12) · 세 칸 라벨 줄+개수(agr §12) · 라벨 굴림 호버(agr §12)
   · 형제 흐려짐+↗ 회전(boldium §11) · 12px 나타남(launchcompany §9) · 표식+진행 고리(upvent §13)는 8px 격자와 충돌해 뺐다(REPORT-260911-ARUPIX-r3 §1) */
:root{
  --u: calc(100vw / 1440);
  --bg:#efeeea; --bg0:rgba(239,238,234,0); --card:#e3e1dc; --card2:#fff; --ink:#0b0b0b; --ink2:#2b2a27; --g1:#6b6965; --g2:#8a8783; --dim:#b3b1ac; --line:rgba(11,11,11,.14); --fill:#fff; --fill-h:#dcdad5; --r:5px; --inv:0;
  --live:#1fd55b;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
/* 판 뒤집힘 — 화면 가운데(vh/2)가 든 대목이 어두우면 판 전체(머리띠·알약·커서 라벨·로고까지)가 0.35s 에 뒤집힌다 (revelatio §3 html.light 토큰 · upvent §13 바탕 색칠) */
html.is-dark{--bg:#0b0b0b; --bg0:rgba(11,11,11,0); --card:#1a1a18; --card2:#161615; --ink:#efeeea; --ink2:#d3d1cc; --g1:#9a9894; --g2:#7d7b77; --dim:#4a4946; --line:rgba(239,238,234,.18); --fill:rgba(255,255,255,.14); --fill-h:rgba(255,255,255,.26); --inv:1}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.35;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;transition:background-color .35s,color .35s}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
p,h1,h2,h3,figure{margin:0}
img,video{display:block;max-width:100%}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.mono{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.02em;text-transform:uppercase;line-height:1.2;transition:color .35s}
.disp{font-weight:500;letter-spacing:-.05em;text-transform:uppercase}
.lead{font-size:34px;font-weight:300;line-height:1.08;letter-spacing:-.03em}
.lead em{font-size:1.06em}
/* 대목 머리 — 세 칸 줄(라벨 / 문장 / 오른쪽 개수) + 1px 머리선 (agr §12 ⓑⓒ) */
.sec__head{position:relative;padding:14px 0 0;margin:0 8px 34px;border-top:1px solid var(--line);transition:border-color .35s}
.sec__label{margin-bottom:22px;color:var(--g1)}
.sec__count{position:absolute;right:0;top:14px;color:var(--g1)}
.sec__head .lead{margin-left:calc(469 * var(--u));width:calc(600 * var(--u));max-width:700px}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:0;border-radius:5px;background:var(--fill);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background-color .35s,color .35s;cursor:pointer}
.pill:hover{background:var(--fill-h);transition-duration:.2s}
.pill--dark{background:var(--ink);color:var(--bg)}
.pill--dark:hover{background:var(--ink2)}
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:5px;appearance:none;-webkit-appearance:none;background:var(--fill);font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background-color .35s,color .35s}
.btn:hover{transition-duration:.2s}
.btn--dark{background:var(--ink);color:var(--bg)}
.btn--dark:hover{background:var(--ink2)}
/* 라벨 굴림 호버 — 같은 글이 바로 아래 한 벌 더(창 높이 = 이동 거리 1.2em), 호버에 0.2s 로 굴러 올라간다 (agr §12 ⓓ · r3-r1: 3em 상자는 0.2초 중 60% 가 빈 알약이었다 — AD-r3 지적 5) */
.roll{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2em;vertical-align:top}
.roll__in{display:block;transition:transform .2s cubic-bezier(.5,0,.15,1)}
.roll__in>span{display:block;height:1.2em;line-height:1.2em;white-space:pre}
.pill:hover .roll__in,.btn:hover .roll__in,.case:hover .roll__in,a:hover>.roll .roll__in{transform:translateY(-1.2em)}
/* ↗ 화살표 — 호버에 45° 돌아 → 가 된다 (boldium §11 ⑥) */
/* A vector mask keeps navigation arrows independent of mobile emoji fonts. */
.arw,.btn>[aria-hidden="true"]{position:relative;display:inline-block;flex:0 0 1em;width:1em;height:1em;overflow:hidden;text-indent:-9999px;white-space:nowrap;vertical-align:-.1em;font-style:normal;line-height:1;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.arw::after,.btn>[aria-hidden="true"]::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M5 5h14v14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M5 5h14v14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.case:hover .arw,.cpanel__card:hover .arw,a:hover>.arw{transform:rotate(45deg)}
/* 12px 나타남 — 본문·문장은 뒤섞임 대신 12px 한 값으로 (launchcompany §9 ⓐ · 뒤섞임은 제목·라벨에만 upvent §13) */
[data-rv]{opacity:0;transform:translateY(12px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
[data-rv].is-in{opacity:1;transform:none}
/* r3-r2 안전판 — JS 가 안 돌면(html.no-js) · 움직임 줄이기면 나타남·조각 열림을 기다리지 않고 바로 보인다 */
html.no-js [data-rv]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none;transition:none} .sliced .ch{clip-path:none;color:var(--ink);transition:none}}
.btn--lg{height:52px;padding:0 22px;font-size:17px}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.dot--live{background:var(--live)}
.mark{display:block;flex:none}
.mark img{width:32px;height:32px}

/* 커서 — 고리 + 라벨 */
.cursor{position:fixed;left:0;top:0;z-index:99;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor__label{position:absolute;left:14px;top:14px;transform:scale(0);transform-origin:0 0;background:var(--ink);color:var(--bg);font-size:12px;font-weight:500;padding:5px 9px;border-radius:5px;white-space:nowrap;transition:transform .2s,background-color .35s,color .35s}
.cursor.is-on .cursor__label{transform:scale(1)}

/* ── 머리띠 ── */
.hd{position:fixed;left:0;top:0;right:0;z-index:50;height:48px;display:flex;align-items:center;padding:0 12px;gap:6px;transition:background .35s;background:linear-gradient(var(--bg),var(--bg0))}
.hd.is-solid{background:var(--bg)}
.hd__logo{display:flex;align-items:center;gap:7px;margin-right:12px;flex:none}
.hd__logo img,.ft__logo img,.cpanel__mark img{filter:invert(var(--inv));transition:filter .35s}
.hd__word{width:73.267px;height:32px}
.hd__nav{display:flex;gap:6px}
.hd__right{margin-left:auto;display:flex;gap:10px;align-items:center}
.hd__mail{color:var(--g1)}
.hd__plus{display:none;width:26px;padding:0;justify-content:center;font-size:18px;font-weight:300}
.cpanel{position:absolute;right:12px;top:54px;width:320px;display:none;flex-direction:column;gap:6px}
.cpanel.is-open{display:flex}
.cpanel__card{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:var(--card2);border-radius:6px;padding:12px 14px;font-size:12px;color:var(--g1);box-shadow:0 12px 30px rgba(0,0,0,.10);transition:background-color .35s,color .35s}
.cpanel__card b{color:var(--ink);font-size:14px;font-weight:500;grid-column:2}
.cpanel__card small{grid-column:2;font-size:12px;line-height:1.35;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cpanel__mark{grid-row:1/3;width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.cpanel__mark img{width:32px;height:32px}
.cpanel__card .arr{position:absolute;right:12px;top:10px;font-size:12px;color:var(--ink)}
.cpanel__card--info{display:grid;grid-template-columns:1fr 1fr;row-gap:10px;line-height:1.4}
.cpanel__card--info a{color:var(--ink);font-weight:500}

/* ── 첫 화면 ── */
.hero{padding:120px 8px 0}
.hero__tag{color:var(--g1);margin-bottom:34px}
.hero__title{font-size:calc(66 * var(--u));font-weight:300;line-height:1.02;letter-spacing:-.04em;height:2.04em;white-space:nowrap;overflow:hidden}
.hero__title em{font-size:1.06em}
.hero__grid{display:grid;grid-template-columns:calc(1078 * var(--u)) 1fr;gap:8px;margin-top:40px}
/* r3-r2(민준 «표제 밑에 사진 안보인다») — 사진은 세 겹으로 첫 프레임부터 선다: ① 바탕 background-image ② <img.hero__still>(영상 위 · 영상이 돌기 시작하면 걷힘) ③ video poster. 어느 한 겹이 죽어도 사진이 남는다 */
.hero__media{position:relative;height:min(calc(612 * var(--u)),calc(100vh - 351px));border-radius:var(--r);overflow:hidden;background:#d8d6d1 url(assets/reel-poster-800.jpg) center/cover no-repeat} /* r5: 세 겹 중 바탕 겹은 800w(77KB) — 1440 원본(219KB)을 두 번 받지 않게 */
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .5s ease}
.hero__still.is-off{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero__still.is-off{opacity:1}}
.hero__media-wrap{min-width:0}
.hero__badge{margin:8px 0 0 2px;color:var(--g1);font-size:11px;letter-spacing:.06em}
.side{height:min(calc(612 * var(--u)),calc(100vh - 351px));overflow:hidden}
.side__scroll{height:100%;overflow-y:auto;scrollbar-width:none;padding-left:8px}
.side__scroll::-webkit-scrollbar{display:none}
.side__item{display:block;padding:8px 8px 18px;border-radius:var(--r);transition:background .2s}
.side__item:hover{background:#e6e4df}
.side__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.side__head b{font-size:14px;font-weight:500}
.side__head small{font-size:12px;color:var(--g1)}
.side__ic i{width:11px;height:11px;display:block;position:relative}
.side__ic .plus::before,.side__ic .plus::after{content:"";position:absolute;background:var(--ink);left:50%;top:0;width:1.2px;height:100%;transform:translateX(-50%)}
.side__ic .plus::after{transform:translateX(-50%) rotate(90deg)}
.side__item > b{display:block;font-size:14px;font-weight:500;line-height:1.2;margin-bottom:6px}
.side__item p{font-size:12px;color:var(--g1);line-height:1.4;margin-bottom:12px}
.side__item img{width:100%;height:184px;object-fit:cover;object-position:top;border-radius:var(--r)}

/* ── 선언 띠 (G-B1 · G-B2) — 바탕은 대목이 아니라 판 뒤집힘(data-theme=dark)이 칠한다 ── */
.claim{position:relative;margin-top:calc(120 * var(--u));padding:calc(90 * var(--u)) 8px calc(120 * var(--u))}
.claim__label{color:var(--g1);margin-bottom:calc(60 * var(--u))}
/* 낱말 밝아짐 — 굴림에 매임(창 70%→16.4%) · 흐린 한 벌 위에 밝은 한 벌을 마스크(--p + 20% 이음매)로 (boldium §11 ② · 토큰 전이를 살리려 background-clip 대신 mask) */
.claim__big{position:relative;width:calc(760 * var(--u));min-width:320px;margin:0 auto;text-align:center;font-size:22px;font-weight:500;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:var(--dim);transition:color .35s}
.claim__big::after{content:attr(data-text);position:absolute;inset:0;color:var(--ink);transition:color .35s;-webkit-mask-image:linear-gradient(#000 var(--p,0%),transparent calc(var(--p,0%) + 20%));mask-image:linear-gradient(#000 var(--p,0%),transparent calc(var(--p,0%) + 20%))}
.claim__body{width:540px;max-width:100%;margin:36px auto 0;text-align:center;font-size:16px;line-height:1.35;color:var(--ink2);transition:color .35s}
.claim__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:calc(90 * var(--u)) 0 0;border-top:1px solid var(--line);padding-top:20px;transition:border-color .35s}
.claim__facts div{display:flex;flex-direction:column;gap:12px}
.claim__facts b{font-size:calc(72 * var(--u));font-weight:300;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.claim__facts b i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.8em}
.claim__facts .mono{color:var(--g1)}
.bigcta{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:calc(120 * var(--u));color:inherit}
.bigcta__q{font-size:calc(40 * var(--u));font-weight:300;line-height:1;letter-spacing:-.03em}
.bigcta__word{display:grid;justify-items:center;margin-top:calc(18 * var(--u));font-size:calc(150 * var(--u));line-height:.9;font-weight:300;letter-spacing:-.05em;height:calc(140 * var(--u))}
.bigcta__word > span{grid-area:1/1;display:flex;justify-content:center;white-space:pre}
.bigcta__word b{font-weight:inherit;display:inline-block;white-space:pre;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
.bigcta__word b.is-out{transform:translateY(-45%);opacity:0}
.bigcta__word b.is-pre{transform:translateY(45%);opacity:0;transition:none}
.bigcta__arc{position:absolute;top:50%;width:calc(60 * var(--u));height:calc(140 * var(--u));transform:translateY(-30%)}
.bigcta__arc--l{left:calc(150 * var(--u))} .bigcta__arc--r{right:calc(150 * var(--u))}
.bigcta__arc i{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;width:calc(200 * var(--u));height:100%;opacity:0;transition:opacity .3s,transform .3s}
.bigcta__arc--l i{left:0;clip-path:inset(0 calc(100% - 22px) 0 0)} .bigcta__arc--r i{right:0;left:auto;clip-path:inset(0 0 0 calc(100% - 22px))}
.bigcta__arc i:nth-child(1){opacity:1}
.bigcta__arc--l i:nth-child(2){transform:translateX(-18px)} .bigcta__arc--l i:nth-child(3){transform:translateX(-36px)}
.bigcta__arc--r i:nth-child(2){transform:translateX(18px)} .bigcta__arc--r i:nth-child(3){transform:translateX(36px)}
.bigcta:hover .bigcta__arc i{opacity:1}
.bigcta:hover .bigcta__arc i:nth-child(2){transition-delay:.06s} .bigcta:hover .bigcta__arc i:nth-child(3){transition-delay:.12s}

/* ── 작업 — 케이스 행 ── */
.work{padding:calc(150 * var(--u)) 0 0}
.work__all{position:absolute;right:0;bottom:0}
.work__list{margin:0 8px;border-top:1px solid var(--line);transition:border-color .35s}
.case{display:grid;grid-template-columns:calc(470 * var(--u)) 1fr;min-height:250px;border-bottom:1px solid var(--line);padding:12px 0;color:var(--ink);transition:border-color .35s}
/* 형제 흐려짐 — 한 행에 커서가 오르면 나머지 행의 «글 열»만 .45 로 눕는다 · 사진 세 칸은 1 그대로 (boldium §11 은 검은 바탕의 글줄용 — 크림 바탕의 사진을 흐리면 «로딩»으로 읽힌다 · AD-r3 지적 1) */
@media (hover:hover){.work__list:hover>.case .case__info{opacity:.45} .work__list>.case:hover .case__info{opacity:1}}
.case__info{position:relative;display:flex;flex-direction:column;padding-right:40px;transition:opacity .3s}
.case__name b{display:block;font-size:16px;font-weight:500;line-height:1.15}
.case__name span{font-size:12px;color:var(--g1)}
.case__info p{margin-top:auto;font-size:13px;color:var(--g1);line-height:1.4;max-width:330px;padding-top:24px}
.case__meta{margin-top:14px;color:var(--ink)}
.case__media{display:grid;grid-template-columns:1.6fr 1.6fr .8fr;gap:5px}
.case__media img{width:100%;height:calc(226 * var(--u));object-fit:cover;object-position:top;border-radius:var(--r);transition:transform .8s cubic-bezier(.16,1,.3,1);background:#d8d6d1}
.case__phone{object-position:top center}
.case:hover .case__media img{transform:scale(1.02)}
/* 업종 필터 칩 — 선언문 끝줄 높이의 태그(revelatio §3 «선언문 + 필터 태그 → 작업 격자») · 누름 영역 44 · 칩 30 · JS 없으면 칩 숨김 + 전부 보임
   AD-arupix-portfolio-0914-1 지적 4: >1100 은 머리 격자 왼쪽 빈 열에 넣어 칩 아래 끝을 lead 끝줄·«Ask for more» 아래 끝과 맞춘다(누름 영역 44 가운데 칩 30 → bottom −7) · 칩 숫자 없음 · 틈은 내비 알약과 같은 6 */
.work__filter{position:absolute;left:0;bottom:-7px;display:flex;align-items:center;gap:6px;margin:0}
.wf{display:inline-flex;align-items:center;height:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wf__in{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:var(--r);background:var(--fill);font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s,color .2s}
.wf__in i{font-style:normal;font-size:11px;color:var(--g1);transition:color .2s}
.wf:hover .wf__in{background:var(--fill-h)}
.wf[aria-pressed="true"] .wf__in{background:var(--ink);color:var(--bg)}
.wf[aria-pressed="true"] .wf__in i{color:var(--dim)}
.wf:focus-visible{outline:none}
.wf:focus-visible .wf__in{outline:2px solid var(--ink);outline-offset:2px}
.wf__status{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.no-js .work__filter{display:none}
.case[hidden]{display:none}

/* ── 공정 행 (hobro) ── */
.process{padding:calc(150 * var(--u)) 0 0}
.rows{position:relative;width:calc(900 * var(--u));margin:0 auto;border-top:1px solid var(--ink)}
.row{position:relative;display:grid;grid-template-columns:1fr;justify-items:center;padding:calc(26 * var(--u)) 0 calc(28 * var(--u));border-bottom:1px solid var(--ink);color:var(--ink);transition:color .3s}
.row__band{position:absolute;top:0;bottom:0;left:calc(-270 * var(--u));right:calc(-270 * var(--u));background:var(--ink);transform:scaleY(0);transform-origin:50% 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .35s;border-radius:8px}
.row__t{position:relative;font-size:calc(60 * var(--u));font-weight:300;line-height:1;letter-spacing:-.04em}
.row__n{position:absolute;left:0;top:calc(46 * var(--u));color:var(--g1);transition:color .3s}
.row__a,.row__b{position:absolute;top:calc(46 * var(--u));font-size:11px;opacity:0;transition:opacity .3s}
.row__a{left:calc(-200 * var(--u))} .row__b{right:calc(-200 * var(--u))}
.row__d{position:relative;margin-top:14px;font-size:13px;color:var(--g1);width:calc(480 * var(--u));min-width:280px;text-align:center;line-height:1.4;transition:color .3s}
.row:hover{color:var(--bg);z-index:2}
.row:hover .row__band{transform:scaleY(1)}
.row:hover .row__a,.row:hover .row__b{opacity:1}
.row:hover .row__n,.row:hover .row__d{color:var(--dim)}
.rowimg{position:fixed;left:auto;right:calc(60 * var(--u));top:0;width:calc(300 * var(--u));height:calc(190 * var(--u));pointer-events:none;z-index:40;opacity:0;transform:translateY(-50%) scale(.92);transition:opacity .3s,transform .3s;border-radius:6px;overflow:hidden}
.rowimg.is-on{opacity:1;transform:translateY(-50%)}
.rowimg img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ── 서비스 4열 목록 ── */
.services{padding:calc(150 * var(--u)) 0 calc(150 * var(--u))} /* 아래 간격을 이 대목이 가진다 — 뒤집힘(가운데 기준)이 목록 정착 컷까지 어둡게 */
.svclist{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,30px);grid-auto-flow:column;padding:0 8px}
.svclist li{height:30px;line-height:30px;border-bottom:1px solid var(--line);font-size:18px;font-weight:400;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px;transition:border-color .35s}

/* ── 가격 — 포함 대목과 한 어두운 덩어리(data-theme=dark · AD-r3 지적 4 (b)) · 카드가 화면 안에서 검정→크림으로 뒤집히지 않는다 ── */
.pricing{padding:0 8px 0}
.price{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.price__l{background:var(--card);border-radius:var(--r);padding:20px 20px 20px;display:flex;flex-direction:column;min-height:420px;transition:background-color .35s}
.price__big{font-size:calc(64 * var(--u));font-weight:300;letter-spacing:-.04em;line-height:1;margin-top:20px}
.price__big em{font-size:1.06em}
.price__sub{margin-top:24px;max-width:520px;font-size:16px;line-height:1.35;color:var(--ink2);transition:color .35s}
.price__btns{margin-top:auto;padding-top:40px;display:flex;gap:6px}
.price__list{background:var(--card2);border-radius:var(--r);padding:12px 20px;display:flex;flex-direction:column;justify-content:center;transition:background-color .35s}
.price__list li{display:flex;justify-content:space-between;align-items:center;height:52px;border-bottom:1px solid var(--line);font-size:16px;font-weight:400;transition:border-color .35s}
.price__list li:last-child{border-bottom:0}

/* ── 소개 ── */
.about{padding:calc(150 * var(--u)) 8px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.about__card{background:var(--card);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;min-height:560px;transition:background-color .35s}
.about__big{font-size:34px;font-weight:300;line-height:1.05;letter-spacing:-.03em;margin-top:12px;max-width:600px}
.about__big em{font-size:1.06em}
.about__body{margin-top:28px;font-size:16px;line-height:1.4;max-width:560px;color:var(--ink2);transition:color .35s}
.about__btns{margin-top:auto;padding-top:40px;display:flex;gap:6px}
.about__grid{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px}
.about__shot{position:relative;border-radius:var(--r);overflow:hidden;background:#d8d6d1;display:flex;flex-direction:column}
.about__shot img{aspect-ratio:5/4;width:100%;height:auto;object-fit:cover;object-position:top;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.about__shot:hover img{transform:scale(1.03)}
.about__shot figcaption{position:relative;padding:10px 12px 12px;background:var(--card);color:var(--ink);font-size:13px;line-height:1.15;transition:background-color .35s,color .35s}
.about__shot b{display:block;font-weight:500}
.about__shot span{color:var(--g1);font-size:12px}

/* ── 아웃트로 (G-B3 · G-B6 · hobro 조각 열림) ── */
.outro{padding:calc(170 * var(--u)) 8px calc(90 * var(--u))}
.outro__title{font-size:calc(100vw / 3.4);line-height:.82;text-align:center;white-space:nowrap}
.sliced__line{display:block}
.sliced .ch{display:inline-block;color:var(--dim);clip-path:inset(0 46% 0 46%);transition:clip-path .7s cubic-bezier(.2,.8,.2,1),color .5s .4s}
.sliced.is-in .ch{clip-path:inset(0 0 0 0);color:var(--ink);transition:clip-path .7s cubic-bezier(.2,.8,.2,1),color .35s}
html.no-js .sliced .ch{clip-path:none;color:var(--ink)}
.outro__cta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:calc(90 * var(--u));border-top:1px solid var(--line);padding-top:24px;transition:border-color .35s}
.outro__cta .lead{width:420px}

/* ── 발치 ── */
.ft{padding:calc(90 * var(--u)) 8px 30px}
.ft__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ft h3{font-size:28px;font-weight:300;letter-spacing:-.03em;line-height:1;margin-bottom:22px}
.ft ul li{border-bottom:1px solid var(--line);transition:border-color .35s}
.ft ul a,.ft ul span{display:flex;align-items:center;height:38px;font-size:14px;font-weight:400;color:var(--g1);transition:color .35s} /* 2026-10-08 C01: 공식 PSI 대비 실패(발치 링크 #8a8783/#efeeea 3.08:1) → 기존 중립색 --g1(4.72:1 · 어두운 판 6.84:1) */
.ft ul a:hover{color:var(--ink)}
.ft__clocks li{display:flex;align-items:center;gap:12px;height:38px}
.ft__clocks .mono{color:var(--ink)}
.ft__bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:80px;color:var(--g1)}
.ft__logo{flex:none}
.ft__logo img{width:140.75px;height:40px}

/* ── 899 ── */
@media (max-width:1100px){
  .sec__head .lead{margin-left:0;width:80%;max-width:640px}
  .hero{padding-top:100px}
  .hero__title{font-size:42px;height:auto;min-height:3.1em;white-space:normal}
  .hero__grid{grid-template-columns:1fr}
  .hero__media{height:min(calc(100vw * .56),calc(100vh - 340px))} /* HUD 가 899×800 접힘선 안에 */
  .side{height:auto;overflow:visible;margin-top:24px}
  .side__scroll{height:auto;overflow:visible;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
  .side__item img{order:-1;height:auto;aspect-ratio:16/9;margin-bottom:10px}
  .side__item{display:grid;grid-template-columns:1fr;padding:0 0 12px}
  .side__item:nth-child(n+5){display:none}
  .claim__facts b{font-size:48px}
  .bigcta__word{font-size:96px;height:90px}
  .bigcta__arc{width:40px;height:100px} .bigcta__arc--l{left:16px} .bigcta__arc--r{right:16px}
  .bigcta__arc--l i:nth-child(2){transform:translateX(-8px)} .bigcta__arc--l i:nth-child(3){transform:translateX(-16px)}
  .bigcta__arc--r i:nth-child(2){transform:translateX(8px)} .bigcta__arc--r i:nth-child(3){transform:translateX(16px)} /* 18·36 은 899 에서도 오른쪽 12px 넘쳤다(r3-r1 실측 right 911) · 호 폭 40/60 비례 */
  .work .sec__head{margin-bottom:17px} /* 칩 줄 아래 끝(누름 영역 −7)에서 목록 머리선까지 24 */
  .work__filter{position:relative;left:auto;bottom:auto;margin:20px 0 0}
  .work .work__all{bottom:9px} /* 칩 줄(44) 가운데 높이에 «Ask for more»(26) */
  .case{grid-template-columns:1fr;gap:16px;min-height:0}
  .case__info{padding-right:0} .case__info p{padding-top:8px;max-width:520px}
  .case__media{grid-template-columns:1fr 1fr}
  .case__media img{height:auto;aspect-ratio:3/2}
  .case__phone{display:none}
  .rows{width:calc(100% - 16px)}
  .row__t{font-size:44px}
  .row__band{left:0;right:0}
  .row__a{left:12px} .row__b{right:12px}
  .rowimg{display:none}
  .svclist{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-flow:row dense}
  .svclist li{grid-column:2} .svclist li:nth-child(-n+5),.svclist li:nth-child(n+11):nth-child(-n+15){grid-column:1}
  .price{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about__card{min-height:0;padding-bottom:40px}
  .about__btns{padding-top:30px}
  .outro__cta{flex-direction:column;align-items:flex-start;gap:24px}
  .ft__cols{grid-template-columns:1fr 1fr;row-gap:50px}
}
/* ── 375 ── */
@media (max-width:767px){
  .hd{padding:0 8px;height:52px}
  .pill{height:36px;padding:0 12px;font-size:14px}
  .hd__plus{width:36px}
  .hd__nav .pill:nth-child(n+4){display:none}
  .hd__mail,.hd__right .pill--dark{display:none}
  .hd__plus{display:inline-flex}
  .hd__word{display:none}
  .cpanel{left:8px;right:8px;width:auto;top:50px}
  .hero{padding:76px 8px 0}
  .hero__tag{font-size:10px;margin-bottom:20px}
  .hero__title{font-size:34px;line-height:1.05;letter-spacing:-.03em;min-height:3.2em}
  .hero__grid{margin-top:24px}
  .hero__media{height:calc(100vw * .9)}
  .side__scroll{grid-template-columns:1fr}
  .side__item{grid-template-columns:76px 1fr;gap:12px}
  .side__item img{grid-row:1/3;aspect-ratio:1/1;margin:0;order:0}
  .side__item:nth-child(n+5){display:grid}
  .side__item p{display:none}
  .claim{padding:60px 8px 70px}
  .claim__big{width:auto;min-width:0;font-size:18px}
  .claim__body{font-size:14px;margin-top:24px}
  .claim__facts{grid-template-columns:1fr 1fr;row-gap:28px;margin-top:50px}
  .claim__facts b{font-size:44px}
  .bigcta{margin-top:70px}
  .bigcta__q{font-size:20px}
  .bigcta__word{font-size:44px;height:42px;margin-top:8px}
  .bigcta__arc{width:24px;height:56px;transform:translateY(-6%)} .bigcta__arc--l{left:6px} .bigcta__arc--r{right:6px}
  .bigcta__arc i{width:80px}
  .bigcta__arc--l i:nth-child(2){transform:translateX(-6px)} .bigcta__arc--l i:nth-child(3){transform:translateX(-12px)}
  .bigcta__arc--r i:nth-child(2){transform:translateX(6px)} .bigcta__arc--r i:nth-child(3){transform:translateX(12px)} /* 18·36 은 375 에서 오른쪽 4·22px 넘침(AD-r3 ⓑ) · 호 폭 24/60 비례 */
  .lead{font-size:26px}
  .sec__head .lead{width:auto}
  .work,.process,.services,.pricing,.about{padding-top:80px}
  .services{padding-bottom:0}
  .work__all{position:static;margin-top:12px}
  .work .sec__head{display:flex;flex-direction:column;align-items:stretch;margin-bottom:20px} /* 칩 36 은 누름 영역 44 안 −4 → 머리선까지 24 */
  .work .work__all{align-self:flex-start}
  .work__filter{order:2;margin:16px -8px 0;padding:0 24px 0 8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .work__filter::-webkit-scrollbar{display:none}
  .wf{flex:none}
  .wf__in{height:36px;padding:0 12px;font-size:14px}
  .sec__count{top:16px}
  .case__media{grid-template-columns:1fr 1fr}
  .case__phone{display:block}
  .case__media img:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .case__media img{aspect-ratio:1/1}
  .row{padding:18px 0 20px}
  .row__t{font-size:30px}
  .row__n{top:6px;left:50%;transform:translateX(-50%);font-size:10px}
  .row__a,.row__b{top:6px;font-size:10px}
  .row__d{width:auto;min-width:0;font-size:12px}
  .svclist{grid-template-columns:1fr;grid-auto-flow:row}
  .svclist li{grid-column:auto!important;font-size:15px}
  .svclist li:nth-child(5n+1):not(:first-child){margin-top:24px}
  .price__big{font-size:40px}
  .price__sub{font-size:14px}
  .price__list li{height:44px;font-size:14px}
  .about__big{font-size:26px}
  .about__body{font-size:14px}
  .about__grid{grid-template-columns:1fr 1fr}
  .outro{padding:80px 8px 40px}
  .outro__cta .lead{width:auto}
  .ft__cols{grid-template-columns:1fr;row-gap:36px}
  .ft ul a,.ft ul span,.ft__clocks li{height:44px}
  .ft__bottom a{display:inline-flex;align-items:center;min-height:44px}
  .ft h3{font-size:24px;margin-bottom:12px}
  .ft__bottom{flex-direction:column;align-items:flex-start;gap:16px;margin-top:50px}
}

/* ══ r4 리뉴얼(2026-09-18 · ARUPIX-0918-renewal) — 쇼릴 HUD · 이름 흐름띠 · 전부 격자 · 업종 띠 · 생성 구역은 work-build.mjs ══ */
/* 쇼릴 HUD — 지금 나오는 판 이름 + 진행선 + 타임코드(ghost-pitcher §5 «스크롤 → 타임코드» 를 «영상 시간 → 이름표» 로) · 정지 사진(z1) 위 z2 */
.hero__hud{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:14px;padding:48px 14px 12px;flex-wrap:wrap;color:#fff;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.42));pointer-events:none}
.hero__pre,.hero__now{font-size:11px;letter-spacing:.06em;white-space:nowrap}
.hero__pre{margin-right:-14px}
.hero__now{overflow:hidden;text-overflow:ellipsis;max-width:60%}
.hero__bar{flex:1;height:1px;background:rgba(255,255,255,.32);position:relative}
.hero__bar i{position:absolute;left:0;top:-1px;height:3px;width:0;background:#fff;transition:width .25s linear}
.hero__tc{font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* 이름 흐름띠 — 판 폭 통짜 · 1px 선 위아래 · 60px/s · 호버 멈춤 */
.ticker{margin:calc(60 * var(--u)) 8px 0;height:60px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:border-color .35s}
.ticker__in{display:flex;width:max-content;animation:tick 70s linear infinite}
.ticker:hover .ticker__in{animation-play-state:paused}
.ticker__in span{display:inline-flex;align-items:baseline;gap:12px;height:60px;line-height:60px;padding:0 30px 0 0;margin-right:30px;font-size:22px;font-weight:300;letter-spacing:-.02em;white-space:nowrap}
.ticker__in span i{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.ticker__in span::before{content:"";align-self:center;width:6px;height:6px;border-radius:50%;background:var(--ink);transition:background-color .35s}
.ticker__in span i{font-style:normal;color:var(--g1)}
.ticker__in span i{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__in{animation:none}}
/* 전부 — 3열 격자 · 5장마다 한 장이 2열 · 마지막 칸은 «네 자리» 부름 */
.all{padding:calc(150 * var(--u)) 0 0}
.grid{--col:calc((100vw - 32px) / 3);display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:8px;margin:0 8px}
.tile{position:relative;display:flex;flex-direction:column;color:var(--ink);min-width:0}
.tile--wide{grid-column:span 2}
.tile__img{display:block;height:var(--col);overflow:hidden;border-radius:var(--r);background:#d8d6d1}
.tile__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.tile:hover .tile__img img{transform:scale(1.03)}
.tile__cap{display:flex;align-items:baseline;gap:10px;padding:10px 2px 2px;font-size:14px;line-height:1.2}
.tile__cap b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__cap span{color:var(--g1);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__cap .arw{margin-left:auto;font-size:13px;color:var(--g1)}
.tile:hover .tile__cap .arw{color:var(--ink);transform:rotate(45deg)}
@media (hover:hover){.grid:hover>.tile .tile__cap{opacity:.45} .grid>.tile:hover .tile__cap{opacity:1} .tile__cap{transition:opacity .3s}}
.tile[hidden]{display:none}
.tile--cta .tile__ask{height:var(--col);display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:18px;border-radius:var(--r);background:var(--card);transition:background-color .35s}
.tile--cta b{font-size:22px;font-weight:300;line-height:1.1;letter-spacing:-.03em}
.tile--cta .btn{align-self:flex-start}
.tile--cta:hover .tile__ask{background:var(--fill-h)}
/* 업종 띠 — 큰 글 행(72px) · 번호/글/개수 세 칸 · 호버에 글이 16px 밀리고 설명이 펴진다 · 그림은 #rowimg 가 따라온다 */
.kinds{padding:calc(150 * var(--u)) 0 0}
.bands{margin:0 8px;border-top:1px solid var(--line);transition:border-color .35s}
.band{border-bottom:1px solid var(--line);transition:border-color .35s}
.band__btn{display:grid;grid-template-columns:calc(120 * var(--u)) 1fr calc(200 * var(--u));align-items:baseline;width:100%;padding:calc(26 * var(--u)) 0 calc(24 * var(--u));margin:0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.band__n{color:var(--g1)}
.band__t{font-size:calc(72 * var(--u));font-weight:300;line-height:1;letter-spacing:-.04em;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.band__c{text-align:right;color:var(--g1)}
.band__d{grid-column:2;grid-row:2;display:block;max-width:480px;font-size:13px;line-height:1.4;color:var(--g1);max-height:0;overflow:hidden;opacity:0;transition:max-height .35s cubic-bezier(.2,.8,.2,1),opacity .3s,margin .35s}
.band__btn:hover .band__t,.band__btn:focus-visible .band__t{transform:translateX(calc(16 * var(--u)))}
.band__btn:hover .band__d,.band__btn:focus-visible .band__d{max-height:60px;opacity:1;margin-top:12px}
.band__btn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--r)}
.ft ul a .mono{margin-left:auto;color:var(--g1)}
.ft ul a{gap:10px}
@media (max-width:1100px){
  .grid{--col:calc((100vw - 24px) / 2);grid-template-columns:1fr 1fr}
  .tile--wide{grid-column:auto} /* 2열에서는 2열 카드가 정사각으로 돌아간다(picture 가 hsq 를 낸다) · 부름 타일이 한 줄을 다 써서 끝 행이 늘 닫힌다(AD 지적 4) */
  .tile--cta{grid-column:1/-1} .tile--cta .tile__ask{height:auto;min-height:200px;flex-direction:row;align-items:flex-end;justify-content:space-between} .tile--cta b{max-width:520px} .tile--cta .btn{align-self:flex-end}
  .tile--cta.is-sq{grid-column:auto} .tile--cta.is-sq .tile__ask{height:var(--col);min-height:0;flex-direction:column;align-items:flex-start;justify-content:space-between} .tile--cta.is-sq .btn{align-self:flex-start} /* 보이는 판이 홀수면 빈 칸에 정사각으로 앉는다 */
  .tile--cta .tile__ask>.mono{align-self:flex-start} /* AD recheck-2 D: 라벨은 위 */
  .band__btn{grid-template-columns:60px 1fr 90px}
  .band__t{font-size:44px}
  .band__btn:hover .band__d{max-height:80px}
  .band__d{grid-column:2/4}
}
@media (max-width:767px){
  .ticker{margin-top:32px;height:48px} .ticker__in span{height:48px;line-height:48px;font-size:17px}
  .hero__pre{display:none} .hero__now{max-width:100%} .hero__bar{flex-basis:100%;order:3} .hero__hud{gap:8px 10px;padding-top:40px} .hero__tc{margin-left:auto}
  .all,.kinds{padding-top:80px}
  .grid{--col:calc((100vw - 22px) / 2);gap:6px 6px}
  .tile__cap{flex-wrap:wrap;gap:2px 8px;padding-top:8px;font-size:13px} .tile__cap span{width:100%;order:3} .tile__cap .arw{display:none}
  .tile--cta b{font-size:16px} .tile--cta .tile__ask{padding:14px;gap:12px;flex-direction:column;align-items:flex-start} .tile--cta.is-sq .btn{flex-shrink:0} /* AD recheck-3 G: 177px 칸에서 단추가 눌리지 않게 */ .tile--cta .btn{height:36px;font-size:13px;padding:0 12px}
  .band__btn{grid-template-columns:36px 1fr 70px;padding:18px 0 16px}
  .band__t{font-size:30px}
  .band__d{grid-column:1/4}
  .band__btn:hover .band__t{transform:none}
  .band__d{max-height:none;opacity:1;margin-top:8px;font-size:12px}
}

/* ══ r5(2026-09-18 · ARUPIX-0918-r5 «신뢰 · 가격 · 대목·쪽 추가 · SEO/GEO») — 안심 띠 · 실측 행 · 약속 행 · 묻는 말 · 안내 글 행 · 하위 쪽 틀 · 생성은 site-build.mjs ══
   문법 출처: 실측 행 = revelatio §3 숫자 릴 행(머리선 · 큰 숫자 · 오른쪽 설명) · 약속 행 = boldium §11 전문 분야 행(1px 줄 · 큰 이름 ‖ 목록) · 묻는 말 = boldium §11 FAQ 행(가는 +)
   · 안내 글 행 = researchdesign §10 LATEST POSTS(번호 · 큰 제목 · 오른쪽 분류) + hobro 따라오는 그림 · 하위 쪽 머리 = 블로그 bl__head(1px 머리선 · 크럼 · 66u 표제) · 줄 번호 열 120u 는 업종 띠와 같은 값 */
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;text-decoration-color:var(--g2);transition:text-decoration-color .2s}
.u:hover{text-decoration-color:var(--ink)}
/* 안심 띠 — 첫 화면 바로 밑 네 칸 · 머리선 · 번호/굵은 한 줄/흐린 한 줄 */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0 0;border-top:1px solid var(--line);padding-top:14px;transition:border-color .35s}
.assure li{display:grid;grid-template-columns:28px 1fr;row-gap:3px;align-items:baseline}
.assure__n{grid-row:1/3;color:var(--g1)}
.assure b{font-size:15px;font-weight:500;letter-spacing:-.01em}
.assure span:last-child{font-size:13px;color:var(--g1)}
/* 실측 행 */
.proof{padding:calc(150 * var(--u)) 0 0}
.pfs{margin:0 8px;border-top:1px solid var(--line);transition:border-color .35s}
.pf{display:grid;grid-template-columns:calc(120 * var(--u)) calc(560 * var(--u)) 1fr;grid-template-rows:auto 1fr;align-items:start;padding:calc(22 * var(--u)) 0 calc(30 * var(--u));border-bottom:1px solid var(--line);transition:border-color .35s}
.pf__n{grid-row:1/3;color:var(--g1);padding-top:6px}
.pf__v{grid-row:1/3;font-size:calc(150 * var(--u));font-weight:300;line-height:.84;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf__k{font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.1}
.pf__t{margin-top:10px;max-width:440px;font-size:15px;line-height:1.4;color:var(--g1);transition:color .35s}
/* 약속 행 — 어두운 «돈» 장의 첫 대목 · 들어오면 표식이 그어진다(왼쪽부터 clip) · 호버에 이름이 16u 밀린다(업종 띠와 같은 값) */
.promises{padding:calc(150 * var(--u)) 0 0}
.pms{margin:0 8px;border-top:1px solid var(--line);transition:border-color .35s}
.pm{position:relative;display:grid;grid-template-columns:calc(120 * var(--u)) calc(640 * var(--u)) 1fr 40px;align-items:baseline;padding:calc(24 * var(--u)) 0 calc(26 * var(--u));border-bottom:1px solid var(--line);transition:border-color .35s,opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.pm__n{color:var(--g1)}
.pm__k{font-size:calc(52 * var(--u));padding-right:24px;font-weight:300;line-height:1;letter-spacing:-.04em;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pm__t{max-width:460px;font-size:17px;line-height:1.38;color:var(--ink2);transition:color .35s}
.pm__tick{justify-self:end;align-self:center;width:22px;height:12px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg) translate(2px,-2px);clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.2,.8,.2,1) .35s,border-color .35s}
.pm.is-in .pm__tick,html.no-js .pm__tick{clip-path:inset(0 0 0 0)}
@media (hover:hover){.pm:hover .pm__k{transform:translateX(calc(16 * var(--u)))}}
/* 묻는 말 — <details> 여닫이 · 가는 + 가 45° 돌아 × · 답은 번호 열 오른쪽에 */
.faq{padding:calc(150 * var(--u)) 0 0}
.qa__list{margin:0 8px;border-top:1px solid var(--line);transition:border-color .35s}
.qa{border-bottom:1px solid var(--line);transition:border-color .35s}
.qa__q{display:grid;grid-template-columns:calc(120 * var(--u)) 1fr 28px;align-items:baseline;padding:calc(22 * var(--u)) 0;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.qa__q::-webkit-details-marker{display:none}
.qa__n{color:var(--g1)}
.qa__t{font-size:calc(32 * var(--u));font-weight:300;line-height:1.1;letter-spacing:-.03em;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.qa__x{position:relative;align-self:center;justify-self:end;width:16px;height:16px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.qa__x::before,.qa__x::after{content:"";position:absolute;left:50%;top:0;width:1.2px;height:100%;background:var(--ink);transform:translateX(-50%);transition:background-color .35s}
.qa__x::after{transform:translateX(-50%) rotate(90deg)}
.qa[open] .qa__x{transform:rotate(45deg)}
@media (hover:hover){.qa__q:hover .qa__t{transform:translateX(calc(16 * var(--u)))}}
.qa__q:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--r)}
.qa__a{padding:0 40px calc(28 * var(--u)) calc(120 * var(--u))}
.qa__a p{max-width:640px;font-size:17px;line-height:1.5;color:var(--ink2);transition:color .35s}
.qa[open] .qa__a{animation:qaIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.qa[open] .qa__a{animation:none}}
/* 안내 글 행 — 공정 행과 같은 «검은 띠 차오름» 을 줄 전체 폭으로 · 그림은 #rowimg 가 따라온다 */
.journal{padding:calc(150 * var(--u)) 0 0}
.jrs{margin:0 8px;border-top:1px solid var(--line);transition:border-color .35s}
.jrs li{border-bottom:1px solid var(--line);transition:border-color .35s}
.jr{position:relative;display:grid;grid-template-columns:calc(120 * var(--u)) 1fr calc(300 * var(--u)) 28px;align-items:baseline;padding:calc(26 * var(--u)) 0 calc(28 * var(--u));color:var(--ink);isolation:isolate;transition:color .3s}
.jr::before{content:"";position:absolute;inset:0 -8px;z-index:-1;background:var(--ink);border-radius:6px;transform:scaleY(0);transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .35s}
.jr__n,.jr__m{color:var(--g1);transition:color .3s}
.jr__t{font-size:calc(40 * var(--u));font-weight:300;line-height:1.05;letter-spacing:-.035em;max-width:820px}
.jr__t em{font-size:1.06em}
.jr__m{text-align:right;padding-left:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr__a{justify-self:end}
@media (hover:hover){.jr:hover{color:var(--bg)} .jr:hover::before{transform:scaleY(1)} .jr:hover .jr__n,.jr:hover .jr__m{color:var(--dim)} .jr:hover .jr__a{transform:rotate(45deg)}}
/* 업종 띠 오른쪽 «업종 쪽» 링크 — 단추(격자 거르기)와 따로 · 행 오른쪽 아래 */
.band{position:relative}
.band__go{position:absolute;right:0;top:calc(26 * var(--u) + .55 * 72 * var(--u));color:var(--g1);transition:color .2s}
.band__go:hover{color:var(--ink)}
.band__c{padding-bottom:0}

/* ── 하위 쪽 ── */
.pg{padding:0}
.pg__head{margin:0 8px;padding:120px 0 0}
.pg__head>*{position:relative}
.pg__crumb{color:var(--g1);border-top:1px solid var(--line);padding-top:14px;margin-bottom:calc(40 * var(--u));transition:border-color .35s,color .35s}
.pg__title{font-size:calc(96 * var(--u));font-weight:300;line-height:.98;letter-spacing:-.05em;max-width:calc(1240 * var(--u));text-wrap:balance}
.pg__title em{font-size:1.06em}
.pg__lead{margin:calc(40 * var(--u)) 0 0 calc(469 * var(--u));max-width:600px;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:var(--ink2);transition:color .35s}
.pg__jump{display:flex;flex-wrap:wrap;gap:6px;margin:32px 0 0 calc(469 * var(--u))}
.pg__jump i{font-style:normal;font-size:11px;color:var(--g1)}
.pg__heroimg{margin-top:calc(60 * var(--u))}
.pg__heroimg img{width:100%;height:calc(640 * var(--u));object-fit:cover;object-position:top;border-radius:var(--r);background:#d8d6d1}
.pg__heroimg span{display:block;margin-top:8px;color:var(--g1);font-size:11px;letter-spacing:.06em}
.pg__sec{padding-top:calc(150 * var(--u))}
.pg__sec[data-theme="dark"]{padding-top:calc(130 * var(--u));padding-bottom:calc(130 * var(--u));margin-top:calc(150 * var(--u))}
.pg__sec[data-theme="dark"]+.pg__sec{padding-top:calc(20 * var(--u))}
.pg .pricing.pg__sec{padding-left:8px;padding-right:8px}
.pg__more{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;text-decoration-color:var(--g2);white-space:nowrap}
.pg__note{margin:22px 8px 0 calc(469 * var(--u));max-width:640px;font-size:15px;line-height:1.45;color:var(--g1);transition:color .35s}
.pg__note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--g2)}
.pg__note b{color:var(--ink);font-weight:500}
.pg__note.mono{font-size:11px;line-height:1.5;letter-spacing:.04em}
.pg__prose{margin:0 8px 0 calc(469 * var(--u));max-width:640px}
.pg__prose h2{font-size:30px;font-weight:300;letter-spacing:-.03em;line-height:1.1;margin:44px 0 14px}
.pg__prose h2:first-child{margin-top:0}
.pg .tbl{margin:0 8px}
.pg .sec__head .lead a{font-size:.6em;letter-spacing:-.01em;vertical-align:.25em}
/* 2026-09-25 R6: /work/ 대목 머리의 업종 쪽 링크가 윗줄 글자 꼬리(g·y·쉼표)에 닿았다(3폭 · docs/overnight/out-arupix-flow-0925/before/work-*-heads-*.jpg) — 제 줄로 내리고 기준선 정렬 ·
   낱말 가림막(fx.js .w inline-block)이 text-decoration 을 끊어 밑줄이 공백 자리 점선으로만 남았다 → 테두리 밑줄 · display:table 은 낱말 사이 공백을 지운다(시험 캡처) → block + max-content */
.pg--work .sec__head .lead .pg__more{display:block;width:-webkit-max-content;width:max-content;max-width:100%;margin-top:.55em;vertical-align:baseline;line-height:1.25;text-decoration:none;border-bottom:1px solid var(--g2);padding-bottom:.06em}
/* 할 일 다섯 — 큰 글 행(업종 띠와 같은 격자) */
.needs__list{margin:0 8px;border-top:1px solid var(--line);transition:border-color .35s}
.needs__list li{display:grid;grid-template-columns:calc(120 * var(--u)) 1fr;align-items:baseline;padding:calc(20 * var(--u)) 0 calc(22 * var(--u));border-bottom:1px solid var(--line);transition:border-color .35s,opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.needs__list .mono{color:var(--g1)}
.needs__list b{font-size:calc(48 * var(--u));font-weight:300;line-height:1.05;letter-spacing:-.035em}
/* 공정 네 단계 — 검은 머리선 · 거대한 단계 이름 · 우리/당신 두 칸 */
.steps{margin:0 8px}
.step{display:grid;grid-template-columns:calc(120 * var(--u)) calc(560 * var(--u)) 1fr;grid-template-rows:auto 1fr;padding:calc(26 * var(--u)) 0 calc(56 * var(--u));border-top:1px solid var(--ink);transition:border-color .35s,opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.step:last-child{border-bottom:1px solid var(--ink)}
.step__n{grid-row:1/3;color:var(--g1);padding-top:8px}
.step__t{grid-row:1/3;font-size:calc(120 * var(--u));font-weight:300;line-height:.86;letter-spacing:-.055em}
.step__c p{max-width:520px;font-size:18px;line-height:1.4;color:var(--ink2);transition:color .35s}
.step__c dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:26px 0 0;max-width:560px}
.step__c dl div{background:var(--card);border-radius:var(--r);padding:12px 14px 14px;transition:background-color .35s}
.step__c dt{color:var(--g1);margin-bottom:8px}
.step__c dd{margin:0;font-size:15px;line-height:1.35}
.step__tag{grid-column:3;color:var(--g1);margin-top:18px}
/* 줄 네 칸 — 회색 카드 · 위 라벨 · 아래 문장(스테이션 · 연락 순서) */
.line{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 8px}
.line--3{grid-template-columns:repeat(3,1fr)}
.line li{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:230px;padding:16px 18px 20px;background:var(--card);border-radius:var(--r);transition:background-color .35s,opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.line .mono{color:var(--g1)}
.line b{font-size:19px;font-weight:300;line-height:1.28;letter-spacing:-.015em}
/* 두 숫자 + 문단 */
.duo{display:grid;grid-template-columns:1fr 1fr calc(560 * var(--u));gap:8px;margin:0 8px;align-items:end;border-top:1px solid var(--line);padding-top:22px;transition:border-color .35s}
.duo__n b{display:block;font-size:calc(170 * var(--u));font-weight:300;line-height:.84;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.duo__n .mono{display:block;margin-top:16px;color:var(--g1)}
.duo__t{font-size:17px;line-height:1.45;color:var(--ink2);max-width:520px;transition:color .35s}
/* 연락 — 거대한 주소 한 줄 */
.contact__mail{display:block;margin:0 8px calc(80 * var(--u));font-size:calc(128 * var(--u));font-weight:300;line-height:1;letter-spacing:-.055em;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:10px;transition:background-size .5s cubic-bezier(.2,.8,.2,1)}
.contact__mail:hover{background-size:100% 1px}
/* 다른 업종 */
.other{margin:0 8px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:8px;transition:border-color .35s}
.other li{border-bottom:1px solid var(--line);transition:border-color .35s}
.other a{display:flex;align-items:center;gap:14px;height:72px;font-size:28px;font-weight:300;letter-spacing:-.03em}
.other .mono{color:var(--g1)}
.other .arw{margin-left:auto;font-size:18px}
/* 쪽 끝 부름 */
.pg__cta{margin-top:calc(150 * var(--u));padding:calc(150 * var(--u)) 8px calc(140 * var(--u));text-align:center}
.pg__cta-q{font-size:calc(104 * var(--u));font-weight:300;line-height:.95;letter-spacing:-.05em}
.pg__cta-q em{font-size:1.06em}
.pg__cta-s{max-width:520px;margin:28px auto 0;font-size:17px;line-height:1.4;color:var(--ink2);transition:color .35s}
.pg__cta-b{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:44px}
.pg__cta+.ft{margin-top:0}
/* 판 행 — 판이 보여주는 장치 세 개(알약) */
.case__pts{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px}
.case__pts li{padding:4px 8px;border-radius:var(--r);background:var(--fill);font-size:12px;line-height:1.25;color:var(--ink);transition:background-color .35s,color .35s}
.case--pg .case__info p{margin-top:18px;padding-top:0}
.case--pg .case__meta{margin-top:auto;padding-top:18px}
.pg [data-rv].pm,.pg .needs__list [data-rv],.pg .line [data-rv]{transition-property:opacity,transform,border-color,background-color}

@media (max-width:1100px){
  .assure{grid-template-columns:1fr 1fr;row-gap:14px}
  .pf{grid-template-columns:60px 1fr;grid-template-rows:auto auto auto;padding:22px 0 26px}
  .pf__n{grid-row:1/4}
  .pf__v{grid-row:auto;font-size:96px;margin-bottom:14px}
  .pm{grid-template-columns:60px 1fr 30px;row-gap:10px;padding:22px 0}
  .pm__k{font-size:40px}
  .pm__t{grid-column:2}
  .pm__tick{grid-column:3;grid-row:1}
  .qa__q{grid-template-columns:60px 1fr 28px;padding:20px 0}
  .qa__t{font-size:24px}
  .qa__a{padding-left:60px}
  .jr{grid-template-columns:60px 1fr 28px;row-gap:8px;padding:22px 0}
  .jr__t{font-size:28px}
  .jr__m{grid-column:2;grid-row:2;text-align:left;padding-left:0}
  .jr__a{grid-column:3;grid-row:1}
  .band__go{position:static;display:inline-block;margin:0 0 18px 60px}
  .pg__head{padding-top:100px}
  .pg__title{font-size:60px;max-width:none}
  .pg__lead,.pg__jump,.pg__note,.pg__prose{margin-left:0}
  .pg__note,.pg__prose{margin-left:8px}
  .pg__lead{font-size:18px;margin-top:28px}
  .pg__heroimg img{height:auto;aspect-ratio:16/10}
  .needs__list li{grid-template-columns:60px 1fr}
  .needs__list b{font-size:34px}
  .step{grid-template-columns:60px 1fr;row-gap:18px}
  .step__n{grid-row:1/4}
  .step__t{grid-row:auto;font-size:80px}
  .step__c{grid-column:2}
  .step__tag{grid-column:2;margin-top:0}
  .line,.line--3{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr 1fr;row-gap:30px}
  .duo__n b{font-size:110px}
  .duo__t{grid-column:1/-1}
  .contact__mail{font-size:64px}
  .other{grid-template-columns:1fr}
  .pg__cta-q{font-size:64px}
}
@media (max-width:767px){
  .assure{margin-top:18px}
  .proof,.promises,.faq,.journal{padding-top:80px}
  .pf{grid-template-columns:36px 1fr}
  .pf__v{font-size:72px}
  .pf__k{font-size:19px}
  .pm{grid-template-columns:36px 1fr 24px}
  .pm__k{font-size:30px}
  .pm__t{font-size:15px}
  .qa__q{grid-template-columns:36px 1fr 24px;padding:18px 0}
  .qa__t{font-size:20px;line-height:1.15}
  .qa__a{padding:0 8px 22px 36px}
  .qa__a p{font-size:15px}
  .jr{grid-template-columns:36px 1fr 20px}
  .jr__t{font-size:22px}
  .band__go{margin-left:36px}
  .pg__head{padding-top:84px}
  .pg__title{font-size:40px;line-height:1.02;letter-spacing:-.04em}
  .pg__lead{font-size:16px}
  .pg__sec{padding-top:80px}
  .pg__sec[data-theme="dark"]{padding-top:64px;padding-bottom:64px;margin-top:80px}
  .needs__list li{grid-template-columns:36px 1fr;padding:16px 0}
  .needs__list b{font-size:24px}
  .step{grid-template-columns:36px 1fr;padding:18px 0 34px}
  .step__t{font-size:56px}
  .step__c p{font-size:16px}
  .step__c dl{grid-template-columns:1fr}
  .line,.line--3{grid-template-columns:1fr}
  .line li{min-height:0;gap:24px}
  .line b{font-size:17px}
  .duo__n b{font-size:76px}
  .contact__mail{font-size:36px;letter-spacing:-.04em}
  .other a{height:60px;font-size:22px}
  .pg__cta{padding:80px 8px 80px}
  .pg__cta-q{font-size:40px}
  .pg__cta-s{font-size:15px}
}
/* r5 수리: ≤1100 단계 번호는 번호 열이 아니라 제목 위 한 줄(«STEP 1 / 4» 가 36px 칸에서 네 줄로 쪼개졌다 · 375 실측) */
@media (max-width:1100px){.step{grid-template-columns:1fr} .step__n{grid-row:auto;padding-top:0} .step__c,.step__tag{grid-column:1}}

/* ══ r5-r1 — AD-arupix-r5-1 처분(지적 1·4·5·9·12) ══ */
/* 5: 안심 띠는 표제 바로 밑 · 첫 화면 사진 높이에서 띠 몫(≈70px)을 뺀다 → 1440×900 에서 띠·HUD 가 접힘선 안 */
.hero .assure{margin:22px 0 0}
.hero__title+.assure{margin-top:26px}
.hero__grid{margin-top:22px}
.hero__media,.side{height:min(calc(560 * var(--u)),calc(100vh - 420px))}
/* 1: 머리띠 CTA 는 메일 링크 · 메뉴(+)는 ≤767 에서만 · 전면 불투명 덮개 */
.cpanel__nav{display:none}
html.menu-open{overflow:hidden}
/* 4: 선언 문장 — 문장 대소문자 · 가는 굵기 · 크게 · 본문은 왼쪽 정렬 한 단 */
.claim__big{width:calc(1100 * var(--u));font-size:calc(64 * var(--u));font-weight:300;line-height:1.02;letter-spacing:-.035em;text-transform:none;text-wrap:balance}
.claim__body{text-align:left;width:600px;font-size:17px;line-height:1.45}
/* 9: 상자 목록 — 단 머리 셋(포함 10 · 선택 5 · 확인 5) · 문장 대소문자 · 값은 오른쪽 모노 */
.svcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;padding:0 8px}
.svc__h{color:var(--g1);padding-bottom:10px;border-bottom:1px solid var(--ink);transition:border-color .35s,color .35s}
.svc ul{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:8px}
.svc:not(:first-child) ul{grid-auto-flow:row}
.svc li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;height:40px;line-height:40px;border-bottom:1px solid var(--line);font-size:17px;font-weight:400;letter-spacing:-.015em;white-space:nowrap;transition:border-color .35s}
.svc li span:first-child{overflow:hidden;text-overflow:ellipsis}
.svc li .mono{color:var(--g1);flex:none}
@media (max-width:1100px){
  .hero__media{height:min(calc(100vw * .56),calc(100vh - 400px))} .side{height:auto}
  .claim__big{width:auto;font-size:40px}
  .svcols{grid-template-columns:1fr 1fr} .svc:first-child{grid-column:1/-1}
}
@media (max-width:767px){
  .hd__nav{display:none}
  .hd__right .hd__cta{display:inline-flex;height:44px;padding:0 14px;font-size:14px}
  .hd__plus{width:44px;height:44px;font-size:22px}
  .hd{height:60px}
  .cpanel{position:fixed;left:0;right:0;top:60px;bottom:0;width:auto;padding:8px 8px 24px;background:var(--bg);overflow:auto;gap:8px;z-index:60}
  .cpanel__nav{display:block;border-top:1px solid var(--line);margin-bottom:12px}
  .cpanel__nav a{display:flex;align-items:center;justify-content:space-between;height:56px;border-bottom:1px solid var(--line);font-size:28px;font-weight:300;letter-spacing:-.03em;color:var(--ink)}
  .cpanel__nav a[aria-current]{color:var(--g1)}
  .cpanel__nav .arw{font-size:16px;color:var(--g1)}
  .cpanel__card{box-shadow:none;background:var(--card)}
  .hero{padding-top:84px}
  .hero__title+.assure{margin-top:18px}
  .hero__media{height:calc(100vw * .72)}
  .claim__big{font-size:28px;line-height:1.08}
  .claim__body{width:auto;font-size:15px}
  .svcols{grid-template-columns:1fr;row-gap:28px} .svc ul{grid-auto-flow:row;grid-template-rows:none}
  .svc li{font-size:15px;height:44px;line-height:44px}
  .band__go{display:inline-flex;align-items:center;min-height:44px;margin-bottom:6px}
  .pg__head{padding-top:92px}
  .bl,.art{padding-top:92px}
}
/* r5-r2 — AD-arupix-r5-recheck-1 새 결함 1: 쇼릴(1440×900 · 16:10 녹화)을 cover 로 담으면 1440 상자(≈2.25:1)는 위아래 97px · 375(4:3)는 좌우 36px 가 잘려 판 표제 첫 글자·내비가 먹혔다
   → 잘라 담지 않는다: 넓은 폭은 어두운 무대 위에 16:10 한 장 그대로(contain · 무대 = --ink) · ≤767 은 상자 자체를 16:10 으로(여백도 잘림도 0) */
.hero__media{background:#0b0b0b url(assets/reel-poster-800.jpg) center/contain no-repeat}
.hero__media video,.hero__still{object-fit:contain;background:#0b0b0b}
@media (max-width:767px){
  .hero__media{height:auto;aspect-ratio:16/10}
  .pill{height:44px}
  .hd__logo{min-height:44px}
}

/* ══ r6(2026-09-18 민준 «모션 너무 부족하다 · 내용 눈에 안 들어온다 · 기획 잘 하라 · 관리자 페이지 제공») — fx.js 짝 · 출처는 fx.js 머리 주석(AGENCY-LEARN 교차 A) ══ */
/* ① 낱말 가림막 — 곡선 cubic-bezier(.2,.8,.2,1)(교차 전이 곡선 · hobro §1) · 0.9s · 아래 110% 에서 */
.fx .wm .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.fx .wm .wi{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fx .wm.wm-in .wi{transform:none}
.fx .wm[data-rv]{opacity:1;transform:none}
html.fx-still .wm .wi{transform:none}
.hero__title .w{padding-bottom:.08em;margin-bottom:-.08em}
/* ⑦ 흐림→또렷 — 12px 흐림 · 28px · 1.1s(estrela:57 흐림 리빌 · ghost-pitcher §5 «24px·30px·1.4s» 를 짧게) */
.fx .fx-b{opacity:0;transform:translateY(28px);filter:blur(12px);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s),filter 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.fx .fx-b.fx-in{opacity:1;transform:none;filter:none}
html.fx-still .fx-b{opacity:1;transform:none;filter:none}
/* ② 머리띠 숨음·되돌아옴 */
.hd{transition:background .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.hd.is-hidden{transform:translateY(-100%)}
/* ⑥ 따라옴 — 상자째 */
.case__media,.about__shot,.pg__heroimg{transform:translate3d(0,var(--py,0),0);transition:transform .2s linear}
/* ③ 공정 무대 — 트랙 높이 = 단계 × 90vh · 안쪽 100vh 붙박이 · 왼쪽 단계 글(겹쳐 두고 켜진 것만) · 오른쪽 틀(그림이 아래에서 걷혀 올라온다) · 아래 진행 막대 */
.process .sec__head{margin-bottom:0}
.stage__track{position:relative;height:calc(var(--n) * 90vh + 10vh);margin:0 8px}
.stage__pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:calc(560 * var(--u)) 1fr;grid-template-rows:1fr auto;column-gap:calc(40 * var(--u));align-items:center;padding:72px 0 28px}
.stage__steps{position:relative;align-self:stretch;display:grid}
.stage__step{grid-area:1/1;align-self:center;opacity:0;transform:translateY(40px);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.stage__step.is-past{transform:translateY(-40px)}
.stage__step.is-on{opacity:1;transform:none;pointer-events:auto}
.stage__n{color:var(--g1)}
.stage__t{margin-top:18px;font-size:calc(150 * var(--u));font-weight:300;line-height:.84;letter-spacing:-.06em}
.stage__d{margin-top:28px;max-width:460px;font-size:17px;line-height:1.42;color:var(--ink2)}
.stage__who{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:24px 0 0;max-width:480px}
.stage__who div{background:var(--card);border-radius:var(--r);padding:12px 14px 14px;transition:background-color .35s}
.stage__who dt{color:var(--g1);margin-bottom:8px}
.stage__who dd{margin:0;font-size:14px;line-height:1.35}
.stage__frame{position:relative;align-self:center;aspect-ratio:16/10;max-height:calc(100vh - 190px);border-radius:8px;overflow:hidden;background:#0b0b0b;box-shadow:0 30px 80px rgba(0,0,0,.12);padding-top:26px}
.stage__bar{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#1a1a18;z-index:3}
.stage__bar i{width:8px;height:8px;border-radius:50%;background:#4a4946}
.stage__shot{position:absolute;inset:26px 0 0;margin:0;clip-path:inset(100% 0 0 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
.stage__shot.is-on,.stage__shot.is-past{clip-path:inset(0 0 0 0)}
.stage__shot.is-on{z-index:2}
.stage__shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.stage__shot figcaption{position:absolute;left:12px;bottom:12px;padding:6px 9px;border-radius:5px;background:rgba(11,11,11,.72);color:#efeeea;font-size:10.5px;letter-spacing:.06em;backdrop-filter:blur(8px)}
.stage__rail{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.stage__rail span{position:relative;display:flex;align-items:baseline;gap:10px;padding-top:12px;color:var(--g1);transition:color .3s}
.stage__rail span.is-on{color:var(--ink)}
.stage__rail span::before,.stage__rail i{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px}
.stage__rail span::before{right:0;background:var(--line)}
.stage__rail i{width:calc(var(--f,0) * 100%);background:var(--ink);transition:background-color .35s}
.stage__rail em{font-style:normal;font-size:15px}
/* 관리자 — 어두운 판 · 큰 한 문장 · 굴림에 자라는 틀(⑤) · 기능 여섯 칸 */
.admin{padding:calc(150 * var(--u)) 0 calc(150 * var(--u))}
.adm{margin:0 8px}
.adm__lead{font-size:calc(104 * var(--u));font-weight:300;line-height:.96;letter-spacing:-.05em;max-width:calc(1200 * var(--u));text-wrap:balance}
.adm__sub{margin:calc(34 * var(--u)) 0 0 calc(469 * var(--u));max-width:560px;font-size:19px;line-height:1.4;color:var(--ink2);transition:color .35s}
.adm__frame{position:relative;margin-top:calc(70 * var(--u));border-radius:10px;overflow:hidden;background:#1a1a18;padding-top:26px;transform:scale(var(--g,.86));transform-origin:50% 0;box-shadow:0 40px 120px rgba(0,0,0,.35)}
.adm__frame video,.adm__frame img{display:block;width:100%;height:auto}
.adm__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:calc(40 * var(--u))}
.adm__grid li{display:flex;flex-direction:column;gap:10px;min-height:190px;padding:16px 18px 20px;border-radius:var(--r);background:var(--card);transition:background-color .35s}
.adm__grid .mono{color:var(--g1)}
.adm__grid b{font-size:calc(40 * var(--u));font-weight:300;letter-spacing:-.035em;line-height:1;margin-top:auto}
.adm__grid p{font-size:15px;line-height:1.4;color:var(--ink2);max-width:380px;transition:color .35s}
.adm__facts{display:flex;flex-wrap:wrap;gap:6px 24px;margin:26px 0 30px;color:var(--g1)}
.adm__facts li::before{content:"● ";color:var(--live)}
/* ④ 약속 — 붙박이로 겹쳐 쌓이는 카드 · 카드마다 top 이 18px 씩 내려가 앞 카드 머리가 보인다 · --sink 로 가라앉음 */
.promises{padding-bottom:calc(60 * var(--u))}
.promises .pms{border-top:0}
.promises .pm{position:sticky;top:calc(84px + var(--k, 0) * 18px);min-height:calc(300 * var(--u));margin-bottom:12px;padding:calc(26 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u)) 0;border:0;border-radius:10px;background:var(--card);align-items:start;transform:scale(calc(1 - var(--sink,0) * .06));transform-origin:50% 0;filter:brightness(calc(1 - var(--sink,0) * .08));transition:transform .1s linear,background-color .35s}
.promises .pm:nth-child(2n){background:#e7e5df}
.promises .pm:nth-child(1){--k:0}.promises .pm:nth-child(2){--k:1}.promises .pm:nth-child(3){--k:2}.promises .pm:nth-child(4){--k:3}.promises .pm:nth-child(5){--k:4}.promises .pm:nth-child(6){--k:5}
.promises .pm__n{padding-left:calc(24 * var(--u))}
.promises .pm__k{font-size:calc(84 * var(--u));line-height:.92}
.promises .pm__t{align-self:end;font-size:19px}
.promises .pm__tick{align-self:start}
/* 첫 화면 쇼릴·케이스 그림 등 공용: 상자째 따라옴은 위에서 */
/* ⑧ 발치 드러남 — 본문이 걷히며 발치가 밑에서 드러난다(넓은 폭 · fx.js 가 높이를 재서 켠다) */
html.ft-reveal main{position:relative;z-index:1;background:var(--bg);transition:background-color .35s;box-shadow:0 30px 60px rgba(0,0,0,.25)}
html.ft-reveal .ft{position:sticky;bottom:0;z-index:0}
/* ⑨ 쪽 넘김 전면 막 — 교차 문서 뷰 전이(지원 브라우저만 · 나머지는 보통 이동) · 새 쪽이 아래에서 걷혀 올라온다 */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.5s cubic-bezier(.7,0,.3,1) both vtOut}
::view-transition-new(root){animation:.7s cubic-bezier(.2,.8,.2,1) both vtIn}
@keyframes vtOut{to{opacity:.4;transform:translateY(-6%) scale(.97)}}
@keyframes vtIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.svc:first-child ul{grid-template-rows:repeat(6,auto)}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none} .stage__shot,.stage__step{transition:none} .promises .pm{transform:none;filter:none} .adm__frame{transform:none}}
@media (max-width:1100px){
  .stage__pin{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;row-gap:18px;padding:70px 0 20px;align-items:start}
  .stage__frame{order:-1;max-height:none;width:100%}
  .stage__t{font-size:80px}
  .stage__steps{align-self:start}
  .stage__step{align-self:start}
  .adm__lead{font-size:60px}
  .adm__sub{margin-left:0}
  .adm__grid{grid-template-columns:1fr 1fr}
  .adm__grid b{font-size:30px}
  .promises .pm{grid-template-columns:60px 1fr 30px;min-height:0}
  .promises .pm__k{font-size:48px}
}
/* F3-0926: 768–1100 폭에서 창이 낮으면 16:10 틀(폭 100%)이 제 줄보다 커서 가운데로 넘쳐 단계 글을 덮었다(1024×768 172px · 1100×800 180px · 899×1000 17px · SITE-REVIEW F3). 틀 높이를 «창 − 글·막대·여백 540px» 안으로 — 폭을 16:10 로 줄이고 왼쪽 정렬. 자리가 남는 창(820×1180·768×1024 등)은 min() 이 100% 라 전과 같다. 700px 미만 높이(가로 휴대폰 등)는 틀이 256px 아래로 작아져 손대지 않았다(이전과 같음) */
@media (min-width:768px) and (max-width:1100px) and (min-height:700px){.stage__frame{width:min(100%,calc((100vh - 540px) * 1.6));justify-self:start}}
@media (max-width:767px){
  .stage__track{height:calc(var(--n) * 85vh + 10vh)}
  .stage__pin{padding:64px 0 14px;row-gap:12px}
  .stage__t{font-size:48px;margin-top:10px}
  .stage__d{font-size:14px;margin-top:12px}
  .stage__who{grid-template-columns:1fr 1fr;margin-top:12px} .stage__who dd{font-size:12px}
  .stage__rail em{display:none}
  .admin{padding:80px 0}
  .adm__lead{font-size:38px}
  .adm__sub{font-size:16px}
  .adm__grid{grid-template-columns:1fr}
  .adm__grid li{min-height:0}
  .adm__grid b{font-size:26px}
  .promises .pm{grid-template-columns:36px 1fr 24px;top:calc(68px + var(--k,0) * 10px);padding:18px 14px 22px 0}
  .promises .pm__n{padding-left:10px}
  .promises .pm__k{font-size:32px}
  .promises .pm__t{font-size:15px}
}
.stage__steps,.needs__list,.line,.steps{list-style:none;margin-top:0;margin-bottom:0;padding-left:0} /* r6: ol 기본 번호 «2.» 가 샜다(1440 캡처) */
@media (max-width:767px){.promises .pm{grid-template-columns:48px 1fr 24px}.promises .pm__n{padding-left:12px;font-size:10px}} /* r6: 375 번호 «(02)» 가 표제에 붙었다 */
/* r6 관리자 쪽 갤러리 — 실제 화면 여섯(가상 판) · 두 열 · 폰 화면은 좁은 세로 칸 */
.adm__gal{display:grid;grid-template-columns:1fr 1fr;gap:calc(40 * var(--u)) 8px;margin-top:calc(80 * var(--u))}
.adm__gal figure{margin:0}
.adm__shot{border-radius:10px;overflow:hidden;background:#1a1a18;padding-top:22px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.adm__shot::before{content:"";position:absolute;left:12px;top:8px;width:34px;height:6px;background:radial-gradient(circle,#4a4946 3px,transparent 3.5px) 0 0/12px 6px repeat-x}
.adm__shot img{display:block;width:100%;height:auto}
.adm__gal figcaption{display:grid;grid-template-columns:calc(200 * var(--u)) 1fr;gap:12px;margin-top:16px}
.adm__gal figcaption b{font-size:22px;font-weight:400;letter-spacing:-.02em}
.adm__gal figcaption p{font-size:15px;line-height:1.4;color:var(--ink2);max-width:440px}
.adm__gal li.is-phone .adm__shot{max-width:320px}
@media (max-width:1100px){.adm__gal{grid-template-columns:1fr}.adm__gal figcaption{grid-template-columns:1fr;gap:6px}}

/* ══ r6-r1 — AD-arupix-r6-1 처분 ══ */
/* 2: 가격 한 장 — 창 한 장 · 가격이 판에서 가장 큰 글(260u) · 어두운 판으로 이야기의 끝 */
.pricing{padding:0}
.ph{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;gap:calc(60 * var(--u));padding:calc(120 * var(--u)) 8px calc(90 * var(--u))}
.ph .sec__label{border-top:1px solid var(--line);padding-top:14px;transition:border-color .35s}
.ph__top{display:grid;grid-template-columns:auto minmax(0,calc(520 * var(--u)));gap:calc(40 * var(--u));align-items:end} /* F1-0926: 1fr 의 최소 = 가격 글자(nowrap) 폭 900u 라 900+40+520u 가 칸(창−32px)을 넘어 옆 칸이 창 밖으로 밀렸다(1101–1360 오른쪽 글 잘림 · SITE-REVIEW F1). 옆 칸만 남는 폭까지 줄인다 — 남으면 auto 열이 늘어 전과 같다 */
.ph__big{font-size:calc(290 * var(--u));font-weight:300;line-height:.8;letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ph__one{font-size:22px;line-height:1.25;letter-spacing:-.02em;max-width:460px}
.ph__nums{display:grid;grid-template-columns:1fr 1fr;gap:18px 8px;margin:28px 0 30px;border-top:1px solid var(--line);padding-top:18px;transition:border-color .35s}
.ph__nums b{display:block;font-size:40px;font-weight:300;letter-spacing:-.04em;line-height:1}
.ph__nums b i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.8em}
.ph__nums .mono{display:block;margin-top:8px;color:var(--g1);font-size:11px}
.ph .price__btns{margin-top:0;padding-top:0;flex-wrap:wrap}
.ph .svcols{padding:0}
.claim__how{margin-top:18px;color:var(--g1)}
/* 8: 약속 카드 — 먹/종이 번갈아(깊이) · 빈 칸 줄임 · ≤767 은 쌓지 않는다(다음 카드가 앞 카드 문장을 덮었다) */
.promises .pm{min-height:0;grid-template-columns:calc(120 * var(--u)) calc(640 * var(--u)) 1fr 40px;align-items:center;padding-top:calc(40 * var(--u));padding-bottom:calc(40 * var(--u))}
.promises .pm:nth-child(2n){background:#0b0b0b;color:#efeeea}
.promises .pm:nth-child(2n) .pm__t{color:#d3d1cc}
.promises .pm:nth-child(2n) .pm__n{color:#9a9894}
.promises .pm:nth-child(2n) .pm__tick{border-color:#efeeea}
.promises .pm__t{align-self:center}
.promises .pm__tick{align-self:center}
/* 3·9: 무대 트랙 끝 빈 바탕 줄임 · 진행 막대 이름은 산세리프(이탤릭 세리프는 첫 화면 before · 가격 · 아웃트로에만) */
.stage__track{height:calc(var(--n) * 90vh)}
.stage__rail em{font-family:var(--sans);font-weight:400;letter-spacing:-.01em}
.admin .sec__head,.process .sec__head{margin-bottom:0}
.adm__lead{margin-top:calc(40 * var(--u))}
/* 6: 관리자 쪽 첫 화면 그림 — 브라우저 틀 */
.pg__heroimg--frame{position:relative;border-radius:10px;overflow:hidden;background:#1a1a18;padding-top:26px;box-shadow:0 30px 80px rgba(0,0,0,.14)}
.pg__heroimg--frame img{height:auto;border-radius:0}
.pg__heroimg--frame>span.mono{position:absolute;left:12px;bottom:12px;margin:0;padding:6px 9px;border-radius:5px;background:rgba(11,11,11,.72);color:#efeeea}
.pg .process{padding-top:0}
@media (max-width:1100px){
  .ph__top{grid-template-columns:1fr}
  .ph__big{font-size:22vw}
  .promises .pm{grid-template-columns:60px 1fr 30px}
}
@media (max-width:767px){
  .ph{min-height:0;padding:70px 8px 60px}
  .ph__nums b{font-size:30px}
  .promises .pm{position:relative;top:auto;transform:none;filter:none;grid-template-columns:48px 1fr 24px;padding:20px 14px 22px 0}
}
/* r6-r1 폭별 영상 — 넓은 녹화(2.25:1)가 붙으면 상자를 같은 비율로(검은 띠 0 · 잘림 0) · 관리자 폰 녹화는 폰 모양 틀 */
@media (min-width:1101px){.hero__media.is-wide{height:auto;aspect-ratio:1440/640}.hero__media.is-wide video,.hero__media.is-wide .hero__still{object-fit:cover}.hero__media-wrap:has(.is-wide)~.side{height:calc(1078 * var(--u) * 640 / 1440)}}
@media (min-width:768px) and (max-width:1100px){.hero__media.is-wide{height:auto;aspect-ratio:1440/640}.hero__media.is-wide video,.hero__media.is-wide .hero__still{object-fit:cover}}
.adm__frame.is-phone{max-width:300px;margin-left:auto;margin-right:auto;border-radius:22px}
.adm__vid{aspect-ratio:1280/800;background:#1a1a18} .adm__frame.is-phone .adm__vid{aspect-ratio:780/1688}
/* r6-r2 — 첫 화면 쇼릴 전폭 한 장 + 굴림 크기몰기(fx.js --hs) · 오른쪽 기둥 없음 · ≤767 HUD 는 영상 밖 아래 줄 */
.side{display:none}
.hero__grid{grid-template-columns:1fr}
.hero__media,.hero__media.is-wide{height:auto;aspect-ratio:1440/640;transform:scale(var(--hs,1));transform-origin:50% 0;will-change:transform}
.hero__media-wrap{min-width:0}
.hero__badge{margin-top:10px}
@media (max-width:767px){
  .hero__media,.hero__media.is-wide{aspect-ratio:16/10;overflow:visible;background:none}
  .hero__media video,.hero__still{border-radius:var(--r)}
  .hero__hud{position:absolute;top:100%;bottom:auto;padding:10px 0 0;background:none;color:var(--ink)}
  .hero__bar{background:var(--line)} .hero__bar i{background:var(--ink)}
  .hero__media-wrap{padding-bottom:44px}
}
@media (prefers-reduced-motion:reduce){.hero__media{transform:none}}
.pg .pricing--hero{margin-top:0;padding-top:56px} /* r6-r2: /pricing/ 첫 창 = 가격(h1) */
/* r6-r2 — 새 4: 가라앉는 약속 카드는 글을 지운다(뒤 카드 표제 윗획이 앞 카드 가장자리에 걸렸다) · 번호 줄만 남음 */
.promises .pm__k,.promises .pm__t,.promises .pm__tick{opacity:calc(1 - var(--sink,0) * 2.2);transition:opacity .15s linear}
/* 무대 4단계 — 주소창에 도메인(가상 · .example) */
.stage__addr{margin:0 auto;padding:2px 12px;border-radius:5px;background:#2b2a27;color:#d3d1cc;font-size:10.5px;letter-spacing:.04em;text-transform:none;font-weight:400;opacity:0;transition:opacity .4s}
.stage__addr.is-on{opacity:1}
/* 기타 ③: ticker 밑 밝은 빈 바탕 — 선언 판의 바깥 여백을 안쪽 여백으로 옮겨 먹 바탕이 흐름띠 바로 밑에서 시작한다 */
.claim{margin-top:calc(40 * var(--u));padding-top:calc(170 * var(--u))}
@media (max-width:767px){.hero__media-wrap{padding-bottom:0}.hero__media,.hero__media.is-wide{margin-bottom:40px}} /* r6-r2: 375 이름표(영상 밖)가 밑 설명 줄과 겹쳤다 */
/* r6-r3 — AD-arupix-r6-recheck-2 권고: ① HUD 이름표를 먹 알약으로(밝은 챕터 절반에서 흰 글이 묻혔다) + 덧막 끝 알파 두 배 ④ 녹화 속 UI 와 겹치지 않게 왼쪽 여백 ⑤ 375 누름 자리 44 */
.hero__hud{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));padding-left:22px}
.hero__pre,.hero__now{background:rgba(11,11,11,.72);padding:5px 9px;border-radius:5px;backdrop-filter:blur(8px)}
.hero__pre{margin-right:-8px;border-radius:5px 0 0 5px;padding-right:0}
.hero__now{border-radius:0 5px 5px 0}
@media (max-width:767px){
  .hero__hud{background:none;padding-left:0}
  .hero__pre,.hero__now{background:none;padding:0;backdrop-filter:none}
  .claim__how a{display:inline-flex;align-items:center;min-height:44px}
  .btn{height:44px}
  .hd__logo{min-width:44px;justify-content:center}
}

/* First-contact form: existing Arupix type, colors and rules. */
.inquiry{max-width:960px;margin:0 0 24px}.inquiry__fields{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-bottom:28px}.inquiry label{display:block;font-size:18px;line-height:1.4}.inquiry input:not([type=hidden]),.inquiry textarea{display:block;box-sizing:border-box;width:100%;margin-top:12px;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:1.5;padding:14px 16px}.inquiry textarea{resize:vertical;min-height:130px}.inquiry__wide{grid-column:1/-1}.inquiry input:focus-visible,.inquiry textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}.inquiry .mono{font-size:11px;margin-left:8px}.inquiry__note{font-size:14px;line-height:1.6;max-width:620px;margin-top:20px}.inquiry__note a,.inquiry__status a{text-decoration:underline}.inquiry__status{max-width:850px;font-size:20px;line-height:1.6}.inquiry__status:not(:empty){padding:24px 0;border-top:1px solid currentColor}.inquiry__status.is-error{font-weight:500}.inquiry button:disabled{opacity:.65;cursor:wait}.inquiry[hidden]{display:none}@media(max-width:600px){.inquiry__fields{grid-template-columns:1fr;gap:24px}.inquiry label{font-size:16px}.inquiry button{width:100%;justify-content:space-between}.inquiry__status{font-size:18px}}

.pg--contact .pg__head{margin-left:16px;margin-right:16px}.pg--contact .pg__title{font-size:clamp(40px,5vw,80px);max-width:1100px}.pg--contact .pg__lead{margin:24px 0 0;max-width:680px}.pg--contact .contact{padding:48px 16px 64px}.pg--contact .contact>.pg__note{margin-left:0}.pg--contact+.ft{position:relative;bottom:auto}@media(max-width:600px){.pg--contact .contact{padding-top:32px}.pg--contact .pg__lead{font-size:18px}}

/* ── r7(2026-09-23 민준 «홈이 너무 난잡하다») — 홈 다섯 대목: 첫 화면(h7) · 작업 쌓임(stk) · 세 걸음(how7) · 값(off7) · 맺음 양식(cta7)
   근거 행 ID 와 적용: docs/overnight/out-arupix-r7/ONTOLOGY-SOURCES.md · 토큰(색·서체·알약·단추)은 위 판 그대로 · 새 색 0 ── */
.sec7__label{color:var(--g1);margin-bottom:22px}
.sec7__title{font-size:clamp(40px,5.6vw,88px);font-weight:300;line-height:.98;letter-spacing:-.045em}
.sec7__title em,.h7__title em,.cta7__title em{font-size:1.04em;letter-spacing:-.02em}
.sec7__body{font-size:19px;line-height:1.45;color:var(--g1);max-width:520px;transition:color .35s}

/* ① 첫 화면 */
.h7{padding:clamp(96px,11vh,132px) 12px 0}
.h7__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 20px;align-items:end;padding:0 8px}
.h7__tag{grid-column:1/-1;display:flex;align-items:center;gap:8px;color:var(--g1);margin-bottom:26px}
.h7__title{grid-column:1/9;font-size:clamp(52px,8.2vw,136px);font-weight:300;line-height:.94;letter-spacing:-.05em}
.h7__side{grid-column:9/13;padding-bottom:.6vw}
.h7__lede{font-size:18px;line-height:1.45;color:var(--ink2);margin-bottom:26px;max-width:420px;transition:color .35s}
.h7__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px}
.h7__link{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s}
.h7__link:hover{border-color:currentColor}
.h7__stage{margin-top:clamp(36px,5vh,56px)}
.brw{position:relative;border-radius:12px;overflow:hidden;background:#111;box-shadow:0 30px 80px -30px rgba(11,11,11,.45),0 0 0 1px rgba(11,11,11,.08);transform:scale(var(--hs,1));transform-origin:50% 0;will-change:transform}
.brw__bar{height:44px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#1a1a18;color:#efeeea}
.brw__dots{display:flex;gap:7px;flex:none}.brw__dots i{width:11px;height:11px;border-radius:50%;background:#3a3936}
.brw__url{flex:0 1 380px;margin:0 auto;height:28px;border-radius:7px;background:#2a2927;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;letter-spacing:0;color:#efeeea}
.brw__lock{font-size:10px;filter:grayscale(1);opacity:.7}
.brw__caret{width:1.5px;height:15px;background:#efeeea;animation:brwCaret 1s steps(1) infinite}
@keyframes brwCaret{50%{opacity:0}}
.brw__now{flex:none;width:300px;text-align:right;color:#9a9894;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brw__view{position:relative;aspect-ratio:1800/1125;max-height:calc(100vh - 150px);width:100%;overflow:hidden}
.brw__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.brw__slide.is-on{opacity:1}
.h7__note{color:var(--g1);text-align:center;padding:18px 8px 0}

/* ② 작업 — 붙박이로 겹쳐 쌓이는 판(앞 판 가라앉음·어두워짐 --sink · home7.js) */
.stk{padding:clamp(110px,14vh,160px) 12px 120px;margin-top:clamp(90px,12vh,140px)}
.stk__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 20px;align-items:end;padding:0 8px;margin-bottom:64px}
.stk__head .sec7__label{grid-column:1/-1}
.stk__head .sec7__title{grid-column:1/8}
.stk__head .sec7__body{grid-column:9/13}
.stk__list{list-style:none;margin:0;padding:0}
.stk__card{position:sticky;top:calc(64px + var(--i) * 12px);margin-bottom:10vh}
.stk__card:last-child{margin-bottom:0}
.stk__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 20px;height:min(calc(100vh - 150px),720px);min-height:520px;padding:28px;border-radius:14px;background:#1a1a18;color:#efeeea;box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -24px 60px -20px rgba(0,0,0,.6);transform:scale(calc(1 - var(--sink,0) * .06));transform-origin:50% 0;filter:brightness(calc(1 - var(--sink,0) * .5));will-change:transform,filter}
.stk__info{grid-column:1/5;display:flex;flex-direction:column;padding:6px 8px 4px}
.stk__n{color:#9a9894}
.stk__name{margin-top:auto;font-size:clamp(34px,3.6vw,58px);font-weight:300;letter-spacing:-.04em;line-height:1}
.stk__sub{margin-top:10px;font-size:17px;color:#b9b7b2}
.stk__pts{margin:26px 0 30px;border-top:1px solid rgba(239,238,234,.16)}
.stk__pts li{padding:11px 0;border-bottom:1px solid rgba(239,238,234,.16);font-size:15px;color:#d3d1cc}
.stk__go{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:42px;padding:0 16px;border-radius:5px;background:#efeeea;color:#0b0b0b;font-size:15px;font-weight:500}
.stk__media{grid-column:5/13;position:relative;border-radius:9px;overflow:hidden;background:#0b0b0b}
.stk__desk{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.stk__phone{position:absolute;right:26px;bottom:-40px;width:clamp(120px,12vw,190px);height:auto;border-radius:16px;box-shadow:0 20px 50px -10px rgba(0,0,0,.65),0 0 0 5px #0b0b0b;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stk__in:hover .stk__desk{transform:scale(1.025)}
.stk__in:hover .stk__phone{transform:translateY(-14px)}
.stk__in:hover .arw{transform:rotate(45deg)}
.stk__in:hover .roll__in{transform:translateY(-1.2em)}
.stk__more{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:72px;color:#9a9894}
.stk__all{background:#efeeea;color:#0b0b0b}

/* ③ 세 걸음 */
.how7{padding:clamp(120px,16vh,180px) 20px 40px}
.how7__support{margin:24px 0 0;max-width:680px}
.how7__steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:72px 0 0;padding:0}
.how7__steps li{border-top:1px solid var(--ink);padding-top:22px;transition:border-color .35s}
.how7__n{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(64px,7vw,112px);line-height:.9;letter-spacing:-.02em;margin-bottom:34px}
.how7__steps h3{font-size:26px;font-weight:400;letter-spacing:-.03em;margin-bottom:10px}
.how7__steps p{font-size:17px;line-height:1.45;color:var(--g1);max-width:360px;transition:color .35s}

/* ④ 값 */
.off7{padding:clamp(90px,12vh,140px) 12px clamp(120px,16vh,180px)}
.off7__card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 20px;background:var(--card2);border-radius:14px;padding:40px 36px;box-shadow:0 0 0 1px var(--line)}
.off7__price{grid-column:1/6;display:flex;flex-direction:column;align-items:flex-start}
.off7__big{font-size:clamp(88px,11vw,176px);font-weight:300;letter-spacing:-.06em;line-height:.9;margin:6px 0 22px}
.off7__terms{font-size:19px;line-height:1.4;max-width:380px;margin-bottom:28px}
.off7__list{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-content:start}
.off7__list li{padding:18px 0 20px;border-top:1px solid var(--line)}
.off7__list b{display:block;font-size:18px;font-weight:500;letter-spacing:-.02em;margin-bottom:5px}
.off7__list span{font-size:15px;line-height:1.4;color:var(--g1)}

/* ⑤ 맺음 양식 */
.cta7{--bg:#fff;--ink:#0b0b0b;--ink2:#2b2a27;--g1:#62615e;--g2:#76736f;--line:rgba(11,11,11,.18);--fill:#fff;--fill-h:#efeeea;background:#fff;color:var(--ink);padding:clamp(120px,16vh,180px) 20px clamp(120px,16vh,170px)}
.cta7__title{font-size:clamp(64px,11vw,184px);font-weight:300;line-height:.9;letter-spacing:-.055em;margin-bottom:28px}
.cta7__lede{font-size:20px;line-height:1.45;color:var(--g1);max-width:560px;margin-bottom:56px}
.cta7__form{max-width:1000px}
.cta7__btn{background:var(--ink);color:var(--bg)}
.cta7__btn:hover{background:var(--ink2)}
.cta7 .inquiry__note{color:var(--g1)}

/* 폭 */
@media (max-width:1100px){
  .h7__title{grid-column:1/-1}
  .h7__side{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-top:30px}
  .h7__lede{margin-bottom:0}
  .stk__head .sec7__title{grid-column:1/-1}.stk__head .sec7__body{grid-column:1/-1;margin-top:22px}
  .stk__info{grid-column:1/6}.stk__media{grid-column:6/13}
  .off7__price,.off7__list{grid-column:1/-1}.off7__list{margin-top:36px}
}
@media (max-width:767px){
  .h7{padding-top:92px}
  .h7__top{padding:0}
  .h7__side{display:block}
  .h7__lede{margin-bottom:24px;font-size:17px}
  .brw__bar{height:36px;padding:0 10px}.brw__dots{display:none}.brw__now{display:none}.brw__url{font-size:13px;height:24px}
  .brw{border-radius:9px}
  .stk{padding-left:8px;padding-right:8px}
  .stk__head{padding:0;margin-bottom:40px}
  .stk__card{position:static;margin-bottom:14px} /* 좁은 폭은 쌓지 않는다 — 다음 판이 이름을 덮었다(r7 390 실측) */
  .stk__in{display:flex;flex-direction:column-reverse;height:auto;min-height:0;padding:12px;gap:18px;transform:none;filter:none}
  .stk__media{aspect-ratio:1800/1125;flex:none}
  .stk__phone{display:none}
  .stk__info{padding:4px 6px 8px}
  .stk__name{margin-top:10px;font-size:32px}
  .stk__pts{display:none}
  .stk__go{margin-top:18px}
  .how7{padding-left:8px;padding-right:8px}
  .how7__steps{grid-template-columns:1fr;gap:34px;margin-top:48px}
  .how7__n{margin-bottom:14px}
  .off7{padding-left:8px;padding-right:8px}
  .off7__card{padding:26px 18px}
  .off7__list{grid-template-columns:1fr}
  .cta7{padding-left:8px;padding-right:8px}
  .cta7__btn{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.brw__slide{transition:none}.brw__caret{animation:none}.stk__in{transform:none;filter:none}}

/* ── r7-r1 — AD-arupix-r7-1 수리 7(docs/overnight/AD-arupix-r7-1.md) ── */
/* 5 간격 한 값: 대목 사이 = --g7 한 번(위 대목 아래 여백 0) */
:root{--g7:clamp(80px,9.7vw,140px)}
.h7{padding-bottom:var(--g7)}
.stk{margin-top:0;padding:var(--g7) 12px var(--g7)}
.how7{padding:var(--g7) 20px 0}
.off7{padding:var(--g7) 12px var(--g7)}
.cta7{padding:var(--g7) 20px var(--g7);border-bottom:1px solid var(--line)}
.stk__head{margin-bottom:56px}
.how7__n{font-family:var(--sans);font-style:normal;font-weight:300;letter-spacing:-.05em}
/* 3·4 첫 화면: 이름 입력 + 약속 한 줄 · 판 교대는 위에서 덮는다(겹침 없음) */
.h7__try{display:flex;gap:8px;align-items:stretch;margin-bottom:14px;max-width:460px}
.h7__field{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;height:52px;padding:0 14px;border-radius:5px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.h7__field:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.h7__field .mono{font-size:10px;color:var(--g1)}
.h7__field input{border:0;background:none;margin:0;padding:0;appearance:none;-webkit-appearance:none;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);outline:none;width:100%}
.h7__try .btn{flex:none}
.h7__terms{color:var(--g1);margin-bottom:18px}
.h7__link{min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
.h7__link:hover{text-decoration-color:currentColor}
.brw__slide{opacity:1;visibility:hidden;clip-path:inset(0 0 0 0);transition:none;z-index:0}
.brw__slide img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.brw__slide.is-prev{visibility:visible;z-index:1}
.brw__slide.is-on{visibility:visible;z-index:2;animation:brwIn .85s cubic-bezier(.7,0,.2,1) both}
@keyframes brwIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.brw.is-typed .brw__url{background:#34332f;box-shadow:inset 0 0 0 1px rgba(31,213,91,.55)}
/* 1 카드 사진 = 주소창 틀 안 1800/1125 고정(잘림 없음) */
.frm{border-radius:9px;overflow:hidden;background:#0b0b0b;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.frm__bar{height:30px;display:flex;align-items:center;gap:12px;padding:0 12px;background:#242320}
.frm__dots{display:flex;gap:6px}.frm__dots i{width:8px;height:8px;border-radius:50%;background:#44423e}
.frm__url{margin:0 auto;padding:0 14px;height:20px;line-height:20px;border-radius:5px;background:#2f2e2a;color:#9a9894;font-size:12px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frm__img{width:100%;aspect-ratio:1800/1125;height:auto;object-fit:cover;object-position:50% 0;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.stk__in{height:auto;min-height:0;align-items:center}
.stk__media{background:none;border-radius:0;overflow:visible;align-self:center}
.stk__phone{right:-14px;bottom:-22px;width:clamp(110px,10vw,150px)}
.stk__in:hover .frm__img{transform:scale(1.02)}
.stk__info{align-self:stretch}
/* 넷째 카드 — 나머지 세 업종 · 작은 틀 셋 · See all 은 어두운 판 안에서 끝난다 */
.stk__card--more .stk__info{grid-column:1/5}
.stk__minis{grid-column:5/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0;align-self:center}
.frm--mini .frm__bar{height:22px}.frm--mini .frm__dots{display:none}.frm--mini .frm__url{font-size:10px;height:16px;line-height:16px}
.stk__minis a:hover .frm__img{transform:scale(1.03)}
.stk__cap{display:flex;flex-direction:column;gap:3px;padding:12px 2px 0}.stk__cap b{font-weight:400;font-size:16px}.stk__cap span{color:#9a9894;font-size:13px}
.stk__go--all{margin-top:30px}
/* 6 맺음: 양식 + 오른쪽 «보내면 일어나는 일» */
.cta7__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px 64px;align-items:start}
.cta7__form{max-width:none}
.cta7__next{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cta7__next li{display:grid;grid-template-columns:70px 1fr;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
.cta7__next .mono{grid-row:span 2;color:var(--g1);padding-top:4px}
.cta7__next b{font-weight:400;font-size:19px}
.cta7__next span:last-child{color:var(--g1);font-size:15px;line-height:1.4}
.cta7 .inquiry__note a{display:inline-block;padding:12px 0}
/* 899 이하: 한 단 · 쌓지 않음(카드가 창보다 길다) */
@media (max-width:1100px){
  .stk__card{position:static;margin-bottom:16px}
  .stk__in{display:flex;flex-direction:column-reverse;align-items:stretch;gap:22px;padding:18px;transform:none;filter:none}
  .stk__card--more .stk__in{flex-direction:column}
  .stk__phone{display:none}
  .stk__name{margin-top:14px}
  .cta7__grid{grid-template-columns:1fr}
  .h7__side{display:block}
  .h7__try{max-width:560px}
}
/* 390: 폰 스크린샷 */
@media (max-width:767px){
  .brw__view{aspect-ratio:780/928;max-height:none}
  .stk__media .frm{display:none}
  .stk__media .stk__phone{display:block;position:static;width:100%;border-radius:12px;box-shadow:none}
  .stk__minis{grid-template-columns:1fr 1fr;gap:12px}
  .stk__minis li:nth-child(3){display:none}
  .h7__try{flex-direction:column}
  .h7__try .btn{justify-content:space-between}
  .stk__pts{display:none}
}
@media (prefers-reduced-motion:reduce){.brw__slide.is-on{animation:none}}
/* r7-r1b: 폰 첫 화면 크롭(ph1 780×1280) · 899 카드 사진 전폭 */
.stk__phone{aspect-ratio:780/1280;object-fit:cover;object-position:50% 0}
@media (max-width:1100px){.stk__media{width:100%}}
@media (max-width:767px){.brw__view{aspect-ratio:780/1040}.stk__media .stk__phone{aspect-ratio:780/1040}}
@media (max-width:767px){.stk__minis{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}}
@media (max-width:1100px){.stk__minis{width:100%}}
/* r7-r2 — AD-arupix-r7-recheck-1 남은 것: ① 주소창은 틀이 줄어 있어도 14px 로 보인다(1/--hs 역보정) + 이름이 들어오면 한 번 반짝 ② 390 넷째 카드 셋째 틀도 보인다 ③ 경계 간격 한 값(양쪽 반씩) */
.brw__bar{height:calc(44px / var(--hs,1));gap:calc(14px / var(--hs,1));padding:0 calc(16px / var(--hs,1))}
.brw__url{font-size:calc(14px / var(--hs,1));height:calc(28px / var(--hs,1));flex-basis:calc(380px / var(--hs,1))}
.brw__caret{height:calc(15px / var(--hs,1))}
.brw__dots i{width:calc(11px / var(--hs,1));height:calc(11px / var(--hs,1))}
.brw__now{font-size:calc(12px / var(--hs,1));width:auto;max-width:40%}
.brw.is-flash .brw__url{animation:brwFlash .7s ease-out}
@keyframes brwFlash{0%{box-shadow:inset 0 0 0 2px #1fd55b,0 0 0 6px rgba(31,213,91,.35)}100%{box-shadow:inset 0 0 0 1px rgba(31,213,91,.55),0 0 0 0 rgba(31,213,91,0)}}
.h7{padding-bottom:calc(var(--g7) * .5)}
.stk{padding-top:calc(var(--g7) * .5);padding-bottom:calc(var(--g7) * .5)}
.how7{padding-top:calc(var(--g7) * .5)}
.off7{padding-bottom:calc(var(--g7) * .5)}
.cta7{padding-top:calc(var(--g7) * .5)}
.stk__card--more .stk__n{margin-bottom:18px}
@media (max-width:767px){.stk__minis li:nth-child(3){display:block;grid-column:1/-1}.h7__field{height:56px}}
/* r7-r3 — 민준 판정 revise(2026-09-23 «썸네일 영상에서 다 짤려 보인다»): 판 화면은 원래 비율 그대로 — 1440×900 크롭 16:10 · 폰 첫 화면 780:1280 · 높이 상한으로 자르지 않는다 */
.brw__view{aspect-ratio:1800/1125;max-height:none}
.brw__slide img{object-fit:contain;object-position:50% 0;background:#111}
@media (max-width:767px){
  .h7__stage .brw{width:min(100%,320px);margin:0 auto}
  .brw__view{aspect-ratio:780/1280}
  .stk__media .stk__phone{aspect-ratio:780/1280;width:min(100%,300px);margin:0 auto;object-fit:contain}
}
.stk__phone{aspect-ratio:780/1280;object-fit:contain}
.frm__img{object-fit:contain}
/* r7-r3b: 다 자란 틀도 창 높이 안에 판 전체가 들어온다(틀 높이 = 폭/1.6 + 주소창 44 ≤ 100vh − 96) · 가운데 */
@media (min-width:768px){.brw{max-width:calc((100vh - 140px) * 1.6);margin:0 auto}}

/* 2026-09-25 channels0925 — 문의 양식 후속 제안 동의 칸(기본 해제 · site-build.mjs inquiryFields) */
.inquiry .inquiry__consent{display:flex;gap:12px;align-items:flex-start;align-self:end;font-size:15px;line-height:1.45}
.inquiry .inquiry__consent input[type=checkbox]{display:block;flex:none;width:20px;height:20px;margin:2px 0 0;padding:0;accent-color:currentColor;cursor:pointer}
.inquiry .inquiry__consent .mono{margin-left:4px}

/* Marketing clarity · 2026-09-27: existing type/palette, comparable plan terms. */
.ph__heading{font-size:clamp(48px,6.5vw,96px);font-weight:300;line-height:1;letter-spacing:-.04em;margin:0 0 24px}
.ph__heading em{font-family:var(--serif);font-weight:400}
.ph__intro{font-size:clamp(19px,1.7vw,24px);line-height:1.4;max-width:60ch;margin-bottom:40px}
.plan-compare{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.plan-option{border-top:1px solid var(--line);padding-top:24px;min-width:0}
.plan-option h2{font-size:22px;font-weight:400;margin:0 0 22px}
.plan-option__price{font-size:clamp(48px,5vw,76px);font-weight:300;line-height:1.1;letter-spacing:-.04em;margin:0 0 14px}
.plan-option__price span{font-size:18px;letter-spacing:0;margin-left:10px;display:inline-block}
.plan-option__summary{font-size:18px;line-height:1.45;max-width:48ch;min-height:3em;margin-bottom:22px}
.plan-option dl{margin:0;font-size:16px;line-height:1.5}
.plan-option dl>div{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:12px 0;border-top:1px solid var(--line)}
.plan-option dt{font-weight:500}.plan-option dd{margin:0;max-width:45ch}
.plan-next{display:flex;align-items:center;gap:32px;margin:40px 0 56px}.plan-next p{font-size:16px;line-height:1.5;max-width:60ch}
.h7__terms{font-family:var(--sans);font-size:14px;line-height:1.55;letter-spacing:0;text-transform:none;color:var(--ink)}
@media(max-width:767px){.plan-compare{grid-template-columns:1fr;gap:32px}.ph__intro{margin-bottom:28px}.plan-option h2{margin-bottom:12px}.plan-option__summary{min-height:0}.plan-option dl>div{grid-template-columns:92px 1fr;gap:12px}.plan-next{align-items:stretch;flex-direction:column;gap:16px;margin:28px 0 36px}.plan-next .btn{justify-content:center}.h7__terms{font-size:13px}.ph__heading{font-size:52px}}

.ph.ph--compare{min-height:0;justify-content:flex-start;gap:0;padding-top:48px;padding-bottom:48px}
@media(max-width:767px){.ph.ph--compare{padding-top:40px;padding-bottom:36px}.ph--compare .ph__heading{font-size:44px;margin-bottom:20px}.ph--compare .ph__intro{font-size:18px;line-height:1.4;margin-bottom:24px}.plan-option{padding-top:20px}.plan-option__summary{margin-bottom:16px}}

/* 2026-09-27 user revision: landing screenshots retain their full source frame. */
.pg__heroimg--uncropped img{height:auto;aspect-ratio:auto;object-fit:contain}
.landing-work .case__media{align-items:start}
.landing-work .case__media img{height:auto;aspect-ratio:auto;object-fit:contain}
.landing-work .case:hover .case__media img{transform:none}
.partner-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:48px 0 64px;align-items:start}
.partner-photos figure{margin:0;min-width:0}
.partner-photos img{display:block;width:100%;height:auto;border-radius:var(--r)}
.partner-photos figcaption{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:18px}
.partner-photos figcaption span{font-size:14px;color:var(--g1)}
.partner-photos>.pg__note{grid-column:1/-1;margin:0}
@media(max-width:700px){.partner-photos{grid-template-columns:1fr;gap:28px;margin:32px 0 48px}}

/* 2026-09-29 editorial typography: roles, readable prose and restrained emphasis. */
body{font-size:16px;font-weight:400;line-height:1.55;letter-spacing:-.008em}
strong,b{font-weight:500}
.h7__title{font-size:clamp(52px,7vw,112px);line-height:1.02;letter-spacing:-.04em;font-weight:400;overflow:visible;height:auto}
.sec7__title,.pg__title,.ph__heading{font-size:clamp(38px,5.2vw,80px);line-height:1.1;letter-spacing:-.035em;font-weight:400;text-wrap:balance}
.cta7__title{font-size:clamp(44px,6.4vw,96px);line-height:1.1;letter-spacing:-.035em;font-weight:400;text-wrap:balance}
.h7__lede,.sec7__body,.pg__lead,.cta7__lede{font-size:clamp(17px,1.35vw,20px);font-weight:400;line-height:1.6;letter-spacing:-.01em;max-width:58ch;color:var(--ink2);text-wrap:pretty}
.h7__side{align-self:center}
.h7__terms,.h7__note,.pg__note.mono{font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--g1)}
.h7__note{max-width:72ch;margin-inline:auto}
.h7__terms{max-width:54ch}
.how7__steps h3,.off7__list b{font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.how7__steps p,.off7__list span,.price__sub,.qa__a p,.stage__d,.pm__t,.inquiry__note,.cta7__next span:last-child{font-size:16px;line-height:1.65;font-weight:400}
.how7__steps p{max-width:40ch}
.off7__terms{font-size:18px;line-height:1.6;max-width:44ch;font-weight:400}
.off7__big,.ph__big,.price__big{font-weight:400;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.035em}
.inquiry__fields label{font-size:15px;font-weight:500;line-height:1.5}
.inquiry__fields label .mono{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;font-weight:400}
.inquiry input,.inquiry textarea{font-size:16px;line-height:1.5}
.inquiry__consent{font-weight:400!important}
.h7__field .mono{font-family:var(--sans);font-size:12px;line-height:1.25;text-transform:none;letter-spacing:0}
.h7__field{height:58px}
.h7__try .btn{height:58px}
.pg__cta-q{font-size:clamp(36px,4.8vw,72px);line-height:1.15;letter-spacing:-.03em;text-wrap:balance}
.pg__cta-s{max-width:58ch;font-size:18px;line-height:1.6;font-weight:400}
.lead{font-size:clamp(26px,2.5vw,36px);line-height:1.3;font-weight:400;letter-spacing:-.025em;text-wrap:balance}
.qa__q,.qa__t{line-height:1.4;font-weight:500}
.ft__cols{font-size:15px;line-height:1.6}.ft__cols h3{font-weight:500}
.ft__bottom p.mono{font-family:var(--sans);font-size:12px;line-height:1.7;text-transform:none;letter-spacing:.01em}
.btn,.pill{font-weight:500}.btn{line-height:1.3}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
input::placeholder,textarea::placeholder{color:var(--g1);opacity:1}
::selection{background:var(--ink);color:var(--bg)}
@media(max-width:767px){
 .h7__title{font-size:clamp(42px,10.3vw,72px);line-height:1.06;letter-spacing:-.035em}
 .sec7__title,.pg__title,.ph__heading{font-size:clamp(34px,8.6vw,56px);line-height:1.15}
 .cta7__title{font-size:clamp(38px,9.4vw,62px)}
 .h7__lede,.sec7__body,.pg__lead,.cta7__lede{font-size:17px;line-height:1.65}
 .how7__steps h3,.off7__list b{font-size:21px}
 .off7__terms{font-size:17px}
 .pg__cta-s{font-size:17px}
 .inquiry__note{font-size:14px;line-height:1.65}
 .h7__note{font-size:13px}
 .stk__name{line-height:1.1;letter-spacing:-.025em}
 .h7__field{flex:none;height:auto;min-height:76px;padding:12px 16px;gap:6px}
 .h7__field .mono{line-height:1.5}
 .h7__try .btn{height:auto;min-height:58px;padding:16px;text-align:left}
}

/* SEO / GEO: existing editorial type and ruled sections, no new display face. */
.discover{padding:88px var(--gutter,5vw);background:#efeeea;color:#242521}
.discover__intro{display:grid;grid-template-columns:1.4fr 1fr;gap:6vw;align-items:end;margin:28px 0 56px}
.discover .sec7__title{max-width:17ch;font-size:clamp(36px,4.5vw,76px);line-height:1.08;letter-spacing:-.035em}
.discover .sec7__body{max-width:42ch;margin:0;font-size:18px;line-height:1.65;letter-spacing:-.015em}
.discover__cols{display:grid;grid-template-columns:1fr 1fr;gap:6vw;border-top:1px solid #b9bab3;padding-top:30px}
.discover__cols article{max-width:580px}.discover__cols h3,.discover__cols h2{font-size:clamp(24px,2.4vw,36px);line-height:1.25;letter-spacing:-.025em;margin:20px 0 14px;font-weight:500}
.discover__cols p:not(.mono),.discover__steps p,.discover__limits p{font-size:17px;line-height:1.7;max-width:65ch;letter-spacing:-.012em}
.discover__end{display:flex;align-items:center;gap:32px;margin-top:38px}.discover__end p,.discover__note{font-size:13px;line-height:1.6;max-width:64ch;color:#56594f}.discover__note{margin-top:30px}
.discover--page{padding-top:0}.discover__steps{list-style:none;margin:36px 0 0;padding:0}.discover__steps li{display:grid;grid-template-columns:50px 1fr 1.3fr;gap:24px;border-top:1px solid #b9bab3;padding:28px 0}.discover__steps h3{font-size:26px;font-weight:500;line-height:1.25;letter-spacing:-.025em}.discover__steps p{margin:0}.discover__limits p{margin:24px 0}.discover__limits a{text-decoration:underline;text-underline-offset:4px}.discover__cta .sec7__body{margin:28px 0}.discover__cta{border-top:1px solid #b9bab3}
html[lang="ko"] .discover h3,html[lang="ko"] .discover .sec7__title{font-family:"Arupix KO",sans-serif;word-break:keep-all;letter-spacing:-.03em;line-height:1.2}html[lang="ja"] .discover h3{font-family:"Arupix JA",sans-serif}
@media(max-width:760px){.discover{padding:56px 24px}.discover__intro,.discover__cols{grid-template-columns:1fr;gap:30px}.discover__intro{margin-bottom:36px}.discover .sec7__title{font-size:38px}.discover .sec7__body{font-size:16px}.discover__cols article+article{border-top:1px solid #b9bab3;padding-top:28px}.discover__end{align-items:flex-start;flex-direction:column;gap:18px}.discover__steps li{grid-template-columns:30px 1fr;gap:16px}.discover__steps p{grid-column:2}.discover__steps h3{font-size:23px}.discover--page{padding-top:12px}.pg--seo-geo .pg__title{font-size:clamp(38px,8vw,60px)}}

/* Keep the SEO introduction on the same content grid as its next section.
   Override the legacy 8px header inset and viewport-scaled lead offset. */
.pg--seo-geo .pg__head{margin:0;padding:120px 5vw 48px}
.pg--seo-geo .pg__crumb{margin-bottom:32px}
.pg--seo-geo .pg__title{max-width:1100px;font-size:clamp(38px,5vw,80px);line-height:1.12;overflow-wrap:break-word}
.pg--seo-geo .pg__lead{margin:28px 0 0;max-width:680px;line-height:1.6}
.pg--seo-geo .discover{padding-left:5vw;padding-right:5vw}
.ft__clocks span{white-space:nowrap}
@media(max-width:760px){.pg--seo-geo .pg__head{padding:96px 24px 36px}.pg--seo-geo .pg__crumb{margin-bottom:24px}.pg--seo-geo .pg__lead{margin-top:24px}.pg--seo-geo .discover{padding-left:24px;padding-right:24px}}

/* Optional homepage photos: keep the existing form grid and type. */
/* Customer content editor: existing site-admin demo and the approved home type. */
.h7__edit-link{margin-left:22px}
.updates7{padding:88px 5vw;background:var(--bg);color:var(--ink);scroll-margin-top:88px}
.updates7__intro{display:grid;grid-template-columns:1.3fr 1fr;gap:6vw;align-items:end;margin:28px 0 44px}
.updates7__intro .sec7__title{max-width:20ch;font-size:clamp(36px,4.5vw,76px);line-height:1.12}
.updates7__intro .sec7__body{font-size:18px;line-height:1.6;max-width:44ch}
.updates7__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:6vw;align-items:start}
.updates7__demo{min-width:0;margin:0}
.updates7__video{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.updates7__video--phone{display:none}
.updates7__demo figcaption{margin-top:12px;color:var(--g1);font-size:12px;line-height:1.5}
.updates7__features{list-style:none;margin:0;padding:0}
.updates7__features li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;border-top:1px solid var(--line);padding:20px 0}
.updates7__features li>.mono{color:var(--g1);padding-top:5px}
.updates7__features h3{font-size:clamp(22px,2vw,30px);line-height:1.25;letter-spacing:-.025em;font-weight:500;margin:0 0 10px}
.updates7__features p{font-size:16px;line-height:1.6;color:var(--g1)}
.updates7__end{display:flex;align-items:center;gap:32px;border-top:1px solid var(--line);padding-top:24px;margin-top:36px}
.updates7__end .pill{flex:none;min-height:44px}
.updates7__end p{font-size:14px;line-height:1.6;color:var(--g1);max-width:65ch}
@media(max-width:1000px){.updates7__intro,.updates7__grid{grid-template-columns:1fr}.updates7__intro{gap:24px}.updates7__grid{gap:28px}.updates7__intro .sec7__body{max-width:60ch}.updates7__features li{padding:20px 0}.updates7__features h3{font-size:24px}}
@media(max-width:767px){.h7__edit-link{margin-left:0;display:flex;align-items:center;width:fit-content;gap:8px;min-height:44px;margin-top:8px}.updates7{padding:64px 24px}.updates7__intro{margin:24px 0 32px}.updates7__intro .sec7__title{font-size:clamp(32px,8.5vw,48px);line-height:1.15;letter-spacing:-.035em}.updates7__intro .sec7__body{font-size:17px;line-height:1.55}.updates7__video--wide{display:none}.updates7__video--phone{display:block;width:auto;max-width:100%;height:min(560px,72svh);margin:0 auto;object-fit:contain}.updates7__demo figcaption{text-align:center}.updates7__features h3{font-size:22px;line-height:1.3}.updates7__end{align-items:flex-start;flex-direction:column;gap:18px;margin-top:24px}}

.inquiry__fields>*{min-width:0}
.inquiry__upload input[type=file]{font-size:14px;padding:12px;max-width:100%;cursor:pointer}
.inquiry__upload input[type=file]::file-selector-button{font:inherit;margin-right:12px;padding:8px 12px;border:1px solid var(--line);border-radius:3px;background:var(--fill-h);color:var(--ink);cursor:pointer}
.inquiry__help{font-size:14px;line-height:1.6;color:var(--g1);margin-top:10px;max-width:60ch}
.inquiry__help:empty{display:none}
.inquiry__previews{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.inquiry__previews li{width:112px;min-width:0}
.inquiry__previews img{width:112px;height:84px;object-fit:cover;border:1px solid var(--line)}
.inquiry__previews span{display:block;font-size:12px;line-height:1.4;margin-top:6px;overflow-wrap:anywhere}
.inquiry__clear{min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
.inquiry__previews[hidden],.inquiry__clear[hidden]{display:none}

/* Optional original photos: a bounded grid keeps a 100-photo request readable. */
.photo-enhanced{margin-top:4px}
.photo-enhanced [hidden]{display:none!important}
.inquiry .photo-enhanced input.photo-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}
.photo-enhanced>label{pointer-events:none}
.photo-enhanced .inquiry__help{margin:8px 0 16px;max-width:62ch}
.photo-panel{border:1px solid #d8d6d1;border-radius:8px;padding:16px;background:#fff;min-width:0}
.photo-panel button{font:inherit;cursor:pointer;letter-spacing:0;text-transform:none}
.photo-panel button:focus-visible,.photo-grid:focus-visible{outline:2px solid #1d5548;outline-offset:4px}
.photo-panel button:disabled{cursor:default;opacity:.5}
.photo-panel .photo-drop{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:104px;padding:20px;border:1px dashed #aaa69e;border-radius:5px;background:#faf9f6;color:#171714;transition:background .15s,border-color .15s;text-align:left}
.photo-drop:hover:not(:disabled),.photo-drop.is-dragging{background:#eef4f0;border-color:#315a49}
.photo-drop__icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;font-size:26px;font-weight:400;border:1px solid #cbc8c0;border-radius:50%;line-height:1}
.photo-drop__text{display:flex;flex-direction:column;gap:4px}
.photo-drop__text strong{font-size:15px;font-weight:600}
.photo-drop__hint{font-size:12px;color:#69665f;line-height:1.45}
.has-photos .photo-panel .photo-drop{min-height:64px;padding:12px;justify-content:flex-start}
.has-photos .photo-drop__text{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
.photo-info{margin-top:12px;font-size:12px;line-height:1.6;color:#68655f}
.photo-info p{margin:0;overflow-wrap:anywhere}
.photo-info p:first-child{color:#34332f;font-weight:500}
.photo-toolbar{display:flex;align-items:center;gap:12px;margin:12px 0 4px;flex-wrap:wrap;font-size:12px}
.photo-count{font-variant-numeric:tabular-nums;font-weight:600}
.photo-volume{color:#68655f;font-variant-numeric:tabular-nums}
.photo-panel .photo-text-button{width:auto;background:transparent;border:0;border-radius:3px;padding:10px 0;min-height:44px;font-size:12px!important;line-height:1.4;color:#46433d;text-decoration:underline;text-underline-offset:3px}
.photo-toolbar .photo-panel .photo-text-button{width:auto;margin-left:auto}
.photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:354px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;margin:0;padding:2px 4px 2px 2px;list-style:none}
.photo-card{position:relative;min-width:0;padding-bottom:8px}
.photo-card__visual{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#efeeea;border:1px solid #e5e3dd}
.photo-card__format{font-size:12px;color:#77746c;font-weight:600;letter-spacing:.05em}
.photo-card__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-panel button.photo-card__remove{position:absolute;top:4px;right:4px;width:32px;height:32px;display:grid;place-items:center;justify-content:center;border:1px solid #ddd9d0;border-radius:50%;background:#fffffff2;color:#161616;font-size:23px!important;line-height:1;padding:0;box-shadow:0 1px 4px #00000012}
.photo-card__remove:hover{background:#fff}
.photo-card__name{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:7px;line-height:1.5;color:#31302b}
.photo-card__meta{display:flex;justify-content:space-between;gap:4px;font-size:10px;line-height:1.5;color:#716d64;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.photo-card[data-state=done] .photo-card__meta{color:#28634a}
.photo-card[data-state=failed] .photo-card__meta{color:#aa341e}
.photo-progress{border-top:1px solid #e3e1db;margin-top:16px;padding-top:16px}
.photo-progress p{font-size:13px;color:#32302b;margin:0 0 10px;font-variant-numeric:tabular-nums}
.photo-progress progress{appearance:none;display:block;width:100%;height:5px;border:0;border-radius:4px;background:#e9e7e1;accent-color:#315a49}
.photo-progress progress::-webkit-progress-bar{background:#e9e7e1;border-radius:4px}
.photo-progress progress::-webkit-progress-value{background:#315a49;border-radius:4px;transition:width .15s}
.photo-progress progress::-moz-progress-bar{background:#315a49;border-radius:4px}
.photo-status{font-size:12px;line-height:1.6;margin:10px 0 0;color:#4c4942;overflow-wrap:anywhere}
.photo-status:empty{display:none}
.photo-status.is-error{color:#a12f1c}
.photo-foot{font-size:11px;line-height:1.6;color:#77736a;margin:12px 0 0}
@media(max-width:700px){.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:340px}.photo-panel{padding:12px}.photo-panel button.photo-card__remove{width:36px;height:36px}.has-photos .photo-drop__hint{display:none}}
@media(max-width:420px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:338px}.photo-panel button.photo-card__remove{width:44px;height:44px}.photo-panel .photo-drop{padding:16px 12px;gap:12px}.photo-drop__text strong{font-size:14px}.photo-info,.photo-status{font-size:11px}}
@media(prefers-reduced-motion:reduce){.photo-drop,.photo-progress progress::-webkit-progress-value{transition:none}}
.inquiry__clear:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* Live concept windows: all portfolio, home, industry and regional previews. */
.has-concept-preview{min-width:0;transform:none}
.case__media.has-concept-preview{display:block}
.stk__media.has-concept-preview{width:100%;aspect-ratio:auto;overflow:visible}
.frm.has-concept-preview{background:none;overflow:visible;border:0}
.concept-preview{width:100%;min-width:0;overflow:hidden;border:1px solid #d3d2ce;border-radius:9px;background:#f1f0ed;color:#292926;isolation:isolate}
.concept-preview__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:43px;padding:5px 14px;background:#f7f6f3;border-bottom:1px solid #d8d7d3;font-size:12px;line-height:1.4}
.concept-preview .concept-preview__hint{display:block;margin:0;color:#64645e;font:inherit}
.concept-preview .concept-preview__open{display:inline-flex;align-items:center;gap:6px;min-height:32px;flex-shrink:0;color:#262622;text-decoration:none;font:inherit;font-weight:500}
.concept-preview__open:hover{text-decoration:underline;text-underline-offset:4px}
.concept-preview__open:focus-visible,.concept-preview__frame:focus-visible{outline:3px solid #5f7562;outline-offset:-3px}
.concept-preview__viewport{position:relative;height:clamp(320px,34vw,560px);overflow:hidden;background:#eeede9}
.pg__heroimg .concept-preview__viewport{height:clamp(400px,53vw,760px)}
.concept-preview .concept-preview__poster{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:top;transform:none!important;border-radius:0;pointer-events:none}
.concept-preview__frame{position:absolute;top:0;left:0;display:block;border:0;max-width:none;transform-origin:0 0;opacity:0;background:white}
.concept-preview .concept-preview__status{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:8px 12px;border-radius:6px;margin:0;background:#f7f6f3;color:#44443e;font-size:12px;line-height:1.5;text-align:center;box-shadow:0 2px 14px #0001;pointer-events:none}
.concept-preview.is-ready .concept-preview__frame{opacity:1}
.concept-preview.is-ready .concept-preview__poster,.concept-preview.is-ready .concept-preview__status{visibility:hidden}
.concept-preview--compact .concept-preview__bar{flex-wrap:wrap;gap:0 8px;padding:7px 10px;font-size:11px}
.concept-preview--compact .concept-preview__viewport{height:300px}
.partner-photos .concept-card>a{display:flex;justify-content:space-between;padding:14px 0}
.brw.has-concept-preview{transform:none;will-change:auto}
.brw__view.has-concept-preview{height:auto;aspect-ratio:auto;max-height:none}
.brw__view .concept-preview{border:0;border-radius:0}
.concept-preview__select{min-width:0;max-width:45%;border:1px solid #d3d2ce;border-radius:5px;background:#fff;color:#292926;padding:7px 26px 7px 8px;font:inherit;cursor:pointer}
.stage__shot>.has-concept-preview{height:100%}
.stage__shot .concept-preview{height:100%;display:flex;flex-direction:column;border:0;border-radius:0}
.stage__shot .concept-preview__viewport{height:0;min-height:0;flex:1}
.stage__shot:not(.is-on) .concept-preview{visibility:hidden}
@media(max-width:1100px){.stk__media.has-concept-preview{align-self:stretch}.concept-preview__viewport{height:420px}}
@media(max-width:767px){
  .concept-preview__bar{padding:5px 10px;font-size:11px;gap:8px}
  .concept-preview__viewport,.pg__heroimg .concept-preview__viewport{height:460px;max-height:68svh}
  .stk__minis:has(.concept-preview){grid-template-columns:1fr}
  .stk__minis:has(.concept-preview) li:nth-child(3){display:block}
  .brw__view .concept-preview__hint{display:none}
  .concept-preview__select{max-width:65%}
  .concept-preview--compact .concept-preview__bar{flex-wrap:nowrap}
  .concept-preview--compact .concept-preview__viewport{height:360px}
}

/* Mobile home: short press feedback, independent of mouse hover. */
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
  html.mobile-motion :is(.btn,.pill,.h7__link,.stk__in){transition:transform 140ms cubic-bezier(.23,1,.32,1),background-color .2s,color .2s}
  html.mobile-motion :is(.btn,.pill,.h7__link):active:not(:focus-visible){transform:scale(.97)}
  html.mobile-motion .stk__in:active:not(:focus-visible){transform:scale(.985)}
  html.mobile-motion .btn:active:not(:focus-visible) .arw{transform:translate(2px,-2px);transition-duration:140ms}
}