:root{
  --bg:#FBF8F3; --surface:#FFFFFF; --panel:#F3EBDF; --border:#E9E1D4; --border-strong:#CDBFAA; --soft:#A08E7B;
  --text:#2A1D12; --muted:#6B5B4C; --primary:#8C5A2D; --on-primary:#FFFFFF; --blush:#EBA6A2;
  --stitch:rgba(140,90,45,0.38); --dot:rgba(140,90,45,0.13);
  --deep:#2A1D12; --on-deep:#FBF8F3; --on-deep-muted:#CDBFAA; --on-deep-stitch:rgba(226,185,143,0.45); --on-deep-accent:#E2B98F;
  --head:'Noto Sans KR','Inter',sans-serif; --head-w:700; --head-ls:-0.035em;
  --h1-max:83px; --h2-max:48.5px; --cta-max:56px; --mq:21.5px; --quote:19px;
}
html[lang="en"]{--head:'Inter','Noto Sans KR',sans-serif; --head-w:700; --head-ls:-0.03em; --h1-max:93.5px; --h2-max:61px; --cta-max:72px; --mq:25px; --quote:23.5px}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; font-family:'Inter','Noto Sans KR',system-ui,sans-serif; color:var(--text); background-color:var(--bg); word-break:keep-all; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.serif-i{font-family:'Inter','Noto Sans KR',sans-serif; font-style:normal; font-weight:700}

/* nav */
.nav-wrap{position:sticky; top:0; z-index:20; padding:14px 16px 0}
.nav{max-width:1200px; margin:0 auto; padding:8px 8px 8px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  background:rgba(255,255,255,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:999px; box-shadow:0 6px 24px rgba(42,29,18,0.06)}
.logo img{height:34px; width:auto; display:block}
.nav-links{display:flex; flex-wrap:wrap; align-items:center; gap:24px; font-size:12.5px; font-weight:500; line-height:20px; font-family:'Noto Sans KR','Inter',sans-serif}
.nav-links a:hover,.footer-r a:hover{opacity:.65}
.nav-right{display:flex; align-items:center; gap:8px}
.lang{display:flex; padding:3px; border-radius:999px; border:1px solid var(--border); background:var(--surface)}
.lang button{font:600 11px/1 'Inter',sans-serif; letter-spacing:.06em; padding:9px 12px; border:0; border-radius:999px; cursor:pointer; background:transparent; color:var(--muted); transition:background .2s,color .2s}
.lang button[aria-pressed="true"]{background:var(--text); color:var(--bg)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; font-size:13.5px; padding:16px 24px; border-radius:999px; transition:transform .25s, box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(3px)}
.btn-sm{font-size:12.5px; padding:12px 18px; gap:8px}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-ghost{border:1px solid var(--border-strong); background:var(--surface); padding:15px 22px}
.btn-white{background:#fff; color:var(--text); padding:17px 22px}
.btn-outline-w{border:1px solid rgba(255,255,255,0.5); color:#fff; padding:16px 22px}
.puffy{box-shadow:0 5px 0 rgba(74,45,20,0.28), 0 12px 24px rgba(140,90,45,0.18)}
.puffy:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(74,45,20,0.28)}
.btn-row{display:flex; flex-wrap:wrap; gap:10px}

/* hero */
.hero{padding-top:72px}
.hero-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px 48px}
.hero-left{flex:1 1 560px; min-width:0}
.hero-right{flex:1 1 320px; max-width:400px; display:flex; flex-direction:column; gap:22px; padding-bottom:10px}
.badge{display:inline-flex; align-items:center; gap:10px; font-size:11.5px; font-weight:500; color:var(--muted); margin-bottom:26px; padding:8px 14px; border-radius:999px; background:var(--surface); outline:1.5px dashed var(--stitch); outline-offset:-5px}
.h1{margin:0; font-family:var(--head); font-weight:var(--head-w); font-size:clamp(39.5px,6vw,var(--h1-max)); line-height:1.04; letter-spacing:var(--head-ls)}
.brand-word{position:relative; display:inline-block; font-family:'Inter','Noto Sans KR',sans-serif; font-style:normal; font-weight:700; letter-spacing:-0.01em; color:var(--primary)}
.brand-word svg{position:absolute; left:2%; bottom:-0.08em; width:96%; height:.2em}
.lead{margin:0; font-size:15.5px; line-height:1.75; color:var(--muted)}
.bento{margin-top:56px; display:flex; flex-wrap:wrap; gap:14px}
.bento-side{flex:1 1 280px; display:flex; flex-direction:column; gap:14px}
.tile{position:relative; border-radius:28px; overflow:hidden; background:var(--panel)}
.tile>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.tile-big{flex:2 1 520px; aspect-ratio:4/3; outline:1.5px dashed rgba(255,255,255,0.75); outline-offset:-12px}
.tile-sm{flex:1 1 220px; min-height:220px; outline:1.5px dashed rgba(42,29,18,0.22); outline-offset:-10px}
.pill{position:absolute; left:20px; bottom:20px; background:rgba(251,248,243,0.92); backdrop-filter:blur(8px); color:var(--text); font-size:11.5px; font-weight:600; padding:8px 13px; border-radius:999px}
.pill .n{margin-right:6px}
.tile-big .pill{left:24px; bottom:24px}
.spin-badge{position:absolute; right:22px; bottom:22px; width:118px; height:118px; border-radius:999px; background:var(--bg); box-shadow:0 10px 24px rgba(42,29,18,0.18); display:flex; align-items:center; justify-content:center}
.spin-badge .spin{position:absolute; inset:0; width:118px; height:118px}
.madeby{position:absolute; right:26px; top:26px; background:var(--bg); padding:12px 16px 11px; border-radius:6px; box-shadow:0 8px 20px rgba(42,29,18,0.18); outline:1.5px dashed #B89A7A; outline-offset:-5px; text-align:center}
.madeby-b{font-size:10px; font-weight:700; letter-spacing:.22em; margin-top:4px}
.facts{margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.fact{background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:24px 26px; display:flex; align-items:baseline; gap:14px}
.fact-big{font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:39.5px; line-height:1; color:var(--primary); white-space:nowrap}
.fact-t{font-size:12.5px; line-height:1.5; color:var(--muted)}
.stitch{outline:1.5px dashed var(--stitch); outline-offset:-8px}

/* marquee */
.trusted{padding-top:96px}
.trusted-head{display:flex; align-items:center; gap:14px; font-size:11.5px; color:var(--muted); margin-bottom:22px}
.trusted-head .serif-i{color:var(--text)}
.dash-line{flex:1; border-top:1.5px dashed var(--stitch)}
.marquee{overflow:hidden; border-top:1.5px dashed var(--stitch); border-bottom:1.5px dashed var(--stitch); background:var(--surface);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex; width:max-content; padding:26px 0; animation:marquee 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.mq-item{display:inline-flex; align-items:center; gap:36px; padding-right:36px; font-family:var(--head); font-size:var(--mq); font-weight:var(--head-w); letter-spacing:-0.02em; white-space:nowrap}

/* sections */
.sec{padding-top:140px}
.sec-last{padding-bottom:100px}
.sec-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 24px; margin-bottom:32px}
.eyebrow{font-family:'Inter','Noto Sans KR',sans-serif; font-style:normal; font-weight:600; font-size:20px; color:var(--primary); margin-bottom:10px}
.h2{margin:0; font-family:var(--head); font-weight:var(--head-w); font-size:clamp(30.5px,4vw,var(--h2-max)); letter-spacing:var(--head-ls); line-height:1.1}
.sec-sub{margin:0; color:var(--muted); font-size:13.5px; line-height:1.7; max-width:380px}

/* portfolio */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:600 12.5px/1 inherit; font-family:inherit; padding:12px 16px; border-radius:999px; cursor:pointer; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); transition:background .2s,color .2s,border-color .2s}
.chip .cnt{opacity:.6; font-weight:500}
.chip.on{background:var(--text); color:var(--bg); border-color:var(--text)}
.cases{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px 18px}
.case{display:flex; flex-direction:column; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:28px; padding:10px 10px 18px}
.case[hidden]{display:none}
.case-img{position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:20px; background:var(--panel)}
.case-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.hover-tag{position:absolute; right:14px; top:14px; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); color:var(--text); font-size:11px; font-weight:600; padding:6px 11px; border-radius:999px}
.case-body{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:0 10px}
.case-t{margin:0 0 6px; font-size:16px; font-weight:600; letter-spacing:-0.015em}
.case-d{margin:0; font-size:12.5px; color:var(--muted); line-height:1.55}
.client-chip{flex:none; font-size:11px; font-weight:600; padding:6px 10px; border-radius:999px; background:var(--panel); outline:1px dashed var(--stitch); outline-offset:-4px; white-space:nowrap}

/* original */
.deep{background:var(--deep); color:var(--on-deep); border-radius:36px; padding:clamp(32px,5vw,64px); outline:1.5px dashed var(--on-deep-stitch); outline-offset:-14px}
.deep .sec-head>div{flex:1 1 440px; min-width:0}
.eyebrow-deep{color:var(--on-deep-accent)}
.deep-p{margin:16px 0 0; color:var(--on-deep-muted); font-size:14.5px; line-height:1.75; max-width:540px}
.deep-chip{font-size:12.5px; color:var(--on-deep-muted); border:1px dashed var(--on-deep-stitch); padding:9px 14px; border-radius:999px}
.lineup{border-radius:24px; overflow:hidden; aspect-ratio:2/1; background:#fff; margin-bottom:14px}
.lineup img{width:100%; height:100%; object-fit:cover; display:block}
.ips{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.ip{display:flex; flex-direction:column; gap:10px}
.ip-img{aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:#fff}
.ip-img img{width:100%; height:100%; object-fit:cover; display:block}
.ip-name{font-size:13.5px; font-weight:600; text-align:center}

/* items + faq box */
.box{background:var(--surface); border:1px solid var(--border); border-radius:28px; padding:8px 28px}
.stitch-in{outline:1.5px dashed var(--stitch); outline-offset:-10px}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:22px 4px; border-bottom:1.5px dashed var(--border); transition:padding .25s}
.row:last-child{border-bottom:0}
.row:hover{padding-left:14px}
.row-no{font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:20px; color:var(--soft); width:34px}
.row-name{flex:1 1 240px; font-size:17px; font-weight:600; letter-spacing:-0.015em}
.row-note{flex:1 1 240px; font-size:12.5px; color:var(--muted)}
.row-tags{display:flex; gap:6px}
.tag-fill,.tag-line{font-size:11.5px; padding:7px 12px; border-radius:999px; white-space:nowrap}
.tag-fill{font-weight:600; background:var(--panel)}
.tag-line{font-weight:500; border:1px solid var(--border)}

/* behind */
.behind{display:flex; flex-wrap:wrap; gap:14px}
.tile-tall{flex:1 1 300px; min-height:420px}
.behind-right{flex:2 1 520px; display:flex; flex-direction:column; gap:14px}
.tile-wide{aspect-ratio:2/1}
.behind-row{display:flex; flex-wrap:wrap; gap:14px; flex:1}
.behind .tile-sm{outline:none}
.polaroid{position:absolute; z-index:2; width:146px; background:#fff; padding:8px 8px 10px; border-radius:6px; box-shadow:0 14px 28px rgba(42,29,18,0.24)}
.polaroid img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:3px}
.tape{position:absolute; top:-10px; left:50%; width:56px; height:20px; margin-left:-28px; transform:rotate(-5deg)}
.pol-cap{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:14.5px; line-height:1}
.pol-tag{font-size:9px; font-weight:600; letter-spacing:.14em; color:#8A7A6A; margin-top:3px}

/* records */
.records{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.record{margin:0; background:var(--surface); border:1px solid var(--border); border-radius:28px; padding:30px 28px 26px; display:flex; flex-direction:column; justify-content:space-between; gap:30px; min-height:280px; outline:1.5px dashed var(--stitch); outline-offset:-9px}
.record-deep{background:var(--deep); color:var(--on-deep); border-color:var(--deep); outline-color:var(--on-deep-stitch)}
.record-top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.record-chip{font-size:11px; font-weight:600; padding:6px 11px; border-radius:999px; border:1px dashed var(--stitch)}
.record-deep .record-chip{border-color:var(--on-deep-stitch)}
.record-q{margin:20px 0 0; font-family:var(--head); font-weight:var(--head-w); font-size:var(--quote); line-height:1.5; letter-spacing:-0.01em}
.record-by{display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600}
.by-line{width:22px; border-top:1.5px solid currentColor; opacity:.5}

/* why + steps */
.whys{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px}
.why{background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:28px 26px 30px; display:flex; flex-direction:column; gap:44px; outline-offset:-9px}
.why-no{font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:43px; line-height:1; color:var(--primary)}
.why-t{margin:0 0 10px; font-size:16px; font-weight:600; line-height:1.4; letter-spacing:-0.015em}
.why-d{margin:0; font-size:12.5px; color:var(--muted); line-height:1.65}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}
.step{border-radius:22px; padding:24px 24px 26px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; gap:26px; min-height:150px; outline:1.5px dashed var(--stitch); outline-offset:-8px}
.step-last{background:var(--primary); color:var(--on-primary); border-color:var(--primary); outline-color:rgba(255,255,255,0.45)}
.step-top{display:flex; justify-content:space-between; align-items:center}
.step-no{font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; font-size:27px; line-height:1}
.step-tag{font-size:11px; font-weight:600; opacity:.7}
.step-t{margin:0 0 8px; font-size:15.5px; font-weight:600}
.step-d{margin:0; font-size:12.5px; line-height:1.6; opacity:.78}

/* faq */
.faq{border-bottom:1.5px dashed var(--border)}
.faq:last-child{border-bottom:0}
.faq summary{list-style:none; cursor:pointer; padding:24px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:15.5px; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq-sign{flex:none; width:34px; height:34px; border-radius:999px; border:1px solid var(--border-strong); position:relative; transition:background .2s}
.faq-sign::before,.faq-sign::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:currentColor; transform:translate(-50%,-50%)}
.faq-sign::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .25s}
.faq[open] .faq-sign{background:var(--text); color:var(--bg); border-color:var(--text)}
.faq[open] .faq-sign::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq p{margin:0; padding:0 56px 26px 4px; font-size:13.5px; line-height:1.8; color:var(--muted)}

/* cta */
.cta{position:relative; overflow:hidden; background:var(--primary); color:var(--on-primary); border-radius:36px; padding:clamp(44px,7vw,96px) clamp(28px,5vw,72px); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:36px; outline:1.5px dashed rgba(255,255,255,0.45); outline-offset:-14px}
.blob{position:absolute; border-radius:999px; background:var(--blush)}
.b1{right:-60px; top:-90px; width:300px; height:300px; opacity:.22}
.b2{right:190px; bottom:-70px; width:160px; height:160px; opacity:.16}
.cta-left{position:relative; flex:1 1 440px; min-width:0}
.cta-eye{font-size:21.5px; opacity:.85; margin-bottom:12px}
.cta-h{font-size:clamp(32.5px,4.5vw,var(--cta-max)); line-height:1.05; margin-bottom:16px}
.cta-p{margin:0; font-size:14.5px; line-height:1.75; opacity:.88; max-width:480px}
.cta-right{position:relative; display:flex; flex-direction:column; gap:10px; min-width:240px}
.cta-mail{font-size:12.5px; opacity:.8; text-align:center; margin-top:4px}

/* footer */
.footer{padding-bottom:40px}
.footer-in{border-top:1.5px dashed var(--stitch); padding-top:32px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; font-size:12.5px; color:var(--muted)}
.footer-l{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.footer-l img{height:30px; width:auto}
.footer-r{display:flex; flex-wrap:wrap; gap:22px}

/* motion */
.zoom img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.zoom:hover>img{transform:scale(1.05)}
.flip .back{opacity:0; transition:opacity .4s}
.flip:hover .back{opacity:1}
.card{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover{animation:wiggle .5s ease-in-out; transform:translateY(-4px)}
@keyframes wiggle{0%,100%{transform:translateY(-4px) rotate(0)}30%{transform:translateY(-4px) rotate(-1.2deg)}70%{transform:translateY(-4px) rotate(1.2deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 18s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(-3deg)}}.bob{animation:bob 4s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}.rise2{animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both}.rise3{animation:rise .9s .24s cubic-bezier(.2,.7,.2,1) both}

/* dangling charm cursor */
.charm{position:fixed; left:0; top:0; z-index:50; pointer-events:none; opacity:0; transition:opacity .3s; will-change:transform}
.charm.on{opacity:1}
.charm-swing{transform-origin:9px 6px; will-change:transform}
.charm-swing svg{display:block}
.charm-swing img{display:block; width:62px; height:auto; margin:-3px 0 0 -22px; filter:drop-shadow(0 8px 10px rgba(42,29,18,0.25))}

@media (max-width:760px){
  .nav-links{display:none}
  .nav{padding-left:14px}
  .hero{padding-top:44px}
  .sec{padding-top:96px}
  .cases{grid-template-columns:1fr}
  .tile-tall{min-height:340px}
  .polaroid{width:118px}
  .spin-badge{transform:scale(.8); right:12px; bottom:12px}
  .faq p{padding-right:4px}
}
@media (prefers-reduced-motion:reduce){
  .track,.spin,.bob,.rise,.rise2,.rise3{animation:none}
  .card:hover{animation:none}
  html{scroll-behavior:auto}
}

/* Mail chooser */
.mailpick{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(42,29,18,0.45)}
.mailpick[hidden]{display:none}
.mailpick-card{position:relative; width:100%; max-width:360px; background:var(--surface); color:var(--text); border-radius:20px; padding:28px 22px 18px; box-shadow:0 20px 60px rgba(42,29,18,0.25); display:flex; flex-direction:column; gap:10px}
.mailpick-title{margin:0; font-weight:700; font-size:16px}
.mailpick-addr{margin:0 0 6px; color:var(--muted); font-size:12.5px}
.mailpick-btn{display:block; width:100%; text-align:center; padding:13px 16px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-family:inherit; font-size:13.5px; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer}
.mailpick-btn:hover{background:var(--panel)}
.mailpick-btn[data-act="gmail"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.mailpick-x{position:absolute; top:8px; right:12px; border:0; background:none; font-size:23.5px; line-height:1; color:var(--muted); cursor:pointer; padding:6px}
.mailpick-tip{margin:2px 0 0; min-height:18px; font-size:11.5px; color:var(--primary); text-align:center}

/* Inquiry form */
.iq{padding:28px}
.iq-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.iq-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px}
.iq-f{display:flex; flex-direction:column; gap:7px; min-width:0}
.iq-wide{grid-column:1 / -1}
.iq-l{font-size:12.5px; font-weight:600; color:var(--text)}
.iq-req{color:var(--primary); font-weight:700}
.iq input:not([type=file]),.iq textarea{width:100%; font:inherit; font-size:13.5px; color:var(--text); background:var(--bg); border:1px solid var(--border-strong); border-radius:14px; padding:13px 14px; outline:none; transition:border-color .2s, box-shadow .2s}
.iq textarea{resize:vertical; min-height:120px}
.iq input:focus,.iq textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(140,90,45,0.15)}
.iq input[type=file]{font:inherit; font-size:12.5px; color:var(--muted)}
.iq-foot{margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.iq-send{border:0; cursor:pointer; font-family:inherit}
.iq-send:disabled{opacity:.6; cursor:wait}
.iq-msg{margin:0; font-size:12.5px; color:var(--muted)}
.iq-msg.ok{color:#2F7A3E; font-weight:600}
.iq-msg.err{color:#B3261E; font-weight:600}
@media (max-width:640px){ .iq{padding:20px 16px} .iq-grid{grid-template-columns:1fr} }

/* hero title: two lines */
.h1{font-size:clamp(23.5px,6vw,41.5px); line-height:1.22}
.h1-line{white-space:nowrap; color:var(--primary)}

/* New items */
.nw-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.nw-card{position:relative; display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:24px 22px 20px; transition:transform .3s, box-shadow .3s}
.nw-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(42,29,18,0.08)}
.nw-ic{width:56px; height:56px; border-radius:16px; background:var(--panel); color:var(--primary); display:flex; align-items:center; justify-content:center}
.nw-ic svg{width:34px; height:34px}
.nw-tag{position:absolute; top:20px; right:20px; font:700 10px/1 'Inter',sans-serif; letter-spacing:.08em; color:var(--on-primary); background:var(--blush); padding:6px 9px; border-radius:999px}
.nw-tag-sm{position:static; display:inline-block; vertical-align:middle; margin-left:6px; font-size:9px; padding:5px 8px}
.nw-t{margin:6px 0 0; font-size:17px; font-weight:700; letter-spacing:-0.02em}
.nw-d{margin:0; flex:1; font-size:12.5px; line-height:1.65; color:var(--muted)}
.nw-ask{margin-top:6px; font-size:12.5px; font-weight:600; color:var(--primary)}
.nw-ask:hover{opacity:.7}
@media (max-width:960px){ .nw-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .nw-grid{grid-template-columns:1fr} }

/* Hero portfolio grid + item chips */
.pgal{margin-top:48px}
.pg-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.pg-tile{position:relative; aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:var(--panel)}
.pg-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.pg-chips{margin-top:18px; display:flex; flex-wrap:wrap; gap:10px}
.pg-chip{display:inline-flex; align-items:center; padding:11px 20px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); font-size:12.5px; font-weight:600; color:var(--text); transition:background .2s, color .2s, border-color .2s}
.pg-chip:hover{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
@media (max-width:960px){ .pg-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .pg-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} .pg-tile{border-radius:14px} .pg-chip{padding:9px 15px; font-size:11.5px} }

.h2{font-size:clamp(23.5px,3vw,34px)}
.hero{padding-top:28px}

/* Production flow (10 steps) */
.flow{grid-template-columns:repeat(5,minmax(0,1fr)); row-gap:14px}
.flow .step{min-height:170px; gap:18px}
.flow .step-tag{display:none}
.flow-bar{position:relative; height:30px; margin:10px 0 2px; border-bottom:1.5px solid var(--text); display:flex; justify-content:center; align-items:flex-start}
.flow-bar::after{content:""; position:absolute; right:-1px; bottom:-5px; width:8px; height:8px; border-top:1.5px solid var(--text); border-right:1.5px solid var(--text); transform:rotate(45deg)}
.flow-bar span{font-size:11.5px; font-weight:700; color:var(--text)}
.flow-note{margin:16px 0 0; text-align:right; font-size:11.5px; color:var(--muted)}
@media (max-width:1000px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-bar{display:none}
  .flow .step-tag{display:inline}
}
@media (max-width:560px){ .flow{grid-template-columns:1fr} .flow .step{min-height:0} .flow-note{text-align:left} }

/* Portfolio carousel */
.pf-car{position:relative}
.pf-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 2px 8px}
.pf-track::-webkit-scrollbar{display:none}
.pf-track .case{flex:0 0 calc((100% - 32px)/3); scroll-snap-align:start; padding:10px}
.pf-nav{position:absolute; top:50%; z-index:2; width:46px; height:46px; margin-top:-23px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(42,29,18,0.12); transition:opacity .2s}
.pf-prev{left:-14px} .pf-next{right:-14px}
.pf-nav[disabled]{opacity:0; pointer-events:none}
@media (max-width:960px){ .pf-track .case{flex-basis:calc((100% - 16px)/2)} }
@media (max-width:560px){ .pf-track .case{flex-basis:84%} .pf-nav{display:none} }

/* Trusted (moved below CTA) */
.trusted{padding-top:72px}
.trusted-t{font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap}
.mq-item{font-size:15.5px}
html[lang="en"] .mq-item{font-size:15.5px}

/* Quick inquiry icon button */
.btn-ask{justify-content:center; gap:8px}
.btn-ask svg{flex:none}

body{font-size:14.4px}

/* tighter section spacing */
.sec{padding-top:84px}
.hero + .sec{padding-top:64px}
@media (max-width:760px){ .sec{padding-top:60px} .hero + .sec{padding-top:48px} }

/* Portfolio = hero grid: big, 2 rows, swipe sideways */
.pgal{margin-top:40px}
.pg-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px}
.pg-title{margin:0}
.pg-arrows{display:flex; gap:8px}
.pf-nav-s{width:42px; height:42px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .2s, background .2s}
.pf-nav-s:hover{background:var(--panel)}
.pf-nav-s[disabled]{opacity:.35; cursor:default}
.pg-grid{display:grid; grid-template-columns:none; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:calc((100% - 3*14px)/4); gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px}
.pg-grid::-webkit-scrollbar{display:none}
.pg-tile{scroll-snap-align:start; border-radius:22px; border:0; padding:0; margin:0; font:inherit; cursor:default}
button.pg-tile{cursor:pointer}
.pg-flip .pg-back{opacity:0; transition:opacity .45s ease}
.pg-flip.flipped .pg-back{opacity:1}
.pg-flip-tag{position:absolute; left:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,0.92); color:var(--text); font-size:12px; font-weight:700; box-shadow:0 4px 12px rgba(42,29,18,0.12)}
.pg-flip.flipped .pg-flip-tag{background:var(--primary); color:var(--on-primary)}
@media (max-width:960px){ .pg-grid{grid-auto-columns:calc((100% - 2*12px)/3); gap:12px} }
@media (max-width:560px){ .pg-grid{grid-auto-columns:44%; gap:10px} .pg-tile{border-radius:16px} .pg-arrows{display:none} }

/* Hero buttons: 사이트에서 문의 sits right of 카카오톡 상담 */
.hero-right{max-width:520px}
.hero .btn-row{flex-wrap:nowrap}
.hero .btn-row .btn{white-space:nowrap}
@media (max-width:560px){
  .hero .btn-row{flex-wrap:wrap}
  .hero .btn-row .js-mail{flex:1 1 100%; justify-content:center}
  .hero .btn-row .btn-ghost{flex:1 1 0; justify-content:center; padding-left:12px; padding-right:12px}
}

/* Own characters: swipe sideways on phones */
@media (max-width:640px){
  .ips{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -4px; padding:0 4px 4px}
  .ips::-webkit-scrollbar{display:none}
  .ip{flex:0 0 40%; scroll-snap-align:start}
  .ip-img{border-radius:16px}
}

/* Portfolio category filter */
.pg-chips{margin:0 0 16px}
button.pg-chip{font-family:inherit; cursor:pointer}
.pg-chip.on{background:var(--text); border-color:var(--text); color:var(--bg)}
.pg-chip.on:hover{background:var(--text); border-color:var(--text); color:var(--bg)}
.pg-tile[hidden]{display:none}
.pg-empty{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:22px 24px; border-radius:22px; background:var(--surface); border:1px dashed var(--border-strong)}
.pg-empty[hidden]{display:none}
.pg-empty p{margin:0; flex:1 1 260px; font-size:14px; line-height:1.6; color:var(--muted)}
.pg-grid[hidden]{display:none}