/* 데구리 통합 로그인 창(js/deguri-account.js) — 첫 화면·키우기(/care)·타임어택(/race) 공용. 창 마크업은 js 가 만든다.
   재료는 세 페이지가 같이 쓰는 나무 테두리·크림 물감·금색 변수(--wood-line·--paper·--gold… 각 페이지 css 의 :root). 첫 화면에만 있는 --mint 는 기본값을 붙여 둔다.
   키우기·타임어택 css 의 [hidden] { display:none !important } 를 이기도록 말풍선 :hover 표시에만 !important 를 쓴다. */
/* 오른쪽 위 [로그인]/[내 기록] 버튼의 <button> 몫(hidden 이 inline-flex 에 지지 않게). 모양은 페이지 css — 첫 화면 .feedback-link, 키우기 .care-account-btn, 타임어택 .race-account-btn */
.account-open { cursor:pointer; }.account-open[hidden] { display:none; }.account-open:disabled { opacity:.55; cursor:not-allowed; transform:none; }
/* 버튼 바로 위 작은 언어 바꾸기(js/i18n.js switcher, 사용자 2026-10-10 — 게임 모양 알약 + 펼치는 목록, 버튼과 6px) — 버튼을 .account-slot 으로 감싸고 그 위에 띄운다(머리줄 높이는 그대로) */
.account-slot { position:relative; display:inline-flex; flex:0 0 auto; }
.lang-switch { position:absolute; right:0; bottom:calc(100% + 6px); z-index:6; }
.lang-switch__btn { display:inline-flex; align-items:center; gap:3px; height:22px; margin:0; padding:0 7px 0 6px; border:2px solid var(--wood-line); border-radius:9px; color:#5a3d1e; background:var(--paper); box-shadow:0 2px 0 var(--wood-edge); font:12px/1 "Jua",sans-serif; white-space:nowrap; cursor:pointer; transition:transform 120ms ease,box-shadow 120ms ease; }
.lang-switch__btn:hover { background:var(--cream); }.lang-switch__btn:active,.lang-switch.is-open .lang-switch__btn { transform:translateY(2px); box-shadow:none; }
.lang-switch__btn:focus-visible { outline:2px solid var(--gold-deep); outline-offset:2px; }.lang-switch__btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.lang-switch__globe { font-size:11px; }.lang-switch__caret { font-size:9px; color:var(--wood-deep); transition:transform 120ms ease; }.lang-switch.is-open .lang-switch__caret { transform:rotate(180deg); }
/* 펼친 목록 — 버튼 아래로, 로그인 버튼 위에 겹친다. 고른 언어는 캐릭터 창 선택과 같은 금색 */
.lang-switch__menu { position:absolute; top:calc(100% + 6px); right:0; min-width:112px; margin:0; padding:5px; list-style:none; border:2px solid var(--wood-line); border-radius:12px; background:var(--paper); box-shadow:0 3px 0 var(--wood-edge),0 10px 22px rgba(60,40,10,.2); }
.lang-switch__menu[hidden] { display:none; }
.lang-switch__opt { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:8px; color:var(--ink); font:14px/1.1 "Jua",sans-serif; white-space:nowrap; cursor:pointer; outline:none; }
.lang-switch__opt:hover,.lang-switch__opt:focus-visible { background:var(--gold-soft); }
.lang-switch__opt:lang(ja),.lang-switch__opt:lang(zh),.lang-switch__now:lang(ja),.lang-switch__now:lang(zh) { font-weight:700; }   /* Jua 에 없는 한자·가나는 기기 글꼴이라 얇아서 */
.lang-switch__opt[aria-selected="true"] { color:var(--gold-ink); background:var(--gold); }.lang-switch__opt[aria-selected="true"]::after { content:"✓"; font-size:12px; }
/* 로그인 · 내 기록 창 — 캐릭터 창과 같은 나무 테두리·머리줄, 폭은 GIF 창만큼(폰 375px 에서도 한 칸 안에) */
.account-dialog { width:min(92vw,420px); max-height:min(88vh,640px); padding:0; overflow-y:auto; overscroll-behavior:contain; border:3px solid var(--wood-line); border-radius:18px; color:var(--ink); background:var(--paper); box-shadow:0 6px 0 var(--wood-edge),0 24px 80px rgba(0,0,0,.32); }.account-dialog::backdrop { background:rgba(24,38,14,.55); backdrop-filter:blur(3px); }
.account-dialog__head { position:sticky; top:0; z-index:7; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 16px 12px; border-bottom:2px solid #f0e2c4; background:linear-gradient(180deg,var(--cream),var(--paper)); }.account-dialog__head h2 { margin:0; font:22px/1.2 "Jua",sans-serif; }
.account-dialog__close { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; padding:0; border:2px solid var(--wood-line); border-radius:50%; color:#5a3d1e; background:var(--cream); font-size:24px; line-height:1; box-shadow:0 2px 0 var(--wood-edge); cursor:pointer; }.account-dialog__close:hover { border-color:var(--gold-deep); color:var(--gold-ink); background:var(--gold); }.account-dialog__close:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }
.account-dialog__msg { margin:12px 16px 0; padding:8px 10px; border-radius:10px; color:var(--grass-deep); background:var(--mint,#e8f5eb); font-size:13px; font-weight:800; line-height:1.45; word-break:keep-all; }.account-dialog__msg:empty { display:none; }
.account-dialog__body { padding:12px 16px 16px; font-size:13px; line-height:1.55; }
/* 손님 화면 — [손님으로 계속] / [구글로 로그인] 두 카드 중 고르기. 자세한 설명은 ? 위로 떠오르는 말풍선(아래를 밀지 않음, 폭은 카드에 맞춰 창 밖으로 잘리지 않게, 꼬리만 ? 위 — --tail-x 는 deguri-account.js placeHelp) */
.account-choice { display:grid; gap:6px; }.account-choice__card { display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; padding:12px 12px 13px; border:2px solid var(--wood-soft); border-radius:14px; background:var(--cream); text-align:center; }.account-choice__card small { color:var(--muted); font-size:12px; font-weight:700; }
.account-choice__guest { border-color:var(--wood-line); color:#5a3d1e; font:inherit; box-shadow:0 3px 0 var(--wood-edge); cursor:pointer; transition:transform 120ms ease,box-shadow 120ms ease,background-color 120ms ease; }.account-choice__guest:hover { background:#fff3d6; }.account-choice__guest:active { transform:translateY(3px); box-shadow:0 0 0 var(--wood-edge); }.account-choice__guest:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }
.account-choice__google { border-color:var(--gold-deep); background:var(--gold-soft); }.account-choice__title { display:inline-flex; align-items:center; gap:6px; color:var(--ink); font:17px/1.2 "Jua",sans-serif; }.account-choice__or { margin:0; color:var(--muted); font-size:12px; font-weight:800; text-align:center; }
.account-help { display:inline-grid; place-items:center; width:21px; height:21px; padding:0; border:2px solid var(--wood-line); border-radius:50%; color:#5a3d1e; background:var(--paper); font:13px/1 "Jua",sans-serif; cursor:pointer; }.account-help[aria-expanded="true"] { border-color:var(--gold-deep); background:var(--gold); }.account-help:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }
.account-choice__google { position:relative; }.account-help__bubble { position:absolute; right:8px; bottom:calc(100% - 4px); left:8px; z-index:3; padding:9px 11px; border:2px solid var(--wood-line); border-radius:12px; color:var(--ink); background:var(--paper); box-shadow:0 3px 0 var(--wood-edge),0 10px 22px rgba(60,40,10,.2); font-size:12px; font-weight:700; line-height:1.55; text-align:left; word-break:keep-all; }.account-help__bubble strong { display:block; font:14px/1.3 "Jua",sans-serif; }.account-help__bubble ul { margin:4px 0 6px; padding-left:18px; }.account-help__bubble::after { content:""; position:absolute; top:100%; left:calc(var(--tail-x,50%) - 10px); width:12px; height:12px; margin:-6px 0 0 -7px; border-right:2px solid var(--wood-line); border-bottom:2px solid var(--wood-line); background:var(--paper); transform:rotate(45deg); }.account-help__bubble[hidden] { display:none; }.account-help__bubble a { color:#1a6fd8; text-decoration:underline; }.account-help__bubble a:hover { color:#0f4fa8; }@media (hover:hover) { .account-choice__google:has(.account-help:hover) .account-help__bubble { display:block !important; } }.account-choice .account-dialog__warn { margin:6px 0 0; font-size:12px; }.account-choice .account-google { margin-top:6px; }
.account-dialog__warn { margin:0 0 12px; padding:8px 10px; border:2px solid var(--gold-deep); border-radius:10px; color:var(--gold-ink); background:var(--gold-soft); font-weight:700; word-break:keep-all; }
.account-google { display:flex; justify-content:center; min-height:44px; }.account-google__wait { align-self:center; margin:0; color:var(--muted); font-weight:700; text-align:center; word-break:keep-all; }
/* 카카오·디스코드 로그인 버튼(docs/goal/deguri-social-login.md) — 구글 버튼(GIS large·pill 260px)과 같은 크기. 색은 각 회사 버튼 안내대로(카카오 #FEE500·글자 검정 85%, 디스코드 #5865F2·흰 글자) */
.account-providers { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px; }.account-choice .account-providers .account-google { margin-top:0; }
.account-provider { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:260px; max-width:100%; height:40px; padding:0 14px; border:0; border-radius:999px; font:600 14px/1 system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; cursor:pointer; }.account-provider:disabled { opacity:.55; cursor:not-allowed; }.account-provider:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }
.account-provider--kakao { color:rgba(0,0,0,.85); background:#fee500; }.account-provider--kakao:hover:not(:disabled) { background:#f5dc00; }.account-provider--kakao .account-provider__logo { color:#000; }
.account-provider--discord { color:#fff; background:#5865f2; }.account-provider--discord:hover:not(:disabled) { background:#4752c4; }
.account-provider__logo { flex:0 0 18px; width:18px; height:18px; }
/* 계정 관리 — 로그인 연결 줄(구글·카카오·디스코드 한 줄씩: 연결됨 + [연결 끊기] / [연결]) */
.account-links { margin:6px 0 14px; text-align:left; }.account-manage .account-links__title { margin:4px 0 6px; color:var(--ink); font:15px/1.3 "Jua",sans-serif; text-align:center; }
.account-links__list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.account-link { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 8px; min-height:44px; padding:6px 10px; border:2px solid var(--wood-soft); border-radius:12px; background:var(--cream); }
.account-link__name { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font:15px/1.2 "Jua",sans-serif; }.account-link__name .account-provider__logo { flex-basis:20px; width:20px; height:20px; }.account-link__name--kakao .account-provider__logo { color:#3c1e1e; }.account-link__name--discord .account-provider__logo { color:#5865f2; }
.account-link__side { display:inline-flex; align-items:center; gap:10px; margin-left:auto; }.account-link__state { color:#3d7a2a; font-size:12px; font-weight:800; white-space:nowrap; }
.account-link .account-provider { width:auto; height:30px; padding:0 14px; font-size:13px; }.account-link .account-provider .account-provider__logo { display:none; }.account-link__google { display:flex; align-items:center; min-height:32px; }
.account-manage .account-links__note { margin:6px 0 0; text-align:center; }.account-manage .account-links__msg { margin:0 0 8px; padding:8px 10px; border-radius:10px; color:var(--grass-deep); background:var(--mint,#e8f5eb); font-size:13px; font-weight:800; line-height:1.45; text-align:center; }
/* 내 기록 창 맨 아래 — [로그아웃] 밑줄 글자 하나, 그 아래 접힌 [계정 관리](펼치면 한 줄 + [계정 지우기], 사용자 2026-10-06 — 로그아웃 옆이면 잘못 누른다).
   페이지 내용(js/deguri-mypage.js)이 없을 때의 한 줄은 __lead */
.account-dialog__foot { display:flex; justify-content:center; gap:16px; margin-top:14px; }.account-dialog__link { padding:2px 0; border:0; color:var(--muted); background:none; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }.account-dialog__link:disabled { opacity:.55; cursor:not-allowed; }.account-dialog__link:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; border-radius:4px; }
.account-manage { margin-top:18px; padding-top:10px; border-top:1px dashed #e6d6b4; text-align:center; }.account-manage summary { display:inline-block; padding:2px 4px; color:var(--muted); font-size:12px; font-weight:700; list-style:none; cursor:pointer; }.account-manage summary::-webkit-details-marker { display:none; }.account-manage summary::after { content:" ▾"; }.account-manage[open] summary::after { content:" ▴"; }.account-manage summary:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; border-radius:4px; }
.account-manage p { margin:6px 0 8px; color:var(--muted); font-size:12px; font-weight:700; word-break:keep-all; }
.account-manage__delete { padding:5px 14px; border:2px solid #d9a49b; border-radius:999px; color:#b0473a; background:#fff; font:13px/1.1 "Jua",sans-serif; cursor:pointer; }.account-manage__delete:hover { background:#fdeeea; }.account-manage__delete:disabled { opacity:.55; cursor:not-allowed; }.account-manage__delete:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }
/* 계정 지우기 확인 창(브라우저 confirm 대신) — 내 기록 창 위에 겹친다. 칸에 '삭제하겠습니다'를 똑같이 적어야 빨간 [계정 지우기]가 켜진다. 칸 글자 16px = 아이폰 확대 방지 */
.account-confirm { width:min(92vw,360px); }
.account-confirm__lead { margin:0 0 6px; color:var(--ink); font-weight:800; word-break:keep-all; }
.account-confirm__list { margin:0 0 12px; padding-left:18px; color:var(--ink); font-weight:700; }
.account-confirm__label { display:block; margin:0 0 6px; color:#7a5a30; font-weight:700; word-break:keep-all; }.account-confirm__label b { color:#b0473a; }
.account-confirm__input { box-sizing:border-box; width:100%; padding:8px 10px; border:2px solid var(--wood-line); border-radius:10px; color:var(--ink); background:#fff; font:16px/1.2 "Jua",sans-serif; }.account-confirm__input:focus { outline:none; border-color:#b0473a; box-shadow:0 0 0 3px #f6d5cf; }
.account-confirm__actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.account-confirm__cancel,.account-confirm__ok { padding:7px 16px; border:2px solid var(--wood-line); border-radius:999px; font:14px/1.1 "Jua",sans-serif; cursor:pointer; }.account-confirm__cancel { color:#7a5a30; background:var(--cream); }.account-confirm__ok { border-color:#9c3428; color:#fff; background:#c4513f; }.account-confirm__ok:disabled { border-color:#e0c4bd; background:#e3b3aa; cursor:not-allowed; }.account-confirm__cancel:focus-visible,.account-confirm__ok:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }
.account-dialog__lead { margin:0 0 12px; color:var(--ink); font-size:13px; font-weight:700; line-height:1.6; word-break:keep-all; }
@media (prefers-reduced-motion:reduce) { .account-choice__guest { transition:none; }.account-choice__guest:active { transform:none; } }
/* ===== 내 기록(js/deguri-mypage.js, 사용자 2026-10-04 목업) — 대표 동물 마당 + [옷장]/[기록] 탭. 세 페이지 공용이라 첫 화면 standalone.css 에만 있는 코인 칩 모양을 창 안에서 같은 값으로 다시 정한다.
   그림 캔버스는 첫 화면 standalone.css 의 canvas { width:100% } 를 이기도록 클래스로 크기를 정한다 ===== */
.mypage { display:grid; gap:12px; }.mypage-note { margin:0; color:var(--muted); font-size:13px; font-weight:700; text-align:center; word-break:keep-all; }
.account-dialog .coin-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px 4px 6px; border:2px solid var(--gold-deep); border-radius:999px; color:var(--gold-ink); background:var(--gold-soft); font:14px/1 "Jua",sans-serif; white-space:nowrap; }.account-dialog .coin-chip__icon { display:inline-block; flex:0 0 auto; width:18px; height:18px; background:url("../assets/marble/gacha/fx/gacha-coin.webp") 0 0 / 800% 100% no-repeat; }
/* 창을 내려도 마당은 머리줄(높이 64px) 바로 아래에 붙어 있다(사용자 2026-10-23 — 옷장에서 [대표로]를 누르면 위 마당이 화면 밖이라 바뀐 게 안 보였다).
   감싸개가 종이색이라 아래 내용이 그 밑으로 지나가고, 칸 말풍선(z 5)도 덮는다. 위 10px 는 마당과 머리줄 사이 틈 — 음수 여백으로 제자리 그대로.
   낮은 화면(폰 가로 등)에서는 아래 목록 칸이 너무 좁아져 붙이지 않는다 */
.mypage-pin { margin-top:-10px; padding-top:10px; background:var(--paper); }
@media (min-height:600px) { .mypage-pin { position:sticky; top:62px; z-index:6; } }
/* 대표 동물 마당 — 오른쪽 위 코인, 가구(js 가 키우기 카탈로그로 그린다, 지금은 임시 배치) 사이를 대표 동물이 걸어 다닌다(사용자 2026-10-05), 아래로 펼치는 대표 고르기.
   겹침: 바닥 가구(햇볕 자리) 1 < 뒷줄 가구 2 < 동물 3 < 앞줄 가구 4 < 코인·동작 이름 5. 동물·이름의 가로 자리(left)는 js 가 매 프레임 — 첫 프레임 전 기본값은 가운데.
   isolation: 코인의 z-index 가 창을 내릴 때 고정 머리줄 위로 올라오지 않게 */
.mypage-hero { position:relative; isolation:isolate; overflow:hidden; border:2px solid #b9d9a6; border-radius:16px; text-align:center; background:linear-gradient(rgba(232,245,235,.55),rgba(232,245,235,.55)),url("../assets/marble/stage/meadow-tile.webp") center / 192px 192px repeat,#cfe8bf; }
.mypage-yard { position:relative; height:160px; }
.mypage-coin { position:absolute; top:10px; right:10px; z-index:5; }
.mypage-avatar { position:absolute; bottom:5px; left:calc(50% - 50px); z-index:3; display:block; width:100px; height:100px; padding:0; border:0; border-radius:14px; background:none; cursor:pointer; }.mypage-avatar:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }.mypage-avatar canvas { display:block; width:100%; height:100%; }
.mypage-act { position:absolute; bottom:92px; left:50%; z-index:5; padding:2px 9px; border-radius:999px; color:#3d5a2e; background:rgba(255,253,245,.82); font:12px/1.3 "Jua",sans-serif; white-space:nowrap; pointer-events:none; transform:translateX(-50%); }.mypage-act:empty,.mypage-act[hidden] { display:none; }
.mypage-decor { position:absolute; display:block; background-repeat:no-repeat; background-position:0 0; image-rendering:pixelated; pointer-events:none; }.mypage-decor--flat { z-index:1; }.mypage-decor--back { z-index:2; }.mypage-decor--front { z-index:4; }
/* [옷장] [기록] 탭 */
.mypage-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.mypage-tab { min-height:38px; padding:6px 10px; border:2px solid var(--wood-soft); border-radius:12px; color:#7a5a30; background:var(--cream); font:16px/1.1 "Jua",sans-serif; cursor:pointer; }.mypage-tab:hover { border-color:#cfa56d; }.mypage-tab[aria-selected="true"] { border-color:var(--gold-deep); color:var(--gold-ink); background:var(--gold); box-shadow:0 2px 0 #c58f2a; }.mypage-tab:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }.mypage-panel[hidden] { display:none; }
/* [옷장] — 보유 정도 막대, 동물 칩(그림만 — 데스크톱은 창 스크롤바가 있어도 한 줄에 들도록 25px·간격 2px, 폰은 두 줄), 칩 아래 한 줄, 정렬·보유한 것만, 도감 칸 7개씩, 등급 범례 */
.mypage-coll { padding:12px 8px 10px; border:2px solid var(--wood-soft); border-radius:14px; background:var(--cream); }
.mypage-filters { position:relative; display:flex; flex-wrap:wrap; gap:2px; margin-top:10px; }
.mypage-chip { display:inline-grid; place-items:center; width:25px; height:25px; padding:0; border:2px solid var(--wood-soft); border-radius:999px; color:#5a3d1e; background:var(--paper); font:12px/1 "Jua",sans-serif; cursor:pointer; }.mypage-chip--all { width:auto; padding:0 8px; }.mypage-chip:hover { border-color:#cfa56d; background:#fff3d6; }.mypage-chip[aria-pressed="true"] { border-color:var(--gold-deep); color:var(--gold-ink); background:var(--gold); }.mypage-chip:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }.mypage-chip canvas { display:block; width:21px; height:21px; image-rendering:pixelated; }
.mypage-filter-cap { margin:6px 2px 0; color:#6e5530; font-size:12px; font-weight:800; }.mypage-filter-cap b { margin-right:4px; color:var(--ink); font:14px/1.2 "Jua",sans-serif; }
/* 닉네임(타임어택 랭킹 이름) — 이름이 있으면 한 줄 + [변경], 없으면(첫 로그인 직후) 금빛 칸으로 입력이 열려 있다(사용자 2026-10-05) */
.mypage-nick { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:10px 0 0; padding:8px 10px; border:2px solid var(--wood-soft); border-radius:12px; background:var(--paper); }
.mypage-nick.is-empty { border-color:var(--gold-deep); background:var(--gold-soft); }
.mypage-nick__label { color:#7a5a30; font:13px/1.2 "Jua",sans-serif; }
.mypage-nick__name { flex:1 1 auto; min-width:0; color:var(--ink); font:16px/1.2 "Jua",sans-serif; font-weight:400; overflow-wrap:anywhere; }
.mypage-nick__form { display:flex; flex:1 1 100%; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0; }
.mypage-nick__form .mypage-nick__label { flex:1 1 100%; }
.mypage-nick__input { flex:1 1 140px; min-width:0; padding:6px 10px; border:2px solid var(--wood-line); border-radius:10px; color:var(--ink); background:#fff; font:15px/1.2 "Jua",sans-serif; }
.mypage-nick__input:focus { outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px #ffe7a8; }
.mypage-nick__save { padding:6px 14px; border:2px solid var(--gold-deep); border-radius:999px; color:var(--gold-ink); background:var(--gold); font:14px/1.1 "Jua",sans-serif; cursor:pointer; }
.mypage-nick__edit { padding:4px 11px; border:2px solid var(--wood-line); border-radius:999px; color:#7a5a30; background:#fff; font:13px/1.1 "Jua",sans-serif; cursor:pointer; }
.mypage-nick__save:disabled,.mypage-nick__edit:disabled,.mypage-nick__input:disabled { opacity:.6; cursor:default; }
.mypage-nick__help { flex:1 1 100%; margin:0; color:var(--muted); font-size:12px; font-weight:700; line-height:1.4; word-break:keep-all; }
.mypage-nick__error { flex:1 1 100%; margin:0; color:#a33a2a; font-size:12px; font-weight:800; }
/* 쿠폰 넣기(사용자 2026-10-22) — 닉네임 줄과 같은 모양. 받으면 줄에 '코인 N개를 받았어요!' */
.mypage-coupon__done { color:var(--gold-ink); font-size:14px; }
.mypage-coupon__input { text-transform:uppercase; letter-spacing:.04em; }
.mypage-coupon__input::placeholder { text-transform:none; letter-spacing:0; }
.mypage-tools { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; }
.mypage-sort { display:inline-flex; overflow:hidden; border:2px solid var(--wood-soft); border-radius:999px; background:var(--paper); }.mypage-sort button { padding:4px 9px; border:0; color:#7a5a30; background:none; font:12px/1.2 "Jua",sans-serif; cursor:pointer; }.mypage-sort button+button { border-left:2px solid var(--wood-soft); }.mypage-sort button[aria-pressed="true"] { color:var(--gold-ink); background:var(--gold); }.mypage-sort button:focus-visible { outline:3px solid var(--gold-deep); outline-offset:-3px; }
.mypage-own { display:inline-flex; align-items:center; gap:5px; color:#6e5530; font-size:12px; font-weight:800; cursor:pointer; user-select:none; }.mypage-own input { width:16px; height:16px; margin:0; accent-color:#e0a93a; }
.mypage-gridwrap { position:relative; }.mypage-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin-top:10px; }
.mypage-cell { position:relative; display:grid; place-items:center; min-width:0; aspect-ratio:1; padding:0; border:2px solid #eadbbd; border-radius:10px; background:#fff; cursor:pointer; }.mypage-cell canvas { display:block; width:86%; height:86%; image-rendering:pixelated; }.mypage-cell.t-epic { border-color:#c9a6f2; background:#f6effe; }.mypage-cell.t-legend { border-color:#f2c14e; background:#fff6d6; }.mypage-cell.is-missing { border-style:dashed; border-color:#d9c9a4; background:#f4ecd9; }.mypage-cell.is-missing canvas { filter:brightness(0); opacity:.16; }.mypage-cell:focus-visible { outline:3px solid var(--gold-deep); outline-offset:1px; }
.mypage-badge { position:absolute; top:-6px; padding:1px 4px; border-radius:6px; font:10px/1.2 "Jua",sans-serif; pointer-events:none; }.mypage-badge--new { right:-4px; color:#fff; background:#e85d4a; }.mypage-badge--hero { left:-4px; color:var(--gold-ink); background:var(--gold); box-shadow:0 0 0 1px var(--gold-deep); }
.mypage-empty { grid-column:1/-1; margin:0; padding:14px 0; color:var(--muted); font-size:13px; font-weight:700; text-align:center; word-break:keep-all; }
/* [기록] — 이 기기 최근 경주 10판. 메달은 공용 UI 아이콘 아틀라스 칸(금메달 = 1등 당첨, 거북이 나무 메달 = 꼴등 당첨 — ?v= 는 css/standalone.css .ui-icon 과 함께 올린다) */
.mypage-games { display:grid; gap:8px; margin:0; padding:0; list-style:none; }.mypage-game { padding:9px 10px; border:2px solid var(--wood-soft); border-radius:12px; background:var(--cream); }

.mypage-medal { display:inline-block; flex:0 0 auto; width:1.2em; height:1.2em; background:url("../assets/ui/icons.webp?v=5") no-repeat 0 0 / 1000% 1000%; }.mypage-medal--first { background-position:22.2222% 0%; }.mypage-medal--last { background-position:77.7778% 100%; }

.mypage-game__top { display:flex; align-items:center; gap:5px; min-width:0; }.mypage-game__top .mypage-medal { width:22px; height:22px; }
.mypage-game__who { display:inline-flex; align-items:center; gap:3px; min-width:0; color:var(--ink); font:20px/1.2 "Jua",sans-serif; }.mypage-game__who b { font-weight:400; overflow-wrap:anywhere; }.mypage-game .mypage-game__who canvas { flex-basis:30px; width:30px; height:30px; }
.mypage-game__tag { flex:0 0 auto; padding:2px 8px; border-radius:999px; background:var(--gold); color:var(--gold-ink); font:12px/1.3 "Jua",sans-serif; box-shadow:0 2px 0 #c58f2a; }
.mypage-game__meta { margin-left:auto; flex:0 0 auto; color:var(--muted); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mypage-game__picks { display:flex; flex-wrap:wrap; align-items:center; gap:3px 0; margin:6px 0 0; padding:0; list-style:none; color:var(--ink); font-size:12px; font-weight:700; }.mypage-game__picks li { display:inline-flex; align-items:center; gap:2px; min-width:0; overflow-wrap:anywhere; }.mypage-game__picks li:not(:last-child)::after { content:"·"; margin:0 5px; color:var(--muted); }.mypage-game__picks .is-winner { color:var(--gold-ink); }.mypage-game__more { color:var(--muted); }
.mypage-game canvas { display:block; flex:0 0 22px; width:22px; height:22px; image-rendering:pixelated; }
.mypage-games__note { margin:8px 0 0; color:var(--muted); font-size:11px; font-weight:700; text-align:center; }
/* 이름 말풍선(js/deguri-mypage.js nameTip) — 내 기록 칸·칩, 첫 화면 옷장 동물 칩(웹만). 자리는 js 가 host(position:relative) 기준으로 잡고, 꼬리는 --tip-shift 만큼 옮겨 늘 가리킨 칸 위.
   마우스만 올린 말풍선은 눌리지 않고(pointer-events:none), 눌러서 고정한 말풍선(.is-pinned)만 [대표로] 버튼을 누를 수 있다 */
.name-tip { position:absolute; z-index:5; padding:6px 10px; border:2px solid var(--wood-line); border-radius:10px; color:var(--ink); background:var(--paper); box-shadow:0 3px 0 var(--wood-edge); text-align:center; white-space:nowrap; pointer-events:none; transform:translate(-50%,-100%); }.name-tip.is-below { transform:translate(-50%,0); }.name-tip.is-pinned { pointer-events:auto; }.name-tip[hidden] { display:none; }
.name-tip b { display:block; font:14px/1.2 "Jua",sans-serif; font-weight:400; }.name-tip span { display:block; color:var(--muted); font-size:11px; font-weight:800; }
.name-tip__action { display:block; margin:6px auto 0; padding:4px 12px; border:2px solid var(--gold-deep); border-radius:999px; color:var(--gold-ink); background:var(--gold); font:13px/1.1 "Jua",sans-serif; box-shadow:0 2px 0 #c58f2a; cursor:pointer; }.name-tip__action:focus-visible { outline:3px solid var(--gold-deep); outline-offset:2px; }
.name-tip::after { content:""; position:absolute; top:100%; left:calc(50% + var(--tip-shift,0px)); width:10px; height:10px; margin:-5px 0 0 -6px; border-right:2px solid var(--wood-line); border-bottom:2px solid var(--wood-line); background:var(--paper); transform:rotate(45deg); }.name-tip.is-below::after { top:auto; bottom:100%; margin:0 0 -5px -6px; transform:rotate(-135deg); }
/* 대표 고르기 — 마당의 동물을 누르면 펼친다(기본 동물 + 보유한 스킨). 칸 모양은 옷장 도감 칸과 같은 테두리·등급색 */
.mypage-picker { position:relative; margin:0 10px 10px; padding:9px 8px 8px; border:2px solid #b9d9a6; border-radius:14px; background:rgba(255,253,245,.92); }.mypage-picker[hidden] { display:none; }
.mypage-picker__title { margin:0 0 7px; color:#2f5d26; font:14px/1.2 "Jua",sans-serif; }
.mypage-picker__list { display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:5px; }
.mypage-picker__item { display:grid; place-items:center; aspect-ratio:1; padding:0; border:2px solid #eadbbd; border-radius:10px; background:#fff; cursor:pointer; }.mypage-picker__item canvas { width:86%; height:86%; image-rendering:pixelated; }
.mypage-picker__item.t-epic { border-color:#c9a6f2; background:#f6effe; }.mypage-picker__item.t-legend { border-color:#f2c14e; background:#fff6d6; }
.mypage-picker__item.is-on { border-color:#2f8a45; box-shadow:0 0 0 2px #2f8a45; }.mypage-picker__item:focus-visible { outline:3px solid var(--gold-deep); outline-offset:1px; }
.mypage-games__sum { margin:0 0 8px; color:#3d5a2e; font-size:13px; font-weight:800; text-align:center; }