/* HAPPY 웹 장난감 (2026.07). 사이트 토큰을 쓰되, 로봇·게임기 그림의 색은 원본을 유지합니다. */
:root{
  --ground:#FAFCFE; --surface:#fff; --ink:#333; --ink2:#5C6B77; --ink3:#8A98A5;
  --line:#DCE7F0; --line2:#C5D6E4; --blue:#3FA9F5; --blue-deep:#2E93DD; --blue-tint:#E4F2FD;
  --shadow:0 12px 30px rgba(63,169,245,.12);
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--ground);line-height:1.7;word-break:keep-all}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
.container{width:min(1120px,calc(100% - 40px));margin:auto}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue-deep)}
.section-title{font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;letter-spacing:-.04em;margin:10px 0 18px;font-weight:800}
.section-copy{max-width:640px;color:var(--ink2);font-size:1.02rem}
.hero-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--blue);color:var(--blue-deep)}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.primary:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}

.toy-bar{position:sticky;top:0;z-index:20;background:rgba(250,252,254,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.toy-bar-row{height:56px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px}
.toy-bar .back{font-weight:700;color:var(--blue-deep)}
.toy-name{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.toy-nav{display:flex;gap:4px}
.toy-nav a{padding:6px 10px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink2)}
.toy-nav a:hover{background:var(--blue-tint);color:var(--ink)}

.toy-hero{padding:80px 0 60px;background:linear-gradient(180deg,#F5FAFE,var(--ground))}
.toy-hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
.toy-hero-grid img{border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line)}
.toy-hero h1{font-size:clamp(4rem,9vw,7.5rem);line-height:.9;letter-spacing:-.06em;margin:14px 0 18px;color:var(--blue)}
.toy-hero h2{font-size:1.5rem;margin:0 0 14px;font-weight:700}

.interactive-section{padding:90px 0}
.interactive-section.alt{background:var(--blue-tint)}
.interactive-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
.interactive-panel{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:22px;box-shadow:var(--shadow)}
.interaction-help{color:var(--ink3);font-size:.9rem;margin-top:12px}
.control-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.control-row button{border:1px solid var(--line2);background:var(--surface);padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:600}
.control-row button:hover{border-color:var(--blue);color:var(--blue-deep)}
.interaction-status{min-height:28px;margin-top:14px;color:var(--blue-deep);font-weight:700}

/* TOUCH robot (원본 색 유지) */
.robot-stage{min-height:430px;background:linear-gradient(180deg,#fffaf3,#eee1d1);border-radius:18px;display:grid;place-items:center;position:relative;overflow:hidden}
.web-robot{position:relative;width:250px;height:310px}
.robot-body{position:absolute;width:190px;height:190px;left:30px;bottom:20px;border-radius:46% 46% 35% 35%;background:#e9ded0;border:3px solid #6c5543;box-shadow:inset 0 -14px 0 rgba(110,85,67,.06)}
.robot-head{position:absolute;width:210px;height:145px;left:20px;top:5px;background:#eee4d8;border:3px solid #6c5543;border-radius:42px;z-index:5}
.robot-ear{position:absolute;width:42px;height:88px;background:#b99b82;border:3px solid #6c5543;border-radius:28px;top:33px}
.robot-ear.left{left:-28px;transform:rotate(6deg)}.robot-ear.right{right:-28px;transform:rotate(-6deg)}
.robot-screen{position:absolute;inset:20px 24px;border-radius:26px;background:#1e1f20;display:grid;place-items:center;color:#fff;font-size:56px;font-weight:900;letter-spacing:-8px;box-shadow:inset 0 0 0 3px #353638}
.robot-screen .face{transform:translateX(-4px)}
.robot-arm{position:absolute;width:45px;height:125px;background:#e5d8c9;border:3px solid #6c5543;border-radius:24px;right:-7px;top:130px;transform-origin:22px 21px;transform:rotate(2deg);transition:transform .55s cubic-bezier(.2,.9,.3,1);z-index:2}
.robot-arm:after{content:"🐾";position:absolute;width:58px;height:58px;right:-8px;bottom:-18px;border-radius:50%;display:grid;place-items:center;background:#f4eadc;border:3px solid #6c5543;font-size:30px}
.web-robot.arm-up .robot-arm{transform:rotate(-95deg)}
.web-robot.pet-happy .robot-head{animation:robotNod .6s ease 2}
.web-robot.pet-happy .robot-screen{box-shadow:inset 0 0 0 3px #353638,0 0 30px rgba(63,169,245,.35)}
@keyframes robotNod{50%{transform:rotate(4deg) translateY(4px)}}
.pet-zone{position:absolute;width:180px;height:80px;left:35px;top:-3px;border-radius:50%;cursor:pointer}

/* PLAY pocket game */
.pocket-shell{max-width:430px;margin:auto;background:#e8ddce;border:3px solid #6b5543;border-radius:38px;padding:24px;box-shadow:0 20px 50px rgba(91,70,54,.12)}
.pocket-screen{height:290px;border-radius:20px;background:linear-gradient(#9ed7ef 0 58%,#90c77e 58%);border:10px solid #292929;position:relative;overflow:hidden}
.catch-dog{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:62px;transition:left .1s linear}
.treat{position:absolute;top:-40px;font-size:34px;display:none}
.game-hud{position:absolute;top:8px;left:10px;right:10px;display:flex;justify-content:space-between;color:#213b43;font-weight:900;text-shadow:0 1px #fff;font-family:var(--mono);font-size:13px}
.pocket-controls{display:flex;justify-content:space-between;gap:24px;margin-top:22px}
.dpad{display:grid;grid-template-columns:50px 50px;gap:8px}
.round-btn{width:62px;height:62px;border-radius:50%;border:2px solid #6b5543;background:#d4a678;cursor:pointer;font-weight:900}
.square-btn{height:50px;border:2px solid #6b5543;background:#f4eadc;border-radius:14px;cursor:pointer;font-weight:900}

/* FEEL scene */
.feel-desk{background:#e9ded0;border-radius:18px;padding:24px;min-height:460px}
.monitor{max-width:650px;margin:auto;background:#242424;border-radius:20px;padding:12px 12px 26px;position:relative;box-shadow:0 16px 35px rgba(0,0,0,.14)}
.webcam-dot{position:absolute;width:70px;height:28px;border-radius:14px;background:#303030;left:50%;transform:translateX(-50%);top:-22px;display:grid;place-items:center;color:#7bcee8;font-size:12px}
.monitor-screen{height:330px;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(#9fd6ed 0 58%,#8ec77c 58%)}
.feel-dog{position:absolute;left:54%;bottom:52px;font-size:94px;transition:.4s}
.feel-dog.excited{animation:feelBounce .45s ease 2}
@keyframes feelBounce{50%{transform:translateY(-18px) rotate(4deg)}}
.park-path{position:absolute;left:25%;right:15%;bottom:-20px;height:180px;background:#dec49e;clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);opacity:.85}
.camera-preview{position:absolute;right:12px;top:12px;width:145px;height:100px;background:#1b1b1b;border:3px solid #fff;border-radius:12px;overflow:hidden;display:none;z-index:5}
.camera-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera-preview.on{display:block}
.feel-hand{position:absolute;font-size:48px;left:22%;bottom:40px;transition:.35s}
.feel-hand.touching{left:48%;bottom:90px}
.vibe-indicator{position:absolute;left:18px;top:16px;background:rgba(255,255,255,.86);border-radius:999px;padding:7px 10px;font-size:.78rem;font-weight:800;font-family:var(--mono)}
.monitor-stand{width:90px;height:70px;background:#252525;margin:0 auto;border-radius:0 0 18px 18px}

.toy-outro{padding:80px 0;background:var(--blue-tint)}
.toy-foot{padding:28px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--ink3)}
.toy-foot a{color:var(--blue-deep)}

@media(max-width:850px){
  .toy-hero-grid,.interactive-layout{grid-template-columns:1fr}
  .toy-hero{padding:56px 0 40px}
  .toy-nav{display:none}
  .camera-preview{width:105px;height:76px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}