/* 13 한 번에 끝 — R22 다시 짓기(10-27)
   색: 주 #F2B705 · 보조 #1F2937 · 포인트 #DC2626(5% 이하) · 바탕 #FFFDF2 · 버튼 글씨 #111111
   글꼴: Gothic A1 400·800 한 가족 · 그림자 한 단계(--sh) · 테두리 선은 버튼만 · 무늬는 타공판(공구 벽 한 곳) */
:root{
  --c:#F2B705; --c-d:#DDA600; --c2:#1F2937; --pt:#DC2626; --bg:#FFFDF2;
  --ink:#1F2937; --mute:#5B6472; --paper:#FFFFFF; --cream:#FFF6D8; --peg:#F3E3B6;
  --sh:0 26px 54px -24px rgba(31,41,55,.30);
  --pad:40px; --top:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;font-family:'Gothic A1',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-weight:400;color:var(--ink);font-size:18px;line-height:1.6;word-break:keep-all;
  background:var(--bg) linear-gradient(180deg,#FFFDF2 0,#FFFBEA 40%,#FFFDF2 100%)}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
b,strong{font-weight:800}
button{font:inherit;color:inherit}
.sr{position:absolute;left:-9999px}
.sr:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.em{color:var(--pt)}
.mark{background:linear-gradient(transparent 60%,rgba(242,183,5,.6) 60%,rgba(242,183,5,.6) 90%,transparent 90%) no-repeat 0 0/100% 100%;padding:0 .06em}
.js:not(.rm) .mark{animation:swipe .5s var(--ease) .35s both}
@keyframes swipe{from{background-size:0 100%}to{background-size:100% 100%}}
.hl{background:linear-gradient(transparent 55%,rgba(242,183,5,.55) 55%,rgba(242,183,5,.55) 92%,transparent 92%);padding:0 .06em}
.kick{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--c2);letter-spacing:.02em;margin-bottom:16px}
.kick::before{content:"";width:14px;height:14px;background:var(--c);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
h2{font-size:54px;line-height:1.14;letter-spacing:-.02em;font-weight:800}
.fail{color:var(--pt);font-size:15px}
svg{width:20px;height:20px;flex:none}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:58px;padding:0 28px;border-radius:12px;font-size:17px;font-weight:800;text-decoration:none;transition:transform .25s var(--ease),background-color .25s var(--ease)}
.btn.fill{background:var(--c);color:#111}
.btn.fill:hover{background:var(--c-d);transform:translateY(-2px)}
.btn.line{background:#fff;color:var(--c2);border:2px solid var(--c2)}
.btn.line:hover{transform:translateY(-2px)}
.go{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--c2);text-decoration:none;font-size:16px;border-bottom:3px solid var(--c);padding-bottom:2px}
.go svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.go:hover svg{transform:translateX(4px)}

/* 머리 */
.top{position:sticky;top:0;z-index:40;background:rgba(255,253,242,.92);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid rgba(31,41,55,.08)}
.top .wrap{height:var(--top);display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:19px}
.lg-i{width:32px;height:32px}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{text-decoration:none;font-size:15.5px;color:var(--mute);font-weight:800}
.nav a:hover{color:var(--c2)}
.callb{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-radius:10px;background:var(--c);color:#111;font-weight:800;font-size:15px;text-decoration:none}
.callb svg{width:17px;height:17px}

/* ── 첫 화면 ── */
.hero{overflow-x:clip;padding:36px 0 124px}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) 640px;gap:56px;align-items:center}
.band{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--c2);background:rgba(242,183,5,.18);padding:8px 16px 8px 12px;border-radius:999px;margin-bottom:28px}
.bolt{width:14px;height:14px;background:var(--c2);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);animation:nut 6s linear infinite}
@keyframes nut{to{transform:rotate(360deg)}}
h1{font-size:62px;line-height:1.12;letter-spacing:-.025em;font-weight:800}
h1 .l1,h1 .l2{display:block}
.sub{font-size:22px;line-height:1.5;color:var(--mute);margin-top:24px}
.cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.last{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:15px;font-weight:800;color:var(--mute)}
.last::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pt)}

.scene{position:relative}
.stage{position:relative;aspect-ratio:640/600;border-radius:22px;overflow:hidden;box-shadow:var(--sh);background:#ECE8DA}
.bgimg{position:absolute;inset:0;background:center 60%/cover no-repeat;transform-origin:70% 50%}
.js:not(.rm) .bgimg{animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.035)}}
.pin{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:10px;transform:translate(-7px,-50%);z-index:2}
.pin>i{position:relative;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(31,41,55,.25);flex:none}
.pin>i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--c);animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(.5);opacity:.9}to{transform:scale(1.7);opacity:0}}
.pin b{background:#fff;color:var(--c2);font-size:14px;padding:5px 10px;border-radius:8px;white-space:nowrap}
.pin.r{flex-direction:row-reverse;transform:translate(calc(-100% + 7px),-50%)}
.done{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.95);border-radius:14px;padding:8px 16px 8px 8px;z-index:2}
.stamp{width:48px;height:48px;border-radius:50%;border:2.5px solid var(--pt);color:var(--pt);display:grid;place-items:center;font-size:13px;font-weight:800;transform:rotate(-12deg);flex:none}
.js:not(.rm) .stamp{animation:stampin .38s cubic-bezier(.3,1.6,.5,1) .9s both}
@keyframes stampin{from{transform:rotate(-30deg) scale(1.7)}to{transform:rotate(-12deg) scale(1)}}
.dtx{display:flex;flex-direction:column;line-height:1.35}
.dtx b{font-size:15px}
.dtx small{font-size:13px;color:var(--mute)}

/* 열린 공구함 조각 */
.kit{position:absolute;left:-44px;bottom:84px;width:236px;height:166px;z-index:3;zoom:.84}
.k-lid{position:absolute;left:6px;right:6px;top:0;height:88px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#C99600,#A67C00);box-shadow:inset 0 0 0 5px #F2B705;transform-origin:50% 100%;transform:perspective(520px) rotateX(-14deg)}
.k-peg{position:absolute;left:16px;right:16px;top:14px;height:12px;border-radius:3px;background:var(--pt)}
.k-tray{position:absolute;left:4px;right:4px;top:78px;height:44px;border-radius:6px;background:linear-gradient(180deg,#111827,#374151);transform-origin:50% 100%;transform:perspective(420px) rotateX(38deg)}
.k-front{position:absolute;left:0;right:0;bottom:6px;height:58px;border-radius:6px 6px 12px 12px;background:linear-gradient(180deg,#FFD43B 0,#F2B705 40%,#C99600 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.55)}
.latch{position:absolute;left:50%;top:12px;width:30px;height:16px;margin-left:-15px;border-radius:4px;background:linear-gradient(180deg,#E5E7EB,#6B7280)}
.k-sh{position:absolute;left:10px;right:-16px;bottom:-6px;height:22px;border-radius:50%;background:rgba(31,41,55,.32);filter:blur(9px);z-index:-1}
.mini{position:absolute;display:block}
.m-drv{left:22px;top:84px;width:150px;height:22px;transform:rotate(-14deg)}
.m-drv .h{position:absolute;left:0;top:0;width:62px;height:22px;border-radius:11px 6px 6px 11px;background:linear-gradient(180deg,#F87171,#DC2626 45%,#991B1B)}
.m-drv .s{position:absolute;left:60px;top:7px;width:86px;height:7px;border-radius:2px;background:linear-gradient(180deg,#F1F5F9,#94A3B8 55%,#475569)}
.m-wr{left:112px;top:76px;width:110px;height:34px;transform:rotate(18deg)}
.m-wr .h{position:absolute;left:0;top:12px;width:82px;height:11px;border-radius:6px;background:linear-gradient(180deg,#F1F5F9,#94A3B8 55%,#475569)}
.m-wr .j{position:absolute;left:76px;top:0;width:34px;height:34px;border-radius:50%;background:linear-gradient(160deg,#F1F5F9,#94A3B8 55%,#475569);clip-path:polygon(0 0,100% 0,100% 34%,50% 34%,50% 66%,100% 66%,100% 100%,0 100%)}
.m-tp{left:172px;top:66px;width:46px;height:46px}
.m-tp .c{position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,#FFE066,#F2B705 50%,#B88A00)}
.m-tp .b{position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--c2)}
.js:not(.rm) .k-lid{animation:lid .55s var(--ease) .25s both}
@keyframes lid{from{transform:perspective(520px) rotateX(-88deg)}to{transform:perspective(520px) rotateX(-14deg)}}
.js:not(.rm) .mini{animation:peek .45s var(--ease) both}
.js:not(.rm) .m-drv{animation-delay:.6s}.js:not(.rm) .m-wr{animation-delay:.7s}.js:not(.rm) .m-tp{animation-delay:.8s}
@keyframes peek{from{translate:0 18px}to{translate:0 0}}

.frag{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--sh);z-index:4}
.frag.sms{right:-46px;top:-28px;width:356px;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px}
.sph{width:58px;height:58px;border-radius:10px;background:center/cover no-repeat;flex:none}
.stx{display:flex;flex-direction:column;gap:2px;min-width:0}
.who{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute);font-weight:800}
.who svg{width:14px;height:14px;color:var(--c2)}
.typed{font-size:16px;font-weight:800;color:var(--c2);line-height:1.4}
.typed.go-on::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--c2);animation:caret .7s steps(1) infinite}
@keyframes caret{50%{visibility:hidden}}
.recent{position:absolute;right:-28px;bottom:-66px;display:flex;gap:6px;background:#fff;border-radius:18px;padding:10px;box-shadow:var(--sh);z-index:4}
.rc{display:flex;align-items:center;gap:10px;text-decoration:none;width:196px;padding:2px 8px 2px 2px;border-radius:12px;transition:background-color .25s var(--ease)}
.rc:hover{background:var(--cream)}
.rc img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex:none}
.rc span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rc b{font-size:13px}
.rc small{font-size:12.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── 공구 벽(새 도전) ── */
.wall{padding:56px 0}
.w-head{margin-bottom:36px}
.w-g{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:48px;align-items:stretch}
.board{position:relative;height:640px;border-radius:22px;background-color:var(--peg);
  background-image:radial-gradient(circle,rgba(92,64,8,.42) 0 2.7px,rgba(255,255,255,.5) 3.1px,transparent 3.8px),linear-gradient(155deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%,rgba(120,84,10,.08));
  background-size:30px 30px,100% 100%;background-position:15px 15px,0 0;box-shadow:inset 0 0 0 1px rgba(31,41,55,.06),var(--sh);perspective:1100px;perspective-origin:42% 17%}
.tl{position:absolute;left:var(--x);top:var(--y);height:200px;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent}
.tl:focus-visible{outline:3px solid var(--c2);outline-offset:8px;border-radius:12px}
.t-drv{--x:38%;--y:17%}.t-wr{--x:17%;--y:47%}.t-tp{--x:50%;--y:47%}.t-fl{--x:82%;--y:47%}.t-dr{--x:27%;--y:79%}.t-ct{--x:71%;--y:79%}
.os{position:relative;display:block;zoom:var(--s,1);transform-style:preserve-3d}
.tl::before{content:"";position:absolute;left:50%;top:-14px;width:10px;height:18px;margin-left:-5px;border-radius:3px;background:linear-gradient(90deg,#94A3B8,#F1F5F9,#64748B)}
.obj{position:relative;display:block;transition:transform .38s var(--ease);transform-style:preserve-3d}
.obj>i,.obj>i>i{position:absolute;display:block}
.sh{position:absolute;left:4%;right:4%;top:10%;bottom:6%;border-radius:22px;background:rgba(74,52,6,.34);filter:blur(5px);transform:translate(5px,7px);transition:transform .38s var(--ease),filter .38s var(--ease),opacity .38s var(--ease);z-index:-1}
.tl:hover .obj,.tl.on .obj{transform:translate3d(0,-10px,70px) rotateX(16deg) rotateZ(-5deg)}
.tl:hover .sh,.tl.on .sh{transform:translate(26px,34px) scale(1.04);filter:blur(14px);opacity:.6}
.js:not(.rm) .tl:not(.on):not(:hover) .obj{animation:sway 4.6s ease-in-out infinite}
.t-wr .obj{animation-delay:-1s!important}.t-tp .obj{animation-delay:-2.2s!important}.t-fl .obj{animation-delay:-.6s!important}.t-dr .obj{animation-delay:-3s!important}.t-ct .obj{animation-delay:-1.7s!important}
@keyframes sway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
.tag{position:relative;font-size:15px;font-weight:800;color:var(--c2);background:#fff;padding:5px 12px;border-radius:7px;transform:rotate(-1.5deg);white-space:nowrap;transition:background-color .25s var(--ease)}
.tl.on .tag{background:var(--c);color:#111}
/* 드라이버 */
.t-drv .obj{width:300px;height:46px}
.t-drv .hd{left:0;top:0;width:122px;height:46px;border-radius:23px 12px 12px 23px;background:linear-gradient(180deg,#F87171 0,#DC2626 38%,#991B1B 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.t-drv .gr{left:16px;right:12px;top:9px;bottom:9px;border-radius:10px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 3px,transparent 3px 11px)}
.t-drv .fr{left:118px;top:12px;width:20px;height:22px;border-radius:3px;background:linear-gradient(180deg,#F8FAFC,#94A3B8 55%,#475569)}
.t-drv .sf{left:136px;top:18px;width:150px;height:10px;border-radius:2px;background:linear-gradient(180deg,#F8FAFC,#A3B0C2 50%,#475569)}
.t-drv .tp{left:284px;top:16px;width:16px;height:14px;background:linear-gradient(180deg,#CBD5E1,#334155);clip-path:polygon(0 0,100% 38%,100% 62%,0 100%)}
.t-drv .sh{border-radius:23px 6px 6px 23px}
/* 몽키 스패너 */
.t-wr .obj{width:230px;height:72px}
.t-wr .hd{left:0;top:25px;width:172px;height:22px;border-radius:11px;background:linear-gradient(180deg,#F8FAFC,#A3B0C2 50%,#52627A);box-shadow:inset 0 2px 0 rgba(255,255,255,.6)}
.t-wr .jw{left:158px;top:0;width:72px;height:72px;border-radius:50%;background:linear-gradient(160deg,#F8FAFC,#94A3B8 55%,#475569);clip-path:polygon(0 0,100% 0,100% 33%,46% 33%,46% 67%,100% 67%,100% 100%,0 100%)}
.t-wr .nt{display:none}
.t-wr .sc{left:146px;top:28px;width:20px;height:16px;border-radius:3px;background:repeating-linear-gradient(90deg,#B8860B 0 3px,#F2C94C 3px 6px)}
/* 줄자 */
.t-tp .obj{width:192px;height:98px}
.t-tp .cs{left:0;top:0;width:98px;height:98px;border-radius:24px;background:linear-gradient(155deg,#FFE066 0,#F2B705 48%,#B88A00 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.5)}
.t-tp .ce{left:27px;top:27px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#4B5563 0 30%,#1F2937 32% 100%)}
.t-tp .bl{left:84px;top:70px;width:102px;height:18px;border-radius:0 2px 2px 0;background:repeating-linear-gradient(90deg,rgba(31,41,55,.85) 0 1.5px,transparent 1.5px 7px) 0 0/100% 7px no-repeat,linear-gradient(180deg,#FFF3B0,#FDE047)}
.t-tp .lk{left:184px;top:64px;width:8px;height:28px;border-radius:2px;background:linear-gradient(90deg,#94A3B8,#F1F5F9,#475569)}
/* 줄눈 헤라 */
.t-fl .obj{width:172px;height:92px}
.t-fl .hd{left:38px;top:0;width:96px;height:46px;border:12px solid #374151;border-bottom:0;border-radius:40px 40px 0 0;background:transparent}
.t-fl .pd{left:0;top:44px;width:172px;height:48px;border-radius:8px;background:linear-gradient(180deg,#E5E7EB 0 26%,#9CA3AF 26% 30%,#374151 30%,#1F2937 100%)}
.t-fl .sh{top:44%}
/* 전동 드릴 */
.t-dr .obj{width:236px;height:150px}
.t-dr .bd{left:44px;top:0;width:156px;height:56px;border-radius:16px 30px 30px 16px;background:linear-gradient(180deg,#FFE066 0,#F2B705 45%,#B88A00 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.5)}
.t-dr .gp{left:104px;top:46px;width:48px;height:76px;border-radius:10px;background:linear-gradient(90deg,#111827,#374151 60%,#1F2937);transform:skewX(-10deg)}
.t-dr .bt{left:80px;top:116px;width:104px;height:34px;border-radius:8px;background:linear-gradient(180deg,#F2B705,#B88A00)}
.t-dr .ch{left:6px;top:14px;width:42px;height:28px;border-radius:6px 2px 2px 6px;background:linear-gradient(180deg,#6B7280,#111827)}
.t-dr .bit{left:-40px;top:24px;width:48px;height:8px;border-radius:2px;background:repeating-linear-gradient(115deg,#CBD5E1 0 4px,#64748B 4px 7px)}
.t-dr .sh{border-radius:18px 30px 12px 12px}
/* 커터칼 */
.t-ct .obj{width:212px;height:42px}
.t-ct .bd{left:0;top:6px;width:150px;height:32px;border-radius:9px;background:linear-gradient(180deg,#FFE066,#F2B705 50%,#B88A00);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.t-ct .sl{left:42px;top:0;width:28px;height:12px;border-radius:4px;background:var(--c2)}
.t-ct .bl{left:148px;top:12px;width:62px;height:20px;background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(71,85,105,.55) 9px 10px),linear-gradient(180deg,#F8FAFC,#94A3B8);clip-path:polygon(0 0,100% 0,74% 100%,0 100%)}

/* 튀어나옴: 드라이버가 화면 앞으로 한 번(1.8초) */
.tl.pop{z-index:5}
.tl.pop .obj{animation:popout 1.8s cubic-bezier(.3,.6,.25,1) both!important}
.tl.pop .sh{animation:popsh 1.8s cubic-bezier(.3,.6,.25,1) both}
@keyframes popout{
  0%{transform:translate3d(0,0,0) rotateX(0) rotateZ(0)}
  28%{transform:translate3d(30px,0,260px) rotateX(40deg) rotateZ(-8deg)}
  52%{transform:translate3d(50px,4px,360px) rotateX(200deg) rotateZ(-10deg)}
  78%{transform:translate3d(30px,0,220px) rotateX(330deg) rotateZ(-6deg)}
  100%{transform:translate3d(0,-10px,70px) rotateX(376deg) rotateZ(-5deg)}}
@keyframes popsh{
  0%{transform:translate(5px,7px);filter:blur(5px);opacity:1}
  52%{transform:translate(120px,96px) scale(1.25);filter:blur(26px);opacity:.38}
  100%{transform:translate(26px,34px) scale(1.04);filter:blur(14px);opacity:.6}}

.pv{display:flex;flex-direction:column}
.pv-ph{position:relative;height:430px;border-radius:22px;overflow:hidden;box-shadow:var(--sh);background:#E9E4D3}
.pv-l{position:absolute;inset:0;background:center/cover no-repeat}
.pv-l.in{animation:liftin .45s var(--ease) both}
@keyframes liftin{from{clip-path:inset(100% 0 0 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
.pv-tag{position:absolute;left:16px;top:16px;background:var(--c);color:#111;font-size:15px;font-weight:800;padding:6px 13px;border-radius:8px;z-index:2}
.pv-tag.in{animation:tagpop .3s var(--ease) both}
@keyframes tagpop{from{transform:translateY(-8px) scale(.9)}to{transform:none}}
.pv-t{display:flex;flex-direction:column;gap:10px;padding-top:22px;flex:1}
.pv-m{font-size:15px;font-weight:800;color:var(--mute)}
.pv-s,.pv-f{font-size:18px;line-height:1.45;display:flex;gap:12px;align-items:baseline}
.pv-f{font-size:21px;font-weight:800}
.q{flex:none;font-size:12.5px;font-weight:800;color:var(--c2);background:rgba(31,41,55,.07);padding:3px 9px;border-radius:6px}
.pv-f .q{background:rgba(242,183,5,.35)}
.pv-t .go{margin-top:auto;align-self:flex-start}
.pv-t .in{animation:tagpop .3s var(--ease) both}

/* ── 사장님 ── */
.own{padding:56px 0}
.own-g{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:64px;align-items:stretch}
.own-t{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.note{position:relative;width:min(100%,460px);margin:32px 0 34px 34px;background:#fff repeating-linear-gradient(transparent 0 37px,rgba(31,41,55,.07) 37px 38px);background-position:0 46px;border-radius:6px;padding:20px 26px 22px;box-shadow:var(--sh);transform:rotate(-1.6deg)}
.n-h{display:inline-block;font-size:14px;font-weight:800;color:var(--pt);margin-bottom:6px}
.n-l li{display:flex;flex-direction:column;padding:4px 0;font-size:19px;font-weight:800;line-height:1.35}
.n-l small{font-size:13px;font-weight:400;color:var(--mute)}
.n-stamp{position:absolute;right:20px;top:16px;width:56px;height:56px;border-radius:50%;border:3px solid var(--pt);color:var(--pt);display:grid;place-items:center;font-size:20px;font-weight:800;transform:rotate(14deg)}
.js:not(.rm) .note.in .n-stamp{animation:stampin2 .38s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes stampin2{from{transform:rotate(-20deg) scale(1.8)}to{transform:rotate(14deg) scale(1)}}
.own-p{position:relative;height:640px;border-radius:24px;background:center 30%/cover no-repeat;box-shadow:var(--sh)}
.o-tag,.o-cap{position:absolute;left:16px;background:rgba(255,255,255,.94);border-radius:8px;padding:5px 11px;font-size:13px;font-weight:800;color:var(--c2)}
.o-tag{top:16px}.o-cap{bottom:16px}

/* ── 닫힌 날: 가로 넘기기 ── */
.cases{padding:56px 0}
.c-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.c-nav{display:flex;gap:10px}
.arw{width:54px;height:54px;border-radius:50%;border:2px solid var(--c2);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.arw:hover{background:var(--c);transform:translateY(-2px)}
.arw svg{transform:rotate(180deg)}.arw.nx svg{transform:none}
.rail{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px max(var(--pad),calc((100vw - 1280px) / 2)) 12px;scrollbar-width:none;scroll-padding-left:max(var(--pad),calc((100vw - 1280px) / 2))}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:2px solid var(--c2)}
.cc{flex:0 0 310px;scroll-snap-align:start;text-decoration:none;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.ci{position:relative;height:390px;border-radius:16px;overflow:hidden;flex:none}
.ci>img:first-child{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.cc:hover .ci>img:first-child{transform:scale(1.04)}
.cb{position:absolute;right:12px;top:12px;width:92px;height:92px;object-fit:cover;border:4px solid #fff;border-radius:8px;transform:rotate(4deg)}
.cc:nth-child(2n) .cb{transform:rotate(-3deg)}
.cbt{position:absolute;right:16px;top:90px;background:var(--c2);color:#fff;font-size:12px;font-weight:800;padding:2px 8px;border-radius:5px}
.cm{margin-top:8px;font-size:14px;font-weight:800;color:var(--mute)}
.cf{font-size:19px;font-weight:800;line-height:1.38;color:var(--c2)}
.cs{font-size:14px;color:var(--mute);line-height:1.45}
.cs i{font-style:normal;font-weight:800;color:var(--c2);margin-right:6px}

/* ── 다니는 곳: D 아이소메트릭 동네 블록 ── */
.area{padding:56px 0;overflow-x:clip}
.area-g{display:grid;grid-template-columns:640px minmax(0,1fr);gap:56px;align-items:center}
.iso{position:relative;height:470px}
.iso.rv{opacity:1;transform:none}
.iso-in{position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;transform-style:preserve-3d;zoom:1.22}
.plate{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-45deg);background:linear-gradient(135deg,#FFF9E2,#F7E9B9);border-radius:4px}
.p-e1{position:absolute;left:0;top:100%;width:100%;height:20px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(180deg,#D9BE6A,#BFA14B)}
.p-e2{position:absolute;left:-20px;top:0;width:20px;height:100%;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#E8D28A,#F1DFA2)}
.road{position:absolute;background:rgba(31,41,55,.13)}
.road.r1{left:0;top:150px;width:100%;height:10px}
.road.r2{left:116px;top:0;width:10px;height:100%}
.ping{position:absolute;left:180px;top:180px;width:90px;height:90px;border-radius:50%;border:2px solid rgba(220,38,38,.55);animation:ping 2.6s ease-out infinite}
.bx{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--d);transform-style:preserve-3d;transform-origin:50% 50% 0}
.bx>i{position:absolute;display:block}
.f-t{inset:0;transform:translateZ(var(--h))}
.f-f{left:0;top:100%;width:100%;height:var(--h);transform-origin:50% 0;transform:rotateX(90deg)}
.f-l{right:100%;top:0;width:var(--h);height:100%;transform-origin:100% 50%;transform:rotateY(90deg)}
.bx.s .f-t{background:#FFE27A}
.bx.s .f-l{background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(31,41,55,.12) 7px 10px),#F7C431}
.bx.s .f-f{background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(31,41,55,.16) 7px 10px),#C99500}
.bx.g .f-t{background:#F5F6F8}
.bx.g .f-l{background:#D9DEE6}
.bx.g .f-f{background:#A9B2C0}
.bx.i .f-t{background:#FFFFFF}
.bx.i .f-l{background:#E8ECF1}
.bx.i .f-f{background:#C3CBD6}
.js:not(.rm) .iso:not(.in) .bx{transform:scaleZ(.04)}
.js:not(.rm) .iso.in .bx{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 30ms)}
@keyframes rise{from{transform:scaleZ(.04)}to{transform:scaleZ(1)}}
.zone{position:absolute;left:18px;top:22px;width:100px;height:120px;border-radius:24px;background:rgba(31,41,55,.07)}
.van{position:absolute;left:8px;top:147px;width:20px;height:14px;--h:12px;transform-style:preserve-3d;animation:drive 9s ease-in-out infinite alternate}
.van .f-t{background:var(--c)}.van .f-l{background:#D9A300}.van .f-f{background:#A87F00}
@keyframes drive{from{transform:translateX(0)}to{transform:translateX(360px)}}
.lab{position:absolute;left:var(--x);top:var(--y);transform-origin:0 0;transform:translateZ(var(--z)) rotateZ(45deg) rotateX(-56deg) translate(-50%,-100%);font-size:24px;font-weight:800;color:var(--c2);background:#fff;padding:6px 16px;border-radius:10px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.lab.l-s{background:var(--c);color:#111;font-size:28px}
.lab small{font-size:12px;font-weight:800;color:var(--mute)}
.iso-sh{position:absolute;left:50%;top:58%;width:560px;height:150px;margin-left:-280px;border-radius:50%;background:radial-gradient(closest-side,rgba(31,41,55,.2),transparent);filter:blur(6px)}
.iso-cap{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:14px;font-weight:800;color:var(--mute);white-space:nowrap}
.area-t .stop{font-size:18px;color:var(--mute);margin:22px 0 30px}
.area-t .stop b{color:var(--c2)}

/* ── 연락 ── */
.ask{padding:56px 0 96px}
.ask-g{display:grid;grid-template-columns:560px minmax(0,1fr);gap:72px;align-items:center}
.ask-s{position:relative}
.a-ph{height:560px;border-radius:22px;background:center/cover no-repeat;box-shadow:var(--sh);position:relative}
.a-cap{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);border-radius:8px;padding:5px 11px;font-size:13px;font-weight:800}
.frag.msg{right:-44px;top:44px;width:290px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.mline{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800;color:var(--c2);min-height:24px}
.ml-k{flex:none;width:52px;font-size:12.5px;color:var(--mute)}
.mth{width:46px;height:46px;border-radius:8px;background:center/cover no-repeat}
.ask-t .tel{font-size:54px;font-weight:800;letter-spacing:-.01em;color:var(--c2);margin:26px 0 8px}

/* 바닥 */
.foot{padding:0 0 110px;font-size:14px;color:var(--mute)}
.foot-g{display:grid;grid-template-columns:1fr auto;gap:24px 48px;border-radius:24px;padding:40px 44px;background:#FBEDBD}
.fname{font-size:17px;font-weight:800;color:var(--c2);margin-bottom:10px}
.foot dl{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;margin:0}
.foot dt{font-weight:800}
.flinks{display:flex;gap:20px}
.flinks a{text-decoration:none;font-weight:800;color:var(--c2)}
.sample-note{grid-column:1/-1;font-size:12.5px}
.bar{position:fixed;z-index:50;right:24px;bottom:24px;display:flex;gap:8px;padding:8px;border-radius:18px;background:rgba(255,253,242,.96);box-shadow:var(--sh);transform:translateY(160%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s}
.bar.show{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
.bar .btn{height:48px;padding:0 20px;font-size:16px}

/* 등장 */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .35s ease-out,transform .35s ease-out}
.js .rv.in,.rm .rv{opacity:1;transform:none}
.js .iso.rv{opacity:1;transform:none}

/* ── 현장 쪽 · 묻고 답하기 쪽 ── */
.cpage{padding:40px 0 56px}
.back{margin-bottom:28px}.back svg{transform:rotate(180deg)}
.cg{display:grid;grid-template-columns:600px minmax(0,1fr);gap:56px;align-items:center}
.cph{position:relative}
.cph .ca{display:block;height:540px;border-radius:22px;overflow:hidden;box-shadow:var(--sh)}
.cph .ca img{width:100%;height:100%;object-fit:cover}
.cph .cbf{position:absolute;left:-28px;bottom:-28px;width:190px;height:190px;border-radius:12px;overflow:hidden;border:5px solid #fff;transform:rotate(-4deg)}
.cph .cbf img{width:100%;height:100%;object-fit:cover}
.tg{position:absolute;left:14px;top:14px;background:var(--c);color:#111;font-size:14px;font-weight:800;padding:4px 11px;border-radius:7px}
.tg.tb{background:var(--c2);color:#fff;left:10px;top:10px}
.chd{font-size:50px;line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:8px 0 22px}
.ct .pv-s{margin-bottom:12px}
.ct .cta{margin-top:30px}
.cnext{display:flex;gap:8px;margin-top:40px;padding-top:22px;border-top:2px solid rgba(31,41,55,.1)}
.cnext .rc{width:auto;flex:1 1 0}
.cnext-h{font-size:14px;font-weight:800;color:var(--mute);margin-top:40px}
.cnext-h+.cnext{margin-top:10px}
.fpage{padding:44px 0 56px}
.fh{font-size:60px;line-height:1.12;letter-spacing:-.02em;font-weight:800}
.fsub{font-size:21px;color:var(--mute);margin:18px 0 44px}
.fg{font-size:34px;margin:12px 0 18px}
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin-bottom:48px}
.qa li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;align-items:start;padding:16px 0;border-top:2px solid rgba(31,41,55,.1)}
.qa img{width:132px;height:132px;border-radius:12px;object-fit:cover}
.qm{font-size:13.5px;font-weight:800;color:var(--mute)}
.qq{font-size:15px;color:var(--mute);margin:4px 0}
.qq i{font-style:normal;font-weight:800;color:var(--c2);margin-right:6px}
.qa-a{font-size:19px;font-weight:800;line-height:1.38}
.qa .go{font-size:14px;margin-top:8px}
.fwall{display:grid;grid-template-columns:minmax(0,560px) 420px;justify-content:start;gap:96px;align-items:center}
.qa:last-of-type{margin-bottom:0}
.fpage+.ask,.cases+.ask{padding-top:40px}
.fwall .own-p{height:520px}

/* ── 폰 ── */
@media (max-width:1180px){
  .hero-g{grid-template-columns:minmax(0,1fr) 520px}
  .w-g{grid-template-columns:minmax(0,1fr) 380px}
  .area-g{grid-template-columns:520px minmax(0,1fr)}
  .ask-g{grid-template-columns:460px minmax(0,1fr)}
  h1{font-size:52px}
}
@media (max-width:900px){
  :root{--pad:20px;--top:58px}
  body{font-size:17px}
  .nav{display:none}
  .callb{margin-left:auto}
  h2{font-size:34px}
  .kick{font-size:14px;margin-bottom:12px}
  .hero{padding:22px 0 64px}
  .hero-g{grid-template-columns:1fr;gap:30px}
  .band{font-size:13px;margin-bottom:18px;padding:7px 12px 7px 10px}
  h1{font-size:34px;letter-spacing:-.03em}
  .sub{font-size:17px;margin-top:14px}
  .cta{margin-top:22px;gap:10px}
  .cta .btn{flex:1 1 0;padding:0 14px;height:54px;font-size:16px}
  .last{margin-top:18px;font-size:14px}
  .scene{margin:0 calc(var(--pad) * -1)}
  .stage{border-radius:0;box-shadow:none}
  .pin b{font-size:12.5px;padding:4px 8px}
  .done{left:auto;right:10px;top:auto;bottom:10px;padding:6px 12px 6px 6px;gap:8px}
  .stamp{width:40px;height:40px;font-size:12px}
  .dtx b{font-size:13.5px}.dtx small{font-size:12px}
  .kit{left:8px;bottom:auto;top:425px;zoom:.6}
  .frag.sms{right:12px;top:12px;width:262px;padding:9px 12px 9px 9px;gap:10px}
  .sph{width:46px;height:46px}
  .typed{font-size:14.5px}
  .recent{position:static;margin:12px var(--pad) 0;padding:0;gap:10px;box-shadow:none;background:none}
  .rc{width:auto;flex:1 1 0;flex-direction:column;align-items:flex-start;gap:6px;padding:0}
  .rc img{width:100%;height:76px}
  .rc b{font-size:12px}.rc small{font-size:11.5px}
  .wall,.own,.cases,.area{padding:40px 0}
  .w-head{margin-bottom:22px}
  .w-g{grid-template-columns:1fr;gap:26px}
  .board{height:440px;margin:0 calc(var(--pad) * -1);border-radius:0;box-shadow:inset 0 0 0 1px rgba(31,41,55,.06)}
  .tl{--s:.5;gap:10px;height:112px}
  .tag{font-size:13px;padding:4px 9px}
  .board{perspective-origin:36% 15%}
  .t-drv{--x:36%;--y:15%}.t-fl{--x:82%;--y:15%}.t-wr{--x:27%;--y:48%}.t-tp{--x:75%;--y:48%}.t-dr{--x:30%;--y:81%}.t-ct{--x:74%;--y:81%}
  .tl::before{top:-10px;height:12px;width:8px}
  .pv-ph{height:360px}
  .pv-t{padding-top:16px;gap:8px}
  .pv-f{font-size:18px}.pv-s{font-size:16px}
  .pv-t .go{margin-top:6px}
  .own-g{grid-template-columns:1fr;gap:28px}
  .note{margin:22px 0 24px 30px;width:calc(100% - 30px);padding:16px 20px 18px}
  .n-l li{font-size:17px}
  .own-p{height:470px;margin:0 calc(var(--pad) * -1);border-radius:0;box-shadow:none}
  .c-nav{display:none}
  .rail{padding:22px var(--pad) 8px;gap:16px;scroll-padding-left:var(--pad)}
  .cc{flex-basis:262px}
  .ci{height:330px}
  .cb{width:76px;height:76px}
  .cbt{top:74px}
  .cf{font-size:17px}
  .area-g{grid-template-columns:1fr;gap:10px}
  .area{padding-top:24px}
  .iso{height:320px}
  .iso-cap{font-size:12.5px;bottom:2px}
  .cnext{flex-direction:column}
  .iso-in{zoom:.6;margin:-225px 0 0 -200px}
  .iso-cap{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:14px;font-weight:800;color:var(--mute);white-space:nowrap}
.area-t .stop{font-size:16px;margin:14px 0 20px}
  .ask{padding:40px 0 64px}
  .ask-g{grid-template-columns:1fr;gap:28px}
  .a-ph{height:420px;margin:0 calc(var(--pad) * -1);border-radius:0;box-shadow:none}
  .frag.msg{position:relative;right:auto;top:auto;margin:-70px 12px 0 auto;width:270px}
  .ask-t .tel{font-size:38px;margin:18px 0 4px}
  .foot{padding:0 0 96px}
  .foot-g{grid-template-columns:1fr;padding:28px 22px}
  .bar{left:0;right:0;bottom:0;border-radius:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,242,.97)}
  .bar .btn{flex:1 1 0;height:50px}
  .cg{grid-template-columns:1fr;gap:36px}
  .cph .ca{height:440px}
  .cph .cbf{left:10px;bottom:-24px;width:130px;height:130px}
  .chd{font-size:32px}
  .fh{font-size:36px}
  .fsub{font-size:17px;margin:12px 0 28px}
  .fg{font-size:26px}
  .qa{grid-template-columns:1fr;gap:0}
  .qa li{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .qa img{width:96px;height:96px}
  .qa-a{font-size:17px}
  .fwall{grid-template-columns:1fr;gap:24px}
  .fwall .own-p{height:420px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* R23-5 (창재님 10-29): 아래 고정 문자·전화 줄은 늘 보이게 — 첫 화면 버튼이 보여도 숨기지 않음 */
*:has(> [data-at="bar"]){visibility:visible!important;transform:none!important;opacity:1!important;pointer-events:auto!important}


.own-q{font-size:20px;font-weight:800;color:var(--ink);line-height:1.45}
.own-q small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--mute)}
.o-bf{position:absolute;right:16px;bottom:16px;width:150px;height:150px;border-radius:14px;background:center/cover no-repeat;border:4px solid #fff;box-shadow:var(--sh)}
.o-bf b{position:absolute;left:8px;top:8px;background:var(--c2);color:#fff;font-size:12px;padding:2px 8px;border-radius:999px}
.own-p .o-cap{right:auto}

/* ── PC 바탕 깊이(창재님 10-31 「웹에서 보면 배경이 모두 밋밋해 보여」) ──
   폰은 그대로. 넓은 화면에서만: 바탕에 색 셋(노랑·빨강·파랑)이 겹친 빛 + 타공판 점 + 구역마다 현장 사진을 흐리게 깐 띠 */
@media (min-width:1024px){
  body{background:
      radial-gradient(1100px 620px at 88% -6%,rgba(242,183,5,.30),transparent 62%),
      radial-gradient(820px 560px at -8% 34%,rgba(220,38,38,.08),transparent 60%),
      radial-gradient(1000px 760px at 108% 64%,rgba(37,99,235,.09),transparent 62%),
      radial-gradient(900px 600px at 10% 96%,rgba(242,183,5,.18),transparent 60%),
      #FFFBEA;background-attachment:fixed}
  body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
    background:radial-gradient(circle,rgba(31,41,55,.10) 1.4px,transparent 1.6px) 0 0/26px 26px;
    -webkit-mask:linear-gradient(90deg,#000 0,transparent 22%,transparent 78%,#000 100%);mask:linear-gradient(90deg,#000 0,transparent 22%,transparent 78%,#000 100%)}
  main>section{position:relative;isolation:isolate}
  .hero::before,.wall::before,.cases::before,.ask::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
  .hero::before{background:linear-gradient(115deg,rgba(255,251,234,0) 40%,rgba(242,183,5,.16) 70%,rgba(255,251,234,0) 100%)}
  .wall::before{background:linear-gradient(180deg,rgba(255,246,216,0),#FFF1C4 18%,#FFE9A8 82%,rgba(255,246,216,0)),
      radial-gradient(circle,rgba(150,110,20,.20) 2.2px,transparent 2.6px) 0 0/30px 30px;background-blend-mode:multiply}
  .cases::before{background:url(../img/o22/08528f86-a.jpg) center/cover;filter:blur(38px) saturate(1.2);opacity:.28;inset:40px 0;transform:scale(1.04)}
  .ask::before{background:linear-gradient(180deg,rgba(255,251,234,.0),rgba(255,251,234,.85) 30%),url(../img/o22/8e7e620e-a.jpg) center 30%/cover;filter:blur(28px);opacity:.42}
  .area::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(219,234,254,0),rgba(219,234,254,.55) 40%,rgba(254,243,199,.5) 100%)}
}
/* 11-02 흐린 배경(scale 1.04)이 PC 1440 에서 가로 29px 넘치던 것 막기 */
.cases{overflow-x:clip}

/* ── 11-02 v6 채점 반영: 칸 이름 라벨·날짜 빼기, 카드 = 손님 말 한 줄, 고객 후기(전·후 밀기 + 한 줄), 다니는 곳 평면 한 줄 ── */
.cq{display:block;margin-top:6px;font-size:19px;font-weight:800;line-height:1.38;color:var(--c2);quotes:'“' '”'}
.cc .cm{margin-top:0;font-size:14px}
.pv-s{font-size:20px;font-weight:800}
.voice{padding:72px 0;background:var(--cream)}
.vo-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.vo-tabs{display:flex;gap:8px;margin-top:26px}
.vo-tabs button{font:inherit;font-size:16px;font-weight:800;padding:10px 18px;border-radius:999px;border:2px solid var(--c2);background:#fff;color:var(--c2);cursor:pointer}
.vo-tabs button.on{background:var(--c2);color:#fff}
.vo-c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;align-items:center}
.vo-cmp{position:relative;margin:0;aspect-ratio:4/5;border-radius:22px;overflow:hidden;box-shadow:var(--sh);user-select:none;-webkit-user-select:none}
.vo-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vo-cmp .vb{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vo-cmp .vl{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#fff;pointer-events:none}
.vo-cmp .vl i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px #fff}
.vo-cmp .vt{position:absolute;top:14px;font-size:14px;font-weight:800;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.92);pointer-events:none}
.vo-cmp .t1{left:14px}.vo-cmp .t2{right:14px}
.vo-cmp .vr{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.vo-q{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:22px 22px 22px 6px;padding:24px 26px;box-shadow:var(--sh)}
.vo-q q{display:block;font-size:21px;font-weight:800;line-height:1.5;quotes:'“' '”'}
.vo-q small{display:block;margin-top:14px;font-size:15px;color:var(--mute);font-weight:800}
.js:not(.rm) .vo-q.in{animation:voin .5s var(--ease) both}
@keyframes voin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.area-g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;gap:40px;align-items:center}
.route{display:flex;align-items:center;gap:18px}
.route b{font-size:40px;font-weight:800;color:var(--c2)}
.rt-l{position:relative;flex:1;height:4px;background:repeating-linear-gradient(90deg,var(--c2) 0 14px,transparent 14px 24px);border-radius:2px}
.rt-v{position:absolute;top:50%;left:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--c);display:grid;place-items:center;box-shadow:0 0 0 4px var(--bg)}
.rt-v svg{width:20px;height:20px}
.js:not(.rm) .rt-v{animation:drive 6s ease-in-out infinite alternate}
@keyframes drive{to{left:100%}}
@media (max-width:900px){
  .voice{padding:48px 0}
  .vo-g{grid-template-columns:1fr;gap:20px}
  .vo-c{grid-template-columns:1fr;gap:16px}
  .vo-cmp{aspect-ratio:1/1}
  .vo-q{padding:18px 20px}
  .vo-q q{font-size:17px}
  .area-g2{grid-template-columns:1fr;gap:22px}
  .route b{font-size:28px}
  .cq{font-size:16px}
}
.pv-s{display:block}

/* hero8 */
/* 공방 첫 화면 — 문짝 사진 한 장, 처졌다가 경첩 갈고 「딱」, 제목은 경첩·필름 옆 마스킹테이프 */
.h8 { --wood: #F4E7CF; position: relative; background: var(--wood); padding: 0 0 16px; }
.h8-stage { position: relative; aspect-ratio: 3 / 4; max-height: calc(100svh - 58px - 74px - 150px); margin: 0 auto; overflow: hidden; background: #5a4630; }
.h8-sc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h8-door { transform-box: view-box; transform-origin: 340px 80px; transform: rotate(1.6deg) scale(1.06); }
.h8-af { opacity: 0; }
.h8.s2 .h8-af { opacity: 1; transition: opacity .25s; }
.h8.s2 .h8-door { animation: h8shut .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes h8shut { 0% { transform: rotate(1.6deg) scale(1.06); } 60% { transform: rotate(-.35deg) scale(1.06); } 100% { transform: rotate(0) scale(1.06); } }
.h8-ring { fill: none; stroke: var(--c); stroke-width: 7; stroke-dasharray: 10 9; opacity: 0; }
.h8.s1 .r1 { opacity: 1; animation: h8spin 3s linear infinite; transform-box: fill-box; transform-origin: center; }
.h8.s2 .r1 { opacity: 0; }
.h8.s2 .r2 { opacity: 1; stroke-dasharray: none; transition: opacity .3s .2s; }
@keyframes h8spin { to { transform: rotate(360deg); } }
/* 11-02 v6.2: 제목·필름 카드는 처음부터 보임 — 움직임은 문(경첩 고리·딱)에만 */
.h8-ft { fill: var(--ink); } .h8-fl { font: 800 17px 'Gothic A1', sans-serif; fill: #fff; text-anchor: middle; }
.h8-film > text:last-child { font: 800 19px 'Gothic A1', sans-serif; fill: var(--ink); text-anchor: middle; }
.h8-t { position: absolute; inset: 0; margin: 0; pointer-events: none; font-family: 'Gothic A1', sans-serif; font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.h8-t span { position: absolute; display: inline-flex; align-items: center; gap: 0; color: var(--ink); background: var(--c); padding: 9px 12px 10px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55); white-space: nowrap; }
.h8-t span::before { content: ''; position: absolute; inset: -5px 18px auto auto; width: 34px; height: 12px; background: rgba(255, 255, 255, .55); transform: rotate(6deg); }
.h8-t .k1 { left: 4%; top: 27%; transform: rotate(-2deg); }
.h8-t .k2 { left: 5%; top: 72%; transform: rotate(1.5deg); background: #fff; }
.h8-t i { position: absolute; height: 3px; background: var(--ink); }
.h8-t .k1 i { right: 22px; bottom: 100%; width: 3px; height: 26px; }
.h8-t .k2 i { left: 30%; bottom: 100%; width: 3px; height: 22px; }
.h8-was, .h8-slip { display: none; }
.h8-snap { position: absolute; left: 30%; top: 4%; font: 800 46px 'Gothic A1', sans-serif; color: #fff; text-shadow: 0 3px 12px rgba(0, 0, 0, .45); opacity: 0; transform: scale(.7); }
.h8.s2 .h8-snap { animation: h8snap .9s ease-out forwards; }
@keyframes h8snap { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.h8-copy { padding: 14px 18px 0; }
.h8-line { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.h8-line .nw { display: inline-block; }
.h8-line small { font-size: 13px; font-weight: 400; color: var(--mute); }
.h8-cta { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.h8-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 999px; font-weight: 800; font-size: 16px; text-decoration: none; }
.h8-b svg { width: 18px; height: 18px; }
.h8-b.fill { background: var(--ink); color: var(--c); }
.h8-b.line { background: transparent; color: var(--ink); border: 2px solid rgba(31, 41, 55, .55); }
.rm .h8 .h8-door { transform: scale(1.06); }
@media (min-width: 761px) {
  .h8 { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: minmax(0, 1fr); align-items: center; height: calc(100vh - 64px); min-height: 640px; max-height: 900px; padding: 24px 40px; gap: 0 40px; box-sizing: border-box; background: linear-gradient(90deg, var(--wood) 0 50%, #EADBC0 50%); }
  .h8-stage { grid-column: 2; grid-row: 1; height: 100%; max-height: none; border-radius: 6px; box-shadow: 0 40px 70px -40px rgba(60, 40, 10, .6); }
  .h8-t { font-size: 38px; }
  .h8-was { display: block; position: absolute; left: calc(100% + 40px); top: 40%; width: 240px; margin: 0; padding: 10px 10px 12px; background: #fff; box-shadow: 0 24px 40px -24px rgba(60, 40, 10, .55); transform: rotate(2deg); }
  .h8-was img { width: 100%; height: 280px; object-fit: cover; object-position: 40% 25%; display: block; }
  .h8-was figcaption { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
  .h8-t span { padding: 12px 16px 13px; }
  .h8-stage { overflow: visible; }
  .h8-t .k1 { left: calc(100% + 28px); top: 11%; }
  .h8-t .k1 i { right: 100%; bottom: auto; top: 50%; width: 300px; height: 3px; }
  .h8-t .k2 { left: auto; right: calc(100% + 40px); top: 49%; white-space: normal; width: 250px; }
  .h8-t .k2 i { left: 100%; bottom: auto; top: 50%; width: 62px; height: 3px; }
  .h8-copy { grid-column: 1; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; padding: 0; justify-self: end; width: 360px; }
  .h8-line { font-size: 34px; line-height: 1.25; gap: 14px; margin-bottom: 28px; }
  .h8-slip { display: block; margin: auto 0 0; padding: 18px 20px; list-style: none; background: #FFFDF2; border-left: 6px solid var(--c); box-shadow: 0 18px 30px -22px rgba(60, 40, 10, .5); }
  .h8-slip li { font-size: 15px; line-height: 1.45; color: var(--ink); }
  .h8-slip li + li { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(31, 41, 55, .3); }
  .h8-slip b { display: block; font-size: 13px; color: var(--mute); }
  .h8-line small { font-size: 15px; }
  .h8-cta { grid-template-columns: 1fr; gap: 10px; }
  .h8-b { height: 60px; font-size: 18px; padding: 0 28px; }
  .h8-snap { font-size: 64px; }
  .h8 { overflow-x: clip; }
}
@media (min-width: 761px) and (max-width: 1380px) {
  .h8 { padding: 24px 28px; gap: 0 28px; }
  .h8-copy { width: 100%; max-width: 340px; }
  .h8-t { font-size: 30px; }
  .h8-t .k1 { left: calc(100% + 20px); white-space: normal; width: 190px; }
  .h8-t .k2 { right: calc(100% + 24px); width: 210px; }
  .h8-t .k2 i { width: 44px; }
  .h8-was { left: calc(100% + 28px); width: 200px; }
  .h8-was img { height: 220px; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .h8-was, .h8-slip { display: none; }
  .h8-line { font-size: 26px; }
  .h8-t { font-size: 26px; }
  .h8-t .k1 { width: 150px; }
  .h8-t .k2 { width: 170px; }
  .h8-b { font-size: 15px; padding: 0 14px; white-space: nowrap; }
}
/* /hero8 */

/* 11-02 게시글 본문(블로그 원글 대신) */
.cbody{max-width:720px;margin:36px auto 8px;padding:0 20px;font-size:17px;line-height:1.8;color:var(--ink)}
.cbody p{margin:0}
.cbody p+p{margin-top:14px}
@media (max-width:760px){.cbody{margin-top:24px;font-size:16px}}

/* 11-02 v6.2 약한 곳: 공구 이름 아래 손님이 얻는 것 한 마디 · 폰 own 짧게 · PC 지역 제목 두 줄 */
.tag small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--mute);white-space:nowrap}
.tl.on .tag small{color:#3a2a00}
.area-g2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto}
@media (max-width:760px){
  .tag small{font-size:11px}
  .own{padding:36px 0}
  .own-g{gap:18px}
  .own-p,.fwall .own-p{height:240px;background-position:center 35%}
  .own-q{font-size:17px}
  .note .n-l li:nth-child(n+4){display:none}
}
/* 11-02 출처 정리: 첫 화면 사진이 거여동 현관문(경첩이 아래)·중문 문틀 필름(카드는 위)으로 바뀜 */
.h8-snap{left:56%;top:46%}
.h8-t .k1{top:70%}
.h8-t .k2{top:31%}
.h8-t .k1 i{bottom:100%;top:auto}
@media (min-width:761px){
  .h8-t .k1{top:56%}
  .h8-t .k2{top:13%}
  .h8-was{top:8%}
  .h8-copy{justify-content:flex-end}
  .h8-slip{margin:24px 0 0}
}
.vo-tabs{display:none}

/* 11-02 장식 줄 금지(창재님): 왼쪽 세로줄 대신 바탕·간격 */
.h8-slip{border-left:0 !important;border-radius:10px}

/* 11-02 저녁: 후기 더 — 블로그 「고객님 후기」 문장 그대로(zoro412), 가로로 넘김 */
.vo-more{list-style:none;margin:18px 0 0;padding:0 0 8px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vo-more::-webkit-scrollbar{display:none}
.vo-more li{flex:0 0 260px;scroll-snap-align:start;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 8px 20px -12px rgba(31,41,55,.25);display:flex;flex-direction:column;gap:8px}
.vo-more q{font-size:15px;line-height:1.55;quotes:'“' '”'}
.vo-more small{font-size:12.5px;color:#6B7280;font-weight:700}

/* 재채점(post13) 반영: 후기 띠 — PC 는 세 칸 격자(잘린 카드 없음), 폰은 가로 넘김 + 4줄 접기 */
.vo-more q{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:900px){.vo-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.vo-more li{flex:none}.vo-more li:nth-child(n+7){display:none}}
.vo-wide{grid-column:1/-1}
@media(min-width:900px){.vo-g{grid-template-rows:auto auto}.vo-more.vo-wide{margin-top:26px}.vo-more.vo-wide li{padding:18px 20px}.vo-more.vo-wide q{font-size:16px}}
.vo-more q{display:block;-webkit-line-clamp:unset;overflow:visible}
@media(max-width:899px){.vo-more li:nth-child(n+5){display:none}}

/* ── 11-03 unslop 정리(github.com/heydamir/unslop · CC BY 4.0 · Damir Sokolovsky) — 번진 빛·흐린 사진 바탕·형광펜·계속 도는 고리 걷기, 굵기 600, 알약 모서리 줄이기 ── */
@media (min-width:1024px){body{background:var(--bg)!important;background-image:none!important}body::after{opacity:0!important}main>section::before{opacity:0!important}}
body{background-image:none}
.mark,.hl{background-image:none!important;background-color:transparent!important;color:#8A5F00;padding:0;animation:none}
b,strong,.kick,h2,.btn,.go,.nav a,.callb,.band,h1,.last,.stamp,.who,.typed,.tag,.pv-tag,.pv-m,.pv-f,.q,.n-h,.n-l li,.n-stamp,.o-tag,.o-cap,.cbt,.cm,.cf,.cs i,.lab,.lab small,.iso-cap,.a-cap,.mline,.ask-t .tel,.fname,.foot dt,.flinks a,.tg,.chd,.cnext-h,.fh,.qm,.qq i,.qa-a,.own-q,.cq,.pv-s,.vo-tabs button,.vo-cmp .vt,.vo-q q,.vo-q small,.route b,.h8-fl,.h8-film > text:last-child,.h8-t,.h8-snap,.h8-line,.h8-b,.h8-was figcaption,.vo-more small{font-weight:600}
.band,.o-bf b,.vo-tabs button,.vo-cmp .vt,.h8-b{border-radius:12px}
.bolt,.js:not(.rm) .bgimg,.pin>i::after,.js:not(.rm) .tl:not(.on):not(:hover) .obj,.ping{animation:none!important}
.pin>i::after{opacity:0}
/* 11-03 점검 중 찾은 원래 구멍: 761~1199px(아이패드 세로 등)는 오른쪽 자리가 없어 「처진 문은 경첩만」 쪽지·전 사진이 화면 밖으로 → 이 폭에선 쪽지를 사진 안으로, 전 사진은 숨김 */
@media (min-width:761px) and (max-width:1199px){
  .h8-was{display:none!important}
  .h8-t .k1{left:auto;right:4%;top:6%}
  .h8-t .k1 i{display:none}
  .h8-t .k2{right:auto;left:4%;top:72%;width:auto;max-width:70%}
  .h8-t .k2 i{display:none}
  .h8-t{font-size:28px}
  .h8{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)!important;gap:28px}
  .h8-stage{grid-column:2;width:100%;height:auto!important;max-height:calc(100vh - 120px)!important;justify-self:stretch;overflow:hidden!important}
  .h8-copy{width:auto!important;justify-self:stretch;align-self:center!important;justify-content:center}
  .h8-copy .h8-slip{margin-top:24px}
}


.dw-tape,.tc-tape,.ft-verbs a{font-family:'Black Han Sans','Gothic A1',sans-serif;font-weight:400}
.fd-d,.tc-tel,.wk-n{font-family:'Roboto Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.as-hook{font-size:24px;font-weight:800;line-height:1.4;color:var(--c2);margin:22px 0 22px}
.dw-tape{display:inline-block;background:#1F2937;color:#fff;font-size:15px;letter-spacing:.08em;line-height:1;padding:7px 11px 6px;border-radius:3px;
  text-shadow:0 1px 0 rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.15)}

/* 하는 일: 공구함 서랍 여덟 칸 — 바탕은 합판 결 */
.svc{padding:88px 0 96px;background:#FBF3DC repeating-linear-gradient(0deg,rgba(150,110,40,.07) 0 1px,transparent 1px 7px,rgba(150,110,40,.04) 7px 9px,transparent 9px 23px);border-top:1px solid rgba(31,41,55,.06);border-bottom:1px solid rgba(31,41,55,.06)}
.sv-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.sv-s{font-size:18px;color:var(--mute);font-weight:600}
.fd{margin:34px 0 36px;background:#fff;border:2px solid var(--c2);border-radius:14px;padding:20px 22px;box-shadow:6px 6px 0 var(--c)}
.fd-l{display:block;font-size:16px;font-weight:800;color:var(--c2);margin-bottom:10px}
.fd-box{display:flex;align-items:center;gap:10px;border-bottom:3px solid var(--c);padding:4px 2px 8px}
.fd-box svg{width:22px;height:22px;color:var(--c2)}
.fd-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:20px;font-weight:600;color:var(--ink)}
.fd-c{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fd-c button{border:1.5px solid rgba(31,41,55,.35);background:#FFFBEA;border-radius:6px;padding:6px 12px;font-size:14.5px;font-weight:700;cursor:pointer}
.fd-c button:hover{border-color:var(--c2);background:var(--c)}
.fd-r{margin-top:18px}
.fd-n{font-size:17px}
.fd-list{margin:12px 0 16px;display:grid;gap:6px}
.fd-list li{display:flex;align-items:baseline;gap:12px;font-size:15.5px;padding:8px 0;border-bottom:1px dashed rgba(31,41,55,.2)}
.js:not(.rm) .fd-r .fd-list li{animation:fdin .35s var(--ease) both;animation-delay:calc(var(--i,0)*50ms)}
@keyframes fdin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.fd-d{flex:none;font-size:13.5px;color:var(--mute)}
.fd-t{flex:1;min-width:0}
.fd-list small{flex:none;font-size:13px;color:var(--mute);font-weight:700}
.sv-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px;align-items:start}
.sv-c{--gc:#F2B705;--gt:#111;--tilt:0deg;position:relative;background:#fff;border-radius:6px 6px 14px 14px;box-shadow:0 2px 0 rgba(31,41,55,.12),0 22px 40px -26px rgba(31,41,55,.45);
  transform:rotate(var(--tilt));transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .3s}
.sv-c:nth-child(3n+2){--gc:#1F2937;--gt:#fff}
.sv-c:nth-child(3n){--gc:#B45309;--gt:#fff}
.sv-c:nth-child(4n+1){--tilt:-.6deg}.sv-c:nth-child(4n+2){--tilt:.4deg;margin-top:18px}.sv-c:nth-child(4n+3){--tilt:-.25deg}.sv-c:nth-child(4n){--tilt:.7deg;margin-top:10px}
.sv-c:nth-child(even) .dw-ph{aspect-ratio:4/3}
.sv-c:nth-child(3n+2) .dw-tape{background:var(--c);color:#111;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.sv-c:nth-child(3n) .dw-tape{background:#B45309}
.sv-c:hover{transform:rotate(0) translateY(-8px);box-shadow:0 2px 0 rgba(31,41,55,.12),0 34px 50px -26px rgba(31,41,55,.55)}
.dw-ph{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;border-radius:6px 6px 0 0;background:#2b2216}
.dw-ph img{width:100%;height:100%;object-fit:cover;transition:clip-path .9s var(--ease),transform 1.2s var(--ease)}
.js:not(.rm) .sv-c.sx:not(.sxon) .dw-ph img{clip-path:inset(0 0 100% 0);transform:scale(1.08)}
.js:not(.rm) .sv-c.sx .dw-ph img{transition-delay:calc(var(--i,0)*70ms)}
.dw-f{position:relative;padding:26px 20px 20px;border-top:4px solid var(--gc)}
.dw-f::before{content:"";position:absolute;left:50%;top:9px;width:58px;height:7px;margin-left:-29px;border-radius:4px;background:linear-gradient(180deg,#d9dde3,#8b929c);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.js:not(.rm) .sv-c.sx:not(.sxon) .dw-f{transform:translateY(18px)}
.dw-f{transition:transform .7s var(--ease)}
.dw-f .dw-tape{position:absolute;left:16px;top:-15px;transform:rotate(-2deg)}
.sv-c:nth-child(odd) .dw-f .dw-tape{transform:rotate(1.5deg)}
.sv-c h3{font-size:21px;line-height:1.3;font-weight:800;margin:6px 0 12px;color:var(--c2)}
.sv-i{display:flex;flex-wrap:wrap;gap:6px}
.sv-i button{border:1.5px solid var(--gc);background:#fff;color:var(--ink);border-radius:5px;padding:5px 9px;font-size:14px;font-weight:700;line-height:1.35;cursor:pointer;text-align:left;transition:background-color .2s,transform .2s}
.sv-i button:first-child{background:var(--gc);color:var(--gt)}
.sv-i button:hover,.sv-i button.on{background:var(--gc);color:var(--gt);transform:translateY(-1px)}
.sv-more{display:inline-block;margin-top:14px;font-size:15px;font-weight:800;color:var(--c2);text-decoration:none;border-bottom:3px solid var(--gc)}
.sv-c.hit{transform:rotate(0) translateY(-10px);box-shadow:0 0 0 3px var(--c),0 34px 50px -26px rgba(31,41,55,.55)}
.sv-c.dim{opacity:.38}
@media (max-width:1180px){.sv-g{grid-template-columns:repeat(2,minmax(0,1fr))}.sv-c:nth-child(n){margin-top:0}}
@media (max-width:640px){
  .svc{padding:48px 0 56px}
  .fd{padding:16px;box-shadow:4px 4px 0 var(--c)}
  .fd-box input{font-size:17px}
  .sv-g{grid-template-columns:1fr;gap:28px}
  .sv-c .dw-ph,.sv-c:nth-child(even) .dw-ph{aspect-ratio:16/9}
  .sv-c h3{font-size:19px}
  .as-hook{font-size:19px}
}

/* 큰 제목: 라벨기 글자 찍힘 */
.js:not(.rm) .egw .eg{display:inline-block;opacity:0;transform:translateY(-.28em) scale(1.35);filter:blur(1px)}
.js:not(.rm) .egw.egon .eg{animation:punch .32s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--i)*32ms)}
@keyframes punch{to{opacity:1;transform:none;filter:none}}

/* 바닥: 타공판 + 고리에 걸린 꼬리표 명함 */
.foot.ft22{padding:64px 0 110px;margin-top:0;background-color:#F1ECDF;background-image:radial-gradient(circle,rgba(31,41,55,.13) 2px,transparent 2.4px);background-size:28px 28px;border-top:6px solid var(--c);color:var(--ink);font-size:15px}
.ft-g{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px 72px;align-items:center;max-width:1100px}
.ft-logo{display:flex;align-items:center;gap:10px;font-size:20px}
.ft-big{margin:20px 0 18px;font-size:46px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--c2)}
.ft-big span{display:block}
.ft-big em{font-style:normal;color:#111;background:var(--c);padding:0 .12em;border-radius:4px}
.ft-verbs{display:flex;flex-wrap:wrap;gap:8px}
.ft-verbs a{font-size:19px;letter-spacing:.1em;text-decoration:none;color:#fff;background:#1F2937;padding:7px 12px 6px;border-radius:3px;text-shadow:0 1px 0 rgba(255,255,255,.16);transition:background-color .3s,color .3s,transform .3s}
.ft-verbs a.on,.ft-verbs a:hover{background:var(--c);color:#111;text-shadow:none;transform:translateY(-3px)}
.ft-side{display:flex;justify-content:center}
.tagcard{position:relative;width:340px;max-width:100%;padding-top:58px;transform-origin:50% 0}
.tc-str{position:absolute;left:50%;top:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e5e7eb,#6b7280);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.tc-str::after{content:"";position:absolute;left:7px;top:12px;width:2px;height:52px;background:#7c5a2a;transform:rotate(-4deg);transform-origin:top}
.tc-body{position:relative;background:var(--c);color:#111;padding:38px 26px 22px;clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);border-radius:0 0 10px 10px;filter:drop-shadow(0 18px 18px rgba(60,40,10,.25))}
.tc-hole{position:absolute;left:50%;top:12px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#F1ECDF;box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.tc-top{display:flex;align-items:center;gap:8px;font-size:18px;justify-content:center}
.tc-top .lg-i{width:26px;height:26px}
.tc-tape{display:block;width:max-content;margin:14px auto 12px;background:#1F2937;color:#fff;font-size:22px;letter-spacing:.14em;padding:8px 14px 6px;border-radius:3px;transform:rotate(-1.5deg);text-shadow:0 1px 0 rgba(255,255,255,.16)}
.tc-tape small{font-size:14px;letter-spacing:.1em;opacity:.85;margin-right:4px}
.tc-tel{display:flex;align-items:center;justify-content:center;gap:8px;font-size:25px;font-weight:700;color:#111;text-decoration:none;letter-spacing:.01em}
.tc-tel svg{width:20px;height:20px}
.tc-meta{text-align:center;margin:8px 0 16px;font-size:14px;line-height:1.55;color:#3a2a00;font-weight:600}
.tc-act{display:grid;grid-template-columns:1.5fr 1fr;gap:8px}
.tc-save,.tc-sms{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:8px;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer}
.tc-save{border:0;background:#1F2937;color:#fff}
.tc-save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tc-save.ok{background:#fff;color:#111}
.tc-sms{background:#fff;color:#111;border:2px solid #1F2937}
.tc-sms svg{width:18px;height:18px}
.js:not(.rm) .tagcard.swing{animation:swing 2.4s cubic-bezier(.36,.07,.19,.97) both}
@keyframes swing{0%{transform:rotate(9deg)}22%{transform:rotate(-6deg)}44%{transform:rotate(3.5deg)}66%{transform:rotate(-1.8deg)}84%{transform:rotate(.8deg)}100%{transform:rotate(0)}}
.ft-low{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 40px;max-width:1100px;margin-top:48px;padding-top:22px;border-top:1px dashed rgba(31,41,55,.25)}
.ft-low .flinks{flex-wrap:wrap;gap:8px 20px}
.ft-low dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-size:13.5px;color:var(--mute)}
.ft-low dt{font-weight:800}
.ft-low dd{margin:0}
.ft-low .sample-note{flex-basis:100%;font-size:12.5px;color:var(--mute)}
@media (max-width:900px){
  .foot.ft22{padding:44px 0 104px}
  .ft-g{grid-template-columns:1fr;gap:28px}
  .ft-brand{text-align:center}
  .ft-logo,.ft-verbs{justify-content:center}
  .ft-big{font-size:34px}
  .ft-low{justify-content:center;text-align:left}
}

/* 상세 쪽 · 자주 묻는 질문 */
.wkp main section{padding:56px 0}
.wk-hero{padding:48px 0 40px!important;background:#FBF3DC repeating-linear-gradient(0deg,rgba(150,110,40,.07) 0 1px,transparent 1px 7px,rgba(150,110,40,.04) 7px 9px,transparent 9px 23px)}
.wk-hg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
.wk-k{font-size:14.5px;color:var(--mute);font-weight:700}
.wk-k a{color:inherit}
.wk-t h1{margin:18px 0 16px;font-size:50px;line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--c2)}
.wk-t h1 .dw-tape{display:table;margin-bottom:14px;font-size:16px;transform:rotate(-2deg)}
.wk-s{font-size:19px;color:var(--ink);margin-bottom:26px;max-width:34em}
.wkp .cta,.wk-ask2 .cta{display:flex;flex-wrap:wrap;gap:12px}
.wk-ph{margin:0;border-radius:8px;overflow:hidden;box-shadow:var(--sh);transform:rotate(1deg);border:8px solid #fff}
.wk-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.wkp h2,.wk-ask2 .as-hook{font-size:34px;margin-bottom:22px}
.wk-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.wk-l li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;border-bottom:2px solid rgba(31,41,55,.1);font-size:18px}
.wk-ask{flex:none;border:1.5px solid var(--c2);background:#fff;border-radius:6px;padding:7px 12px;font-size:14.5px;font-weight:800;cursor:pointer}
.wk-ask:hover,.wk-ask.on{background:var(--c)}
.wk-posts{background:#fff}
.wk-n{font-size:15px;color:var(--mute);margin:-10px 0 8px}
.wk-q{border-bottom:1px solid rgba(31,41,55,.14);padding:4px 0}
.wk-q summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font-size:18.5px;font-weight:800;position:relative}
.wk-q summary::-webkit-details-marker{display:none}
.wk-q summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:26px;font-weight:400;color:var(--mute)}
.wk-q[open] summary::after{content:"−"}
.wk-q p{padding:0 0 16px;font-size:17px;line-height:1.7;color:#374151;max-width:46em}
.wk-more{margin-top:22px}
.wk-oth{background:#F1ECDF}
.wk-ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.wk-ol a{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 18px;background:#fff;border-radius:8px;text-decoration:none;font-weight:800;font-size:17px;box-shadow:0 10px 22px -16px rgba(31,41,55,.45);transition:transform .25s var(--ease)}
.wk-ol a:nth-child(odd){transform:rotate(-.5deg)}
.wk-ol a:hover{transform:translateY(-4px)}
.wk-ol .dw-tape{font-size:13px}
.wk-ask2{text-align:center;background:var(--c)}
.wk-ask2 .as-hook{color:#111}
.wk-ask2 .cta{justify-content:center}
.wk-ask2 .btn.fill{background:#1F2937;color:#fff}
.fpage .fg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:30px;margin:44px 0 10px}
.fpage .fg .dw-tape{font-size:14px}
.qa2 .sv-more{border-bottom-color:var(--c)}
@media (max-width:900px){
  .wk-hg{grid-template-columns:1fr;gap:26px}
  .wk-t h1{font-size:34px}
  .wk-s{font-size:16.5px}
  .wkp h2,.wk-ask2 .as-hook{font-size:25px}
  .wk-l{grid-template-columns:1fr}
  .wk-l li{font-size:16px}
  .wkp main section{padding:40px 0}
  .fpage .fg{font-size:23px}
  .wk-q summary{font-size:16.5px}
}

/* 11-03 같은 꼴 카드 줄 변주(H1): 쪽지 줄·현장 넘기기·후기 카드 — 장마다 기울기·종이색이 조금씩 다르게 */
.n-l li:nth-child(even){transform:translateX(6px) rotate(-.4deg)}
.n-l li:nth-child(3n){transform:rotate(.5deg)}
.rail .cc:nth-child(3n+1){transform:rotate(-.6deg)}
.rail .cc:nth-child(3n+2){transform:translateY(10px) rotate(.4deg)}
.rail .cc:nth-child(4n) .ci{border-radius:4px 22px 4px 4px}
.vo-more li:nth-child(3n+1){transform:rotate(-.5deg)}
.vo-more li:nth-child(3n+2){background:#FFF6D8;transform:translateY(6px) rotate(.4deg)}
.vo-more li:nth-child(3n){background:#F3F4F6;border-radius:14px 14px 14px 4px}
.wk-tape{display:table;margin:18px 0 -4px;font-size:16px;transform:rotate(-2deg)}
.fgh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:44px 0 10px}
.fgh .fg{margin:0}
/* 11-03 현장 쪽 1024 폭에서 「같은 손, 다른 날」 세 장이 가로로 넘치던 것 */
.cnext .rc{min-width:0}
@media (min-width:901px) and (max-width:1180px){.cg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}.cnext{flex-direction:column}}
.egword{display:inline-block;white-space:nowrap}