/* Ocean MAP 체험 시뮬레이터 — /try, /en/try, /ja/try 공통 스타일 */
  :root{
    --bg:#050810; --panel:#0a1220; --ink:#f4f8fb; --ink-60:rgba(244,248,251,.62); --ink-40:rgba(244,248,251,.42);
    --cyan:#00d4ff; --amber:#ffb547; --coral:#ff8a8a; --stroke:rgba(255,255,255,.09);
    --font:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  body{display:flex;flex-direction:column;height:100dvh}
  header{flex:none;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--stroke)}
  header a{color:var(--ink);text-decoration:none}
  .brand{font-weight:800;letter-spacing:-.01em}.brand em{font-style:normal;color:var(--cyan);font-weight:600}
  .brand small{font-weight:500;color:var(--ink-60);font-size:13px}
  .hdr-r{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--ink-60)}
  .hdr-r button{background:none;border:1px solid var(--stroke);color:var(--ink-60);border-radius:999px;padding:5px 12px;font:inherit;cursor:pointer}
  .bubble{flex:none;min-height:60px;padding:10px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--stroke);background:linear-gradient(180deg,rgba(0,212,255,.06),transparent)}
  .bubble .no{font-family:var(--mono);font-size:12px;color:var(--cyan);border:1px solid rgba(0,212,255,.35);border-radius:999px;padding:3px 9px;white-space:nowrap}
  .bubble .tx{font-size:15px;line-height:1.45}
  .bubble .tx b{color:var(--cyan)}
  .stage{flex:1;min-height:0;display:grid;grid-template-columns:1fr minmax(320px,40%)}
  .sea-wrap{position:relative;overflow:hidden;touch-action:none;cursor:crosshair}
  #sea{position:absolute;inset:0;width:100%;height:100%}
  .simnote{position:absolute;left:12px;top:10px;max-width:calc(100% - 70px);font-size:11px;color:var(--ink-40);background:rgba(0,0,0,.35);padding:4px 9px;border-radius:999px;pointer-events:none}
  .toast{position:absolute;left:50%;top:44px;transform:translateX(-50%);background:rgba(4,20,33,.9);border:1px solid rgba(0,212,255,.4);color:var(--ink);padding:8px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
  .toast.on{opacity:1}
  .joy{position:absolute;left:18px;bottom:18px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:none;touch-action:none}
  .joy .knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,212,255,.35);border:1px solid rgba(0,212,255,.7);pointer-events:none}
  .watch-wrap{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px;background:radial-gradient(ellipse at 50% 45%,#0d1d33 0%,var(--bg) 70%)}
  .watch{position:relative;height:min(78%,560px);aspect-ratio:600/940;user-select:none;-webkit-user-select:none}
  .watch img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  #scr{position:absolute;left:15.83%;top:23.3%;width:68.33%;height:53.4%;border-radius:12%/10%;background:#000;cursor:pointer;touch-action:none}
  .crown{position:absolute;left:90%;top:33%;width:11%;height:17%;border-radius:10px;cursor:ns-resize;touch-action:none}
  .crown.hint{box-shadow:0 0 22px 6px rgba(255,181,71,.55);animation:pulse 1.2s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 0 8px 2px rgba(255,181,71,.25)}}
  .spin-btn{display:none;background:var(--amber);color:#1b1100;border:0;border-radius:999px;padding:10px 18px;font:700 14px var(--font);cursor:pointer;box-shadow:0 4px 18px rgba(255,181,71,.35)}
  .keys{font-size:12px;color:var(--ink-40);text-align:center;line-height:1.6}
  .keys kbd{font-family:var(--mono);border:1px solid var(--stroke);border-radius:5px;padding:1px 6px;color:var(--ink-60)}
  .shake{animation:shake .35s}
  @keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
  .overlay{position:fixed;inset:0;background:rgba(3,8,16,.82);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
  .overlay[hidden]{display:none}
  .card{max-width:440px;width:100%;background:var(--panel);border:1px solid var(--stroke);border-radius:20px;padding:26px 24px;text-align:center}
  .card h1{font-size:24px;letter-spacing:-.02em;margin-bottom:10px}.card h1 em{font-style:normal;color:var(--cyan)}
  .card p{color:var(--ink-60);font-size:14.5px;line-height:1.6}
  .card .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
  .card .stats div{background:rgba(255,255,255,.04);border-radius:12px;padding:10px 4px}
  .card .stats b{display:block;font-family:var(--mono);font-size:20px;color:var(--ink)}
  .card .stats span{font-size:11.5px;color:var(--ink-40)}
  .card .btns{display:flex;flex-direction:column;gap:8px;margin-top:18px}
  .card .btns a,.card .btns button{display:block;padding:12px;border-radius:12px;font:700 15px var(--font);text-decoration:none;cursor:pointer;border:1px solid var(--stroke);background:transparent;color:var(--ink)}
  .card .btns .pri{background:var(--cyan);color:#001318;border:0}
  .card .btns .pick{text-align:left;padding:14px 16px}
  .card .btns .pick small{display:block;font-weight:500;font-size:12.5px;opacity:.75;margin-top:3px}
  .card .btns .alt{background:rgba(255,138,138,.14);border:1px solid rgba(255,138,138,.6);color:#ffc2c2}
  .card .safe{font-size:12px;color:var(--ink-40);margin-top:14px;line-height:1.55}
  @media (max-width:860px){
    .stage{grid-template-columns:1fr;grid-template-rows:minmax(280px,52%) 1fr}
    .watch-wrap{order:1;padding:6px}.sea-wrap{order:2}
    .watch{height:100%}
    .keys{display:none}
    .spin-btn{position:absolute;right:12px;bottom:12px;z-index:2}
    .joy{display:block}
    .bubble .tx{font-size:14px}
    .brand small{display:none}
  }
  .langs{display:flex;gap:2px;font:600 11px var(--mono)}
  .langs a{padding:3px 6px;border-radius:6px;color:var(--ink-40)}
  .langs a[aria-current]{color:var(--ink);background:rgba(255,255,255,.08)}
  html[lang=ja]{--font:"Hiragino Sans","Noto Sans JP","Pretendard Variable",sans-serif}
  .hdr-r{white-space:nowrap}
  @media (max-width:420px){ .hdr-r{gap:8px} .hdr-r > a{display:none} header{padding:0 12px} }   /* 로고가 곧 홈 링크 */