/* 문의 자동화 — 실사 작업대(첫 화면) + 종이·먹·인주(체험 이후). 유리·그라데이션 글자·알약 버튼을 쓰지 않는다. */
:root{--wood:#1a120b;--paper:#ECE7DD;--paper2:#E2DCD0;--sheet:#FAF8F2;--ink:#1B1A16;--ink2:#5E5A50;--rule:rgba(27,26,22,.9);--hair:rgba(27,26,22,.22);--seal:#C2361F;--cream:#F4EDE2;--tan:#E7C9A0;--serif:"Noto Serif KR",serif;--mono:"IBM Plex Mono",monospace}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);overflow-x:clip}
body{font-family:Pretendard,"Malgun Gothic",sans-serif;color:var(--ink);background:var(--paper);letter-spacing:-.01em;word-break:keep-all}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
section{scroll-margin-top:64px}
.mono{font-family:var(--mono)}

/* 머리 */
.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,5vw,72px);color:var(--cream);transition:background .3s,color .3s,border-color .3s;border-bottom:1px solid transparent}
.top .brand img{height:18px;width:auto;display:block}
.top .on-paper{display:none!important}
.top nav{display:flex;gap:clamp(14px,2vw,28px);font-size:14px;font-weight:600}
.top nav a{opacity:.85}.top nav a:hover{opacity:1}
.top .contact-link{opacity:1;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.top.paper{background:var(--paper);color:var(--ink);border-color:var(--rule)}
.top.paper .on-dark{display:none!important}.top.paper .on-paper{display:block!important}

/* 1. 작업대 */
.desk{position:relative;height:280vh;background:var(--wood)}
.desk-pin{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;background:var(--wood)}
.scene{--fx:50%;position:absolute;left:50%;top:50%;width:max(100vw,100vh * 1672 / 941);aspect-ratio:1672/941;transform:translate(calc(-1 * var(--fx)),-50%);container-type:inline-size}
.cam{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.photo{position:absolute;inset:0;width:100%;height:100%;display:block}
/* 초점: 휴대폰 둘레는 선명하게 두고 바깥만 흐리고 어둡게(피사계 심도) */
.photo-soft{filter:blur(calc(var(--blur,0) * 1px));opacity:min(1,calc(var(--blur,0) * 1));-webkit-mask:radial-gradient(ellipse 9% 26% at 66.45% 52.6%,transparent 62%,#000 100%);mask:radial-gradient(ellipse 9% 26% at 66.45% 52.6%,transparent 62%,#000 100%)}
.focus{position:absolute;inset:0;pointer-events:none;opacity:var(--dark,0);background:radial-gradient(ellipse 11% 30% at 66.45% 52.6%,transparent 55%,rgba(12,7,3,.62) 100%)}
.screen{position:absolute;left:61.25%;top:33.15%;width:10.41%;height:38.9%;border-radius:1.05cqw;overflow:hidden;background:radial-gradient(130% 80% at 30% 0%,#3e5270 0%,#1b2432 50%,#0c1017 100%);color:#fff;font-size:.62cqw}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
.screen-off{position:absolute;inset:0;background:#07080a;opacity:calc(1 - var(--wake,0))}
.lock-clock{text-align:center;padding-top:3.4em}
.lock-clock small{display:block;font-size:1em;font-weight:600;opacity:.8}
.lock-clock b{display:block;font-size:4.3em;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.lock-note{margin:1.6em .9em 0;padding:.9em 1em;border-radius:1.4em;background:rgba(245,240,230,.94);color:#1a1a1a;font-size:.95em;line-height:1.4;box-shadow:0 .4em 1.2em rgba(0,0,0,.25);opacity:var(--note,0);transform:translateY(calc((1 - var(--note,0)) * -2.2em)) scale(calc(.96 + var(--note,0) * .04))}
.lock-note b{display:flex;justify-content:space-between;font-size:.95em}.lock-note b span{font-weight:500;color:#777}
.lock-note p{margin-top:.25em}
.spill{position:absolute;left:61.2%;top:33.1%;width:10.5%;height:39%;border-radius:1.2cqw;opacity:var(--wake,0);box-shadow:0 0 3cqw 1.4cqw rgba(170,200,255,.18),0 0 10cqw 5cqw rgba(150,185,255,.1);mix-blend-mode:screen;pointer-events:none}
.ripple{position:absolute;left:66.45%;top:52.6%;width:0;height:0}
.ripple i{position:absolute;left:0;top:0;width:18cqw;height:18cqw;margin:-9cqw 0 0 -9cqw;border-radius:50%;border:.12cqw solid rgba(255,236,205,.5);opacity:0;transform:scale(.55)}
.desk.buzz .ripple i{animation:ring 1.5s cubic-bezier(.2,.6,.3,1) forwards}
.desk.buzz .ripple i:nth-child(2){animation-delay:.18s}.desk.buzz .ripple i:nth-child(3){animation-delay:.36s}
@keyframes ring{0%{opacity:.8;transform:scale(.55)}100%{opacity:0;transform:scale(1.35)}}
.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,12,6,.74) 0%,rgba(20,12,6,.45) 34%,rgba(20,12,6,0) 56%),linear-gradient(0deg,rgba(20,12,6,.38),transparent 30%);opacity:calc(1 - var(--lift,0) * .6)}
.desk-copy{position:absolute;left:clamp(20px,5vw,84px);top:50%;max-width:540px;color:var(--cream);transform:translateY(calc(-46% - var(--lift,0) * 60px));opacity:calc(1 - var(--lift,0));z-index:2}
.kicker{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--tan)}
.desk-copy h1{margin-top:18px;font-family:var(--serif);font-weight:600;font-size:clamp(36px,4.4vw,66px);line-height:1.18;letter-spacing:-.04em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.lede{margin-top:22px;font-size:17px;line-height:1.7;color:#e9dfd0;max-width:25em}
.line-link{display:inline-block;margin-top:30px;font-size:16px;font-weight:700;border-bottom:1.5px solid var(--tan);padding-bottom:4px}
.desk-end{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);z-index:2;color:var(--cream);font-family:var(--mono);font-size:13px;letter-spacing:.04em;white-space:nowrap;opacity:var(--endcap,0);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.photo-tag{position:absolute;right:clamp(20px,4vw,64px);bottom:26px;z-index:2;font-size:12px;color:#d9ccb8;opacity:calc(1 - var(--lift,0))}

/* 종이 영역 공통 */
.try,.channel,.setup{position:relative;padding:clamp(80px,10vw,140px) clamp(20px,5vw,72px);border-top:1.5px solid var(--rule)}
.try::before,.channel::before,.setup::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sec-head{position:relative;display:grid;grid-template-columns:200px 1fr;column-gap:32px;margin-bottom:56px}
.sec-head .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--seal);padding-top:14px}
.sec-head h2{font-family:var(--serif);font-weight:900;font-size:clamp(34px,4.2vw,62px);line-height:1.1;letter-spacing:-.045em}
.sec-head p:not(.num){grid-column:2;margin-top:18px;max-width:34em;font-size:16.5px;line-height:1.7;color:#3a372f}
.ink-btn{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;background:var(--ink);color:var(--paper);font-weight:700;font-size:16px;padding:16px 22px;transition:background .2s}
.ink-btn:hover{background:var(--seal)}
.ink-btn:disabled{opacity:.5;cursor:default;background:var(--ink)}

/* 2. 체험 */
.try-grid{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) 300px minmax(300px,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.pad{position:relative;background:var(--sheet);padding:44px 28px 28px;box-shadow:0 1px 1px rgba(0,0,0,.06),0 22px 40px -22px rgba(40,30,15,.45)}
.pad-bind{position:absolute;left:0;right:0;top:0;height:14px;background:#2b2a26}
.pad-bind::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:repeating-linear-gradient(90deg,#f2e59a 0 6px,#e8d77c 6px 8px)}
.pad-title{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:.3em;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:6px}
.pad-title span{font-size:12px;letter-spacing:.06em;font-weight:500}
.pad-row{display:grid;grid-template-columns:78px 1fr;align-items:center;min-height:52px;border-bottom:1px solid rgba(80,120,170,.28);font-family:var(--mono);font-size:12px;color:var(--ink2)}
.pad-row input,.pad-row select,.pad-row textarea{width:100%;border:0;background:none;font-family:Pretendard,sans-serif;font-size:16px;font-weight:600;color:var(--ink);padding:10px 0;resize:none;outline:none}
.pad-row select{appearance:none;cursor:pointer}
.pad-row:focus-within{border-bottom-color:var(--seal)}
.pad-msg{align-items:start;padding-top:14px}.pad-msg textarea{padding-top:0;line-height:1.6}
.pad-warn{min-height:22px;margin:10px 0 4px;font-size:13px;color:var(--seal);font-weight:600}
.owner{position:relative;justify-self:center;scroll-margin-top:80px}
.device{width:300px;height:620px;border-radius:46px;padding:10px;background:#16161a;box-shadow:inset 0 0 0 1.5px #3a3a40,0 30px 60px -20px rgba(40,30,15,.55)}
.d-screen{position:relative;height:100%;border-radius:37px;overflow:hidden;background:radial-gradient(130% 80% at 30% 0%,#3e5270 0%,#1b2432 50%,#0c1017 100%);color:#fff;font-size:15px;transition:filter .6s}
.d-screen.dim{filter:brightness(.35)}
.d-screen .lock-clock{padding-top:64px}
.d-screen .lock-clock small{font-size:14px}.d-screen .lock-clock b{font-size:66px}
.notes{list-style:none;position:absolute;left:12px;right:12px;top:196px;display:grid;gap:8px}
.notes li{padding:12px 14px;border-radius:20px;background:rgba(245,240,230,.94);color:#1a1a1a;font-size:13px;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:drop .6s cubic-bezier(.2,.9,.25,1.12) both}
.notes b{display:flex;justify-content:space-between;font-size:12.5px}.notes b span{font-weight:500;color:#777}
.notes p{margin-top:3px;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.owner.buzz .device{animation:buzz .45s linear}
.owner figcaption{margin-top:16px;display:grid;justify-items:center;gap:10px;font-size:12px;color:var(--ink2);letter-spacing:.06em}
.guest{max-width:300px;background:var(--sheet);border:1px solid var(--hair);padding:12px 14px;font-size:13.5px;line-height:1.55;color:var(--ink);letter-spacing:-.01em;white-space:pre-line;animation:drop .5s ease both}
.guest small{display:block;font-family:var(--mono);font-size:11px;color:var(--ink2);margin-bottom:4px}
.printer{position:relative;padding-top:6px}
.slot{height:24px;background:#1d1c19;border-radius:3px;box-shadow:inset 0 -6px 10px rgba(0,0,0,.6)}
.slot::after{content:"";display:block;margin:0 12px;position:relative;top:11px;height:3px;background:#000;border-radius:2px}
.slips{position:relative;margin:-10px 18px 0;display:grid;gap:14px}
.slips-empty{padding:32px 4px;font-size:14px;color:var(--ink2);line-height:1.6}
.slip{position:relative;background:var(--sheet);padding:24px 22px 32px;box-shadow:0 1px 1px rgba(0,0,0,.06),0 16px 26px -14px rgba(40,30,15,.4);
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/13px 9px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/13px 9px repeat-x}
.slip.print{animation:print 1.1s steps(14,end) both}
.slip h3{font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-align:center}
.slip .no{text-align:center;font-family:var(--mono);font-size:11px;color:#6d685c;margin-top:5px}
.slip hr{border:0;border-top:1.5px dashed #9a9486;margin:13px 0}
.slip dl{display:grid;grid-template-columns:64px 1fr;row-gap:6px;font-family:var(--mono);font-size:12px}
.slip dt{color:#6d685c}.slip dd{font-family:Pretendard,sans-serif;font-weight:600;font-size:13.5px}
.slip .msg{font-size:14.5px;font-weight:600;line-height:1.55}
.slip ol{list-style:none;font-family:var(--mono);font-size:12px;display:grid;gap:5px}
.slip ol li{display:flex;justify-content:space-between}
.stamp{position:absolute;right:14px;top:62px;width:84px;height:84px;border:3.5px solid var(--seal);border-radius:50%;color:var(--seal);display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.06em;transform:rotate(-14deg);opacity:.86;mix-blend-mode:multiply;background:none;cursor:pointer}
.stamp::before{content:"";position:absolute;inset:5px;border:1.2px solid currentColor;border-radius:50%}
.stamp.hit{animation:stamp .35s cubic-bezier(.3,1.6,.5,1) both}
.stamp.done{color:var(--ink2);border-color:var(--ink2)}
.flow{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1.5px solid var(--rule)}
.flow li{padding:14px 16px 0 0;font-size:14px;font-weight:700;color:var(--ink2);transition:color .3s}
.flow li+li{padding-left:16px;border-left:1px solid var(--hair)}
.flow b{display:block;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink2);margin-bottom:4px}
.flow li.on{color:var(--ink)}.flow li.on b{color:var(--seal)}

.fly-sheet{position:fixed;left:0;top:0;z-index:40;width:240px;pointer-events:none;background:var(--sheet);padding:14px 16px;box-shadow:0 18px 30px -10px rgba(40,30,15,.45);font-size:13px;line-height:1.5;color:var(--ink)}
.fly-sheet b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--seal);margin-bottom:4px}

/* 3. 채널 자동응답 */
.channel{display:grid;grid-template-columns:1fr minmax(320px,420px);gap:48px;align-items:start;background:var(--paper2)}
.channel .sec-head{margin:0}
.chat-card{position:relative;background:#cfd8e0;border:1.5px solid var(--ink);height:520px;display:flex;flex-direction:column}
.chat-top{display:flex;gap:10px;align-items:center;padding:14px 16px;background:var(--sheet);border-bottom:1.5px solid var(--ink)}
.chat-top b{display:block;font-size:15px}.chat-top small{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.chat-mark{width:36px;height:36px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-family:var(--serif);font-weight:900}
.chat-log{flex:1;list-style:none;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px}
.chat-log li{max-width:84%;font-size:14px;line-height:1.5;padding:10px 13px;white-space:pre-line;animation:pop .35s cubic-bezier(.2,.9,.3,1.25) both}
.chat-log .me{align-self:flex-end;background:#f6dc6b;border-radius:14px 14px 3px 14px}
.chat-log .shop{align-self:flex-start;background:#fff;border-radius:14px 14px 14px 3px}
.chat-log .shop small{display:block;font-family:var(--mono);font-size:10.5px;color:#8a93a6;margin-bottom:3px}
.chat-log .typing{align-self:flex-start;background:#fff;border-radius:14px;display:flex;gap:4px;padding:13px 14px}
.chat-log .typing i{width:6px;height:6px;border-radius:50%;background:#9aa3b5;animation:blink 1s infinite}
.chat-log .typing i:nth-child(2){animation-delay:.15s}.chat-log .typing i:nth-child(3){animation-delay:.3s}
.chat-keys{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;background:var(--sheet);border-top:1.5px solid var(--ink)}
.chat-keys button{border:1.5px solid var(--ink);background:none;padding:8px 13px;font-size:13px;font-weight:700;cursor:pointer}
.chat-keys button:hover{background:var(--ink);color:var(--paper)}
.chat-keys button:disabled{opacity:.4;cursor:default;background:none;color:var(--ink)}

/* 4. 설치 구성 */
.setup-list{position:relative;list-style:none;border-top:1.5px solid var(--rule)}
.setup-list li{display:grid;grid-template-columns:200px 1fr 1.2fr 180px;column-gap:32px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--hair)}
.setup-list b{font-family:var(--mono);font-size:12px;color:var(--seal);font-weight:600}
.setup-list h3{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.03em}
.setup-list h3 small{font-family:var(--mono);font-size:11px;color:var(--ink2);margin-left:6px}
.setup-list p{font-size:15.5px;line-height:1.65;color:#3a372f}
.setup-list span{justify-self:end;font-family:var(--mono);font-size:12px;color:var(--ink2)}
.closing{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:72px;padding-top:28px;border-top:1.5px solid var(--rule)}
.closing p{font-family:var(--serif);font-size:clamp(20px,2vw,28px);font-weight:600;line-height:1.45;letter-spacing:-.03em}

@keyframes drop{from{opacity:0;transform:translateY(-24px) scale(.97)}}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
@keyframes blink{50%{opacity:.3}}
@keyframes buzz{0%,100%{transform:none}20%{transform:translateX(-3px) rotate(-.5deg)}40%{transform:translateX(3px) rotate(.5deg)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes stamp{from{opacity:0;transform:rotate(-14deg) scale(1.9)}}

@media (max-width:1100px){
  .try-grid{grid-template-columns:1fr 300px}
  .printer{grid-column:1/-1;width:100%;max-width:420px}
  .channel{grid-template-columns:1fr}
  .setup-list li{grid-template-columns:120px 1fr;row-gap:8px}
  .setup-list p{grid-column:2}.setup-list span{grid-column:2;justify-self:start}
  .sec-head{grid-template-columns:120px 1fr}
}
@media (max-width:700px){
  .scene{--fx:64%}
  .vignette{background:linear-gradient(180deg,rgba(20,12,6,.78) 0%,rgba(20,12,6,.25) 42%,rgba(20,12,6,.1) 60%,rgba(20,12,6,.8) 100%)}
  .desk-copy{top:84px;right:20px;transform:translateY(calc(var(--lift,0) * -40px))}
  .desk-copy h1{font-size:30px}
  .lede,.line-link{display:none}
  .top nav a:not(.contact-link):not([href^="index.html#layer"]){display:none}
  .top nav a[href^="index.html#layer"]{white-space:nowrap;opacity:1}
  .sec-head{grid-template-columns:1fr}
  .sec-head .num{padding:0 0 10px}
  .sec-head p:not(.num){grid-column:1}
  .try-grid{grid-template-columns:1fr}
  .owner{order:2}.printer{order:3}
  .flow{grid-template-columns:1fr 1fr;row-gap:14px}
  .flow li:nth-child(3){padding-left:0;border-left:0}
  .setup-list li{grid-template-columns:1fr}
  .setup-list p,.setup-list span{grid-column:1}
  .desk-end{white-space:normal;width:84%;text-align:center}
  .chat-card{height:480px}
}
@media (max-width:360px){.device{width:280px;height:580px}.d-screen .lock-clock b{font-size:58px}.notes{top:180px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .desk{height:auto}.desk-pin{position:relative}
}