/* 미스터 빅조이 — 값은 모두 :root 에서. 간격 4의 배수, 모서리 10/16/24, 글자 14/16/18/22/28/40/64 */
:root{
  --bg:#f7f6f2; --bg2:#efede6; --card:#ffffff; --ink:#111111; --ink2:#3d3d3a; --muted:#77756e; --line:#e2dfd6;
  --joy:#ffd23f; --joy2:#ffc20a; --ink-on-joy:#111111; --ok:#1f9d55; --bad:#d93025;
  --r1:10px; --r2:16px; --r3:24px;
  --sh1:0 1px 2px rgba(17,17,17,.06),0 4px 16px rgba(17,17,17,.06);
  --sh2:0 2px 6px rgba(17,17,17,.08),0 18px 48px rgba(17,17,17,.14);
  --font:'CT Sans','CT Fallback',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --wrap:1200px; --gut:24px; --top:68px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f0f0e; --bg2:#171715; --card:#1b1b19; --ink:#f4f2ec; --ink2:#cfccc3; --muted:#9a978e; --line:#2c2b28;
  --sh1:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3); --sh2:0 2px 6px rgba(0,0,0,.5),0 18px 48px rgba(0,0,0,.5);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--font);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.03em;font-weight:700}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--joy);color:#111;padding:8px 12px;border-radius:var(--r1)}
:focus-visible{outline:3px solid var(--joy2);outline-offset:2px;border-radius:6px}
.pc{display:inline}

/* 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:999px;border:1.5px solid transparent;font-weight:700;font-size:16px;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-joy{background:var(--joy);color:var(--ink-on-joy)}.btn-joy:hover{background:var(--joy2)}
.btn-ink{background:var(--ink);color:var(--bg)}.btn-ink:hover{box-shadow:var(--sh2)}
.btn-line{border-color:var(--ink);color:var(--ink)}.btn-line:hover{background:var(--ink);color:var(--bg)}
.btn-line-inv{border-color:#fff;color:#fff;background:none}.btn-line-inv:hover{background:#fff;color:#111}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:wait}

/* 머리 */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-color:var(--line)}
.top-in{height:var(--top);display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700}
.brand .mark{width:34px;height:34px;color:var(--ink)}
.brand .word{font-size:19px;letter-spacing:-.02em}
.nav{display:flex;gap:28px;margin-left:auto;font-size:15px;color:var(--ink2)}
.nav a{position:relative;padding:6px 0}.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);font-weight:700}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--joy2);border-radius:2px}

/* 첫 화면 */
.hero{padding:88px 0 0;overflow:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;color:var(--ink2)}
.eyebrow b{color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(31,157,85,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}
.hero h1{margin-top:24px;font-size:clamp(36px,6.2vw,72px);line-height:1.12;letter-spacing:-.045em}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--joy) 62%,var(--joy) 92%,transparent 92%);padding:0 4px}
.lead{margin-top:24px;max-width:720px;font-size:clamp(16px,1.6vw,19px);color:var(--ink2)}
.hero-cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.facts{list-style:none;margin:56px 0 0;padding:24px 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.facts li{display:flex;flex-direction:column;gap:2px;padding-right:16px}
.facts b{font-size:clamp(24px,3vw,36px);letter-spacing:-.04em;line-height:1.2}
.facts span{font-size:14px;color:var(--muted)}
.marquee{overflow:hidden;margin-top:16px;padding:24px 0 72px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:20px;width:max-content;animation:slide 70s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track a{flex:none;width:340px;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh1);background:#111;transition:transform .25s}
.marquee-track a:hover{transform:translateY(-6px)}
.marquee-track img{width:340px;height:212px;object-fit:cover;object-position:top}
@keyframes slide{to{transform:translateX(calc(-50% - 10px))}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.dot{animation:none}html{scroll-behavior:auto}}

/* 구역 */
.sec{padding:112px 0}
.sec-tint{background:var(--bg2)}
.sec-ink{background:#111;color:#f4f2ec}
.sec-head{margin-bottom:48px;max-width:760px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.sec-ink .kicker{color:var(--joy)}
.sec-head h2,.order-side h2{margin-top:8px;font-size:clamp(28px,4vw,44px)}
.sub{margin-top:14px;font-size:17px;color:var(--ink2)}
.sec-ink .sub{color:#c9c6bd}

/* 분야 고르기 */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filters button{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:15px;font-weight:600;color:var(--ink2);cursor:pointer;transition:all .15s}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.filters button span{margin-left:6px;font-size:13px;opacity:.6}

/* 작품 카드 */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;animation:rise .45s both}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:transparent}
.card.big{grid-column:span 2}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.shot{position:relative;display:block;width:100%;padding:0;border:0;background:#0d0d0d;cursor:pointer;aspect-ratio:16/10;overflow:hidden}
.shot .pcimg{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.card:hover .shot .pcimg{transform:scale(1.03)}
.shot .mimg{position:absolute;right:14px;bottom:14px;height:78%;width:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:12px;border:3px solid #000;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .35s}
.card:hover .shot .mimg{transform:translateY(-6px) rotate(-2deg)}
.live{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(17,17,17,.72);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(6px)}
.live .dot{width:6px;height:6px}
.card-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card h3{font-size:22px}
.card .dom{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card p{font-size:15px;color:var(--ink2);line-height:1.6}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--bg2);color:var(--ink2)}
.card-cta{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.card-cta a,.card-cta button{flex:1;height:44px;font-size:14px;padding:0 12px}

/* 만드는 것 */
.make{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.make article{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:28px}
.make .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--joy);font-size:26px}
.make h3{margin-top:18px;font-size:20px}
.make p{margin-top:8px;color:var(--ink2);font-size:15px}
.make small{display:block;margin-top:14px;font-size:13px;color:var(--muted)}
.included{margin-top:28px;display:flex;gap:32px;align-items:center;flex-wrap:wrap;padding:24px 28px;border-radius:var(--r2);background:var(--ink);color:var(--bg)}
.included h3{font-size:18px;white-space:nowrap}
.included ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px}
.included li::before{content:"✓";margin-right:8px;color:var(--joy);font-weight:700}

/* 진행 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps li{position:relative;padding:28px 24px;border-top:3px solid var(--ink)}
.steps b{font-size:14px;color:var(--muted);letter-spacing:.08em}
.steps h3{margin-top:10px;font-size:20px}
.steps p{margin-top:8px;font-size:15px;color:var(--ink2)}

/* 주문 */
.order-in{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;align-items:start}
.order-side{position:sticky;top:calc(var(--top) + 32px)}
.order-notes{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px;color:#c9c6bd;font-size:15px}
.order-notes li{padding-left:28px;position:relative}
.order-notes li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:var(--joy)}
.order-notes b{color:#fff}
.form,.done{background:#fff;color:#111;border-radius:var(--r3);padding:36px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.form{display:grid;gap:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0;position:relative}
.f>span,.f legend{font-size:14px;font-weight:700;color:#3d3d3a;padding:0}
.f legend{margin-bottom:10px}
.f legend small{font-weight:400;color:#77756e;margin-left:6px}
.f i{font-style:normal;font-size:12px;color:#b45309;margin-left:4px;font-weight:600}
.f input,.f select,.f textarea{width:100%;height:50px;padding:0 16px;border:1.5px solid #e2dfd6;border-radius:var(--r1);background:#fbfaf7;color:#111;font-size:16px;transition:border-color .15s,background .15s}
.f textarea{height:auto;padding:14px 16px;resize:vertical;min-height:150px;line-height:1.6}
.f select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:#111;background:#fff}
.f .bad{border-color:var(--bad)}
.hint{margin-top:-12px;font-size:13px;color:#77756e}
.count{position:absolute;right:12px;bottom:10px;font-size:12px;color:#9a978e;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid #e2dfd6;font-size:14px;font-weight:600;color:#3d3d3a;transition:all .15s;user-select:none}
.chips-sm span{height:34px;padding:0 12px;font-size:13px}
.chips label:hover span{border-color:#111}
.chips input:checked+span{background:#111;border-color:#111;color:#fff}
.chips input:focus-visible+span{outline:3px solid var(--joy2);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3d3d3a;cursor:pointer;line-height:1.5}
.agree input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:#111}
.form-msg{min-height:22px;font-size:14px;font-weight:600;color:var(--bad);text-align:center}
.done{text-align:center;padding:56px 36px}
.done-ico{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:var(--joy);display:grid;place-items:center;font-size:34px;font-weight:700}
.done h3{font-size:26px}
.done p{margin:12px 0 28px;color:#3d3d3a}
.done .btn-line-inv{border-color:#111;color:#111}.done .btn-line-inv:hover{background:#111;color:#fff}

/* 질문 */
.faq{display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:0 24px;transition:border-color .2s}
.faq details[open]{border-color:var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-size:17px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink2)}

/* 꼬리 */
.foot{border-top:1px solid var(--line);padding:48px 0 calc(48px + env(safe-area-inset-bottom))}
.foot-in{display:grid;grid-template-columns:1fr auto;gap:20px 32px;align-items:start}
.foot p{margin-top:8px;font-size:14px;color:var(--muted)}
.foot-links{display:flex;gap:24px;font-size:14px;color:var(--ink2)}
.foot .copy{grid-column:1/-1;font-size:13px}

/* 떠 있는 주문 단추(폰) */
.fab{display:none}

/* 작품 자세히 */
.sheet{padding:0;border:0;border-radius:var(--r3);background:var(--card);color:var(--ink);width:min(1080px,calc(100% - 48px));max-height:calc(100% - 48px);box-shadow:var(--sh2);overflow:auto}
.sheet::backdrop{background:rgba(10,10,10,.6);backdrop-filter:blur(4px)}
.sheet[open]{animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.sheet-in{position:relative;display:grid;grid-template-columns:1.5fr 1fr}
.x{position:absolute;right:16px;top:16px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(17,17,17,.75);color:#fff;font-size:18px;cursor:pointer}
.sheet-media{position:relative;background:linear-gradient(160deg,#1b1b19,#0b0b0a);padding:40px 40px 56px;display:flex;align-items:center}
.browser{width:100%;border-radius:12px;overflow:hidden;background:#222;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.browser .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#2a2a28}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#555}
.browser .bar i:nth-child(1){background:#ff5f57}.browser .bar i:nth-child(2){background:#febc2e}.browser .bar i:nth-child(3){background:#28c840}
.browser .bar span{margin-left:10px;flex:1;height:18px;border-radius:6px;background:#1b1b19;color:#aaa;font-size:11px;line-height:18px;padding:0 10px;overflow:hidden;white-space:nowrap}
.browser img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.phone{position:absolute;right:20px;bottom:20px;width:24%;max-width:150px;border-radius:20px;border:4px solid #000;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.6);background:#000}
.phone img{width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top}
.sheet-body{padding:48px 36px 36px;display:flex;flex-direction:column;gap:14px}
.sheet-body .cat{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.sheet-body h3{font-size:32px}
.sheet-body>p:not(.cat){color:var(--ink2)}
.sheet-cta{display:grid;gap:10px;margin-top:auto;padding-top:16px}

/* 화면 폭 */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .make{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .order-in{grid-template-columns:1fr;gap:40px}
  .order-side{position:static}
  .nav{gap:20px}
}
@media (max-width:760px){
  :root{--gut:16px;--top:60px}
  .pc{display:none}
  .nav{display:none}
  .top-in{justify-content:space-between}
  .hero{padding-top:48px}
  .facts{grid-template-columns:repeat(2,1fr);gap:20px 0;margin-top:40px}
  .marquee{padding-bottom:48px}
  .marquee-track a,.marquee-track img{width:240px}.marquee-track img{height:150px}
  .sec{padding:72px 0}
  .sec-head{margin-bottom:32px}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut)) 24px;padding:0 var(--gut);scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none}
  .grid{grid-template-columns:1fr;gap:20px}
  .card.big{grid-column:auto}
  .card-body{padding:18px 18px 20px}
  .make{grid-template-columns:1fr;gap:12px}
  .make article{padding:22px}
  .included{padding:22px;gap:14px}
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{padding:22px 0}
  .row2{grid-template-columns:1fr}
  .form,.done{padding:24px 18px;border-radius:var(--r2)}
  .faq details{padding:0 18px}
  .faq summary{font-size:16px}
  .foot-in{grid-template-columns:1fr}
  .fab{display:flex;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;transform:translate(-50%,120px);align-items:center;justify-content:center;height:52px;padding:0 32px;border-radius:999px;background:var(--joy);color:#111;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .3s}
  .fab.show{transform:translate(-50%,0)}
  .sheet{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;border-radius:var(--r3) var(--r3) 0 0}
  .sheet-in{grid-template-columns:1fr}
  .sheet-media{padding:24px 16px 32px}
  .phone{right:12px;bottom:12px;width:26%}
  .sheet-body{padding:24px 18px calc(24px + env(safe-area-inset-bottom))}
  .sheet-body h3{font-size:26px}
}

/* 알림 띠 */
.toast{position:fixed;left:50%;top:calc(var(--top) + 12px);z-index:60;transform:translate(-50%,-20px);opacity:0;pointer-events:none;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;box-shadow:var(--sh2);transition:all .25s;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 404 */
.nf{text-align:center}.nf h2{font-size:36px;margin:8px 0 16px}.nf-cta{margin-top:32px}