:root {





  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --on-accent: #ffffff;













  --primary-fg: #2563eb;



  --success: #16a34a;  --success-fg: #14532d;  --success-bg: #dcfce7;
  --error:   #dc2626;  --error-fg:   #7f1d1d;  --error-bg:   #fee2e2;
  --warning: #d97706;  --warning-fg: #78350f;  --warning-bg: #fef3c7;














  --soc-google-bg: #ffffff;
  --soc-kakao-bg: #fee500;   --soc-kakao-fg: #3c1e1e;
  --soc-naver-bg: #03c75a;   --soc-naver-fg: #ffffff;

  --soc-g1: #ea4335;  --soc-g2: #4285f4;  --soc-g3: #fbbc05;  --soc-g4: #34a853;


  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --input-bg: #eef2f7;      
  --border: #e2e8f0;
  --control-border: #cbd5e1;
  --text: #0f172a;
  --text-muted: #64748b;





  --cert-paper: #ffffff;





  --qr-paper: #ffffff;








  --map-pin-line: #ffffff;



  --map-pin-ink: #0b1220;



  --sns-kakao: #fee500;  --sns-kakao-ink: #191919;
  --sns-naver: #03c75a;

  --scrim-strong: rgba(0, 0, 0, .55);
  --scrim-viewer: rgba(0, 0, 0, .88);
  --modal-head-bg: #f8fafc;


  --stage-bg: #111827;



  --on-stage: #ffffff;
  --on-stage-dim: #cbd5e1;









  --ink: #0b1220;
  --ink-soft: #1c2637;      
  --ink-line: #2a3446;      
  --on-ink: #ffffff;
  --on-ink-dim: #9aa7bd;    
  --paper: #f6f4f0;         
  --paper-2: #ece8e1;       
  --paper-line: #d9d3c9;



  --font-serif: "Iropke Batang", "Nanum Myeongjo", "Apple SD Gothic Neo", Georgia, serif;















  --font-round: ui-rounded, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;











  --draw-unit: 1;
  --mo-walk-step: 620ms;   
  --mo-walk-slot: 6s;      
  --mo-walk-road: 33s;     





  --fs-display: 52px;
  --fs-title: 28px;




  --sp-pull: 96px;







  --wheel-bezel: #9db3bc;   
  --wheel-cream: #fdf0dc;   
  --wheel-pin: #e0421c;     
  --wheel-stand: #fcd894;   
  --wheel-text: #3f3a34;    
  --wheel-text-dim: #8a8175;


  --wheel-bulb: #fff6d8;
  --wheel-bulb-on: #ffd34d;







  --fx-petal-a: #ffd9e6;   
  --fx-petal-b: #ff8fb1;   
  --fx-petal-c: #fff4f8;   
  --fx-glow: #fff3c4;      
  --fx-glow-2: #ffb020;    

  --wheel-a: #57cbdd;
  --wheel-b: #ee3f3a;
  --wheel-c: #f5901f;
  --wheel-d: #fbbd3f;



  --fs-1: 10px;
  --fs-2: 12px;
  --fs-3: 14px;
  --fs-4: 15px;
  --fs-5: 18px;
  --fs-hero: 32px;




















  --fs-rt-base: 1em;
























  --fs-editor: 16px;      
  --fs-editor-lg: 19px;   
  --fs-editor-sm: 13px;   
  --lh-editor: 1.7;       
  --sp-editor-p: 12px;    

  --fs-input: 16px;


  --lh-none: 1;
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;


  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;



  --sp-0: 0px;  --sp-1: 2px;  --sp-2: 4px;   --sp-3: 6px;
  --sp-4: 8px;  --sp-5: 10px; --sp-6: 12px;  --sp-7: 16px;
  --sp-8: 20px; --sp-9: 24px; --sp-10: 32px; --sp-11: 48px; --sp-12: 64px;





  --rt-pad: var(--sp-0);


  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --r-circle: 50%;












  --w-page: 1280px;
  --w-read: 560px;    






















  --w-field: 560px;
  --w-form: 360px;    

  --w-side: 300px;    
  --w-thumb: 46px;    
  --h-thumb: 34px;




  --w-place: 220px;



  --w-lead: 380px;
  --w-verify: 120px;  



  --w-find: 180px;



  --w-tile: 96px;






  --w-ops: 144px;
  --w-table-min: 760px; 

  --w-rail: 244px;


  --w-rail-mini: 52px;















  --w-drawer: min(96vw, max(900px, calc(50vw - 110px)));
  --w-phone: min(420px, 94vw);   







  --ratio-phone: 9 / 19.5;
  --w-phone-min: 340px;   
  --h-phone-max: 910px;   
  --h-phone-cap: 84dvh;   
  --w-kindmenu: 140px;   
  --w-cover: 52px;    
  --h-cover: 52px;





  --mo-fast: 120ms;        
  --mo-slow: 600ms;        











  --mo-sheet: 260ms;




  --mo-celebrate: 900ms;





  --mo-wheel-free: 30s;


  --mo-draw: 2200ms;






  --sw-hair: 1.25;    


  --sw-line: 1.5;     
  --sw-active: 2;     
  --sw-strong: 2.5;   
  --sw-dash: 4 3;     














  --z-behind: -1;
  --z-raise: 2;       
  --z-sticky: 10;     
  --z-overlay: 100;   






  --z-notice: 90;




  --z-toast: 1000;



  --tap-min: 44px;















  --safe-bottom: calc(env(safe-area-inset-bottom) + 56px);






  --h-topbar: 60px;


  --icon-btn: 32px;
  --icon-btn-sm: 24px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, .18);



  --shadow-piece: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-piece-lift: 0 8px 18px rgba(0, 0, 0, .45);
}


:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #111827;
  --surface-alt: #1f2937;
  --input-bg: #080d18;      
  --border: #1f2937;
  --control-border: #374151;
  --text: #f1f5f9;
  --text-muted: #94a3b8;


  --primary-fg: #4f81ef;
  --modal-head-bg: #111827;
  --success-bg: #052e16;  --success-fg: #bbf7d0;
  --error-bg:   #450a0a;  --error-fg:   #fecaca;
  --warning-bg: #451a03;  --warning-fg: #fde68a;


  --paper: #0f1523;
  --paper-2: #161d2c;
  --paper-line: #2a3244;
}





@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-fast: 0ms;
    --mo-slow: 0ms;
    --mo-sheet: 0ms;
    --mo-celebrate: 0ms;
    --mo-draw: 0ms;
  }
}





















body.theme-warm,
.theme-scope.theme-warm {
  --primary: #b45309;      
  --primary-fg: #b45309;
  --primary-dark: #92400e;
  --bg: #faf6f1;


  --text-muted: #5e6d83;
  --surface: #fffdf9;
  --surface-alt: #f3ece2;
  --input-bg: #f3ece2;
  --border: #e7dccb;
  --control-border: #d6c7b0;
}

[data-theme="dark"] body.theme-warm,
[data-theme="dark"] .theme-scope.theme-warm {
  --primary: #f59e0b;
  --primary-fg: #f59e0b;
  --primary-dark: #d97706;
  --on-accent: #422006;    
  --bg: #1a1410;
  --surface: #2a2018;
  --surface-alt: #3a2d20;
  --input-bg: #1a1410;
  --border: #4a3a28;
  --control-border: #5c4832;
  --text: #f5ede1;
  --text-muted: #c4b49c;
}
body.theme-kids,
.theme-scope.theme-kids {
  --primary: #7c3aed;      
  --primary-fg: #7c3aed;
  --primary-dark: #6d28d9;
  --bg: #f5f8ff;


  --text-muted: #5e6d83;
  --surface: #ffffff;
  --surface-alt: #eef2ff;
  --input-bg: #eef2ff;
  --border: #dbe4ff;
  --control-border: #c3d0fb;



  --r-md: 12px;
}
[data-theme="dark"] body.theme-kids,
[data-theme="dark"] .theme-scope.theme-kids {
  --primary: #a78bfa;
  --primary-fg: #a78bfa;
  --primary-dark: #8b5cf6;
  --on-accent: #2e1065;
  --bg: #12122a;
  --surface: #1e1b3a;
  --surface-alt: #2a2550;
  --input-bg: #12122a;
  --border: #3b3470;
  --control-border: #4c4490;
  --text: #ece9ff;
  --text-muted: #b0a8d8;
  --r-md: 12px;
}














body.sys-tour {
  --bg: #edeef0;              
  --surface: #ffffff;         
  --surface-alt: #f6f7f8;
  --input-bg: #eef0f2;      
  --border: #dee0e3;
  --control-border: #c9ccd1;
  --text: #1f2126;
  --text-muted: #5c6169;
  --primary: #9a7a3c;         
  --primary-fg: #7d6331;      
  --primary-dark: #82652f;
  --error: #b4534a;           
  --error-fg: #7a332c;
  --error-bg: #fbeceb;

  --rail-top: #31353b;
  --rail-bot: #1f2226;
  --rail-line: #3e434a;
  --rail-hi: rgba(255, 255, 255, .085);
  --on-rail: #f1f2f4;
  --on-rail-dim: #aeb3b9;
  --on-rail-faint: #7f858c;
  --rail-mark: #dcb878;       
}
[data-theme="dark"] body.sys-tour {
  --bg: #16181b;
  --surface: #1d2024;
  --surface-alt: #24272c;
  --input-bg: #141619;
  --border: #2f343a;
  --control-border: #3d434a;
  --text: #e7eaed;
  --text-muted: #98a1aa;
  --primary: #c9a45e;
  --primary-fg: #c9a45e;
  --primary-dark: #b28f4c;
  --error: #d98a80;
  --error-fg: #f0bcb6;
  --error-bg: #33211f;
  --rail-top: #22262b;
  --rail-bot: #15181b;
  --rail-line: #31363d;
  --rail-hi: rgba(255, 255, 255, .07);
  --on-rail: #eceef0;
  --on-rail-dim: #9aa1a9;
  --on-rail-faint: #6f767d;
  --rail-mark: #d3ae6d;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }









[hidden] { display: none !important; }

body {
  font-family: var(--font);
  font-size: var(--fs-4);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;







  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--primary); }


.topbar {
  display: flex; align-items: center; gap: var(--sp-6);


  height: var(--h-topbar);
  padding: 0 var(--sp-7);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar h1 {
  font-size: var(--fs-5); line-height: var(--lh-tight); margin: 0;


  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .spacer { flex: 1; }








.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }












@media (min-width: 801px) and (max-width: 1400px) {
  .shell { grid-template-columns: var(--w-rail-mini) minmax(0, 1fr); }
  .shell:not(:has(.sidenav-head)) .sidenav { padding-left: var(--sp-2); padding-right: var(--sp-2); }



  .shell:not(:has(.sidenav-head)) .sidenav-title { display: none; }
  .shell:not(:has(.sidenav-head)) .sidenav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  .shell:not(:has(.sidenav-head)) .sidenav-item .lbl,
  .shell:not(:has(.sidenav-head)) .sidenav-item .count,
  .shell:not(:has(.sidenav-head)) .sidenav-item .soon { display: none; }
  .shell:not(:has(.sidenav-head)) .sidenav-item i { font-size: var(--fs-5); width: auto; }


  body.sys-tour .sidenav-item i { display: inline-block; }
  body.sys-tour .sidenav-item { gap: 0; }
}












.shell > * { min-width: 0; }







.sidenav {
  position: sticky; top: var(--h-topbar);



  scrollbar-gutter: stable;
  padding: var(--sp-7) var(--sp-5);
  border-right: 1px solid var(--border);
  background: var(--surface);
  height: calc(100vh - var(--h-topbar));
  overflow-y: auto;
  overscroll-behavior: contain;   
}
.sidenav-group { margin-bottom: var(--sp-8); }




.sidenav { display: flex; flex-direction: column; }
.sidenav-foot {
  margin-top: auto; padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
body.sys-tour .sidenav-foot { border-top-color: var(--rail-line); }
.sidenav-title {
  font-size: var(--fs-2); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-2);
}
.sidenav-item {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-3); line-height: var(--lh-tight);
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
}
.sidenav-item:hover { background: var(--surface-alt); }
.sidenav-item.is-active { background: var(--primary); color: var(--on-accent); font-weight: var(--fw-bold); }
.sidenav-item.is-disabled { color: var(--text-muted); pointer-events: none; }
.sidenav-item .count { margin-left: auto; font-size: var(--fs-2); color: var(--text-muted); }
.sidenav-item.is-active .count { color: var(--on-accent); }
.sidenav-item .soon { margin-left: auto; font-size: var(--fs-1); color: var(--text-muted); }


.sidenav-item.is-soon .lbl { opacity: .55; }
.sidenav-item.is-soon i { opacity: .45; }
.sidenav-item i { width: var(--sp-7); text-align: center; }








body.sys-tour .sidenav {
  background: linear-gradient(180deg, var(--rail-top) 0%, var(--rail-bot) 100%);
  border-right: none;
  color: var(--on-rail);
}



body.sys-tour .sidenav-item { color: var(--on-rail-dim); }
body.sys-tour .sidenav-item:hover { background: var(--rail-hi); color: var(--on-rail); }


















body.sys-tour .sidenav-item.is-disabled { color: var(--on-rail-faint); }
body.sys-tour .sidenav-item .count,
body.sys-tour .sidenav-item .soon { color: var(--on-rail-faint); }
body.sys-tour .sidenav-item.is-active .count { color: var(--on-rail); }

body.sys-tour .sidenav-item i { display: none; }
body.sys-tour .sidenav-item { gap: 0; }



.nav-toggle { display: none; }
.topbar-where {
  display: none; font-size: var(--fs-5); font-weight: var(--fw-bold); line-height: var(--lh-tight);


  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim-strong); }






@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle { display: inline-flex; }
  .topbar h1 { display: none; }
  .topbar-where { display: block; }



  .topbar .icon-btn { position: relative; }
  .topbar .icon-btn::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--tap-min); height: var(--tap-min);
  }

  .sidenav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-overlay);
    width: 84%; max-width: var(--w-form);


    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform var(--mo-fast) ease-out;
  }
  .sidenav.is-open { transform: none; }

  body.nav-open { overflow: hidden; }


  .sidenav-item { min-height: var(--tap-min); font-size: var(--fs-4); }
}

.page { max-width: var(--w-page); margin: 0 auto; padding: var(--sp-9) var(--sp-7); }
.page-head { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-7); }
.page-head h2 { font-size: var(--fs-5); line-height: var(--lh-tight); margin: 0; }
.page-head .spacer { flex: 1; }





.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8);

  --rt-pad: var(--sp-8);

  overflow: hidden;
}


.dp-visual { width: 100%; max-height: var(--h-phone-max); object-fit: cover; border-radius: var(--r-md); }
.dp-overlay {
  position: relative; margin-top: calc(var(--sp-12) * -2); min-height: calc(var(--sp-12) * 2);
  padding: var(--sp-9); color: var(--on-stage);
  background: linear-gradient(transparent, var(--scrim-viewer)); border-radius: 0 0 var(--r-md) var(--r-md);
}
.dp-overlay b { font-size: var(--fs-5); }
.dp-overlay p { margin: var(--sp-4) 0 0; }

.muted { color: var(--text-muted); }
.meta { font-size: var(--fs-3); color: var(--text-muted); }


.gbm-err { color: var(--error-fg); font-weight: var(--fw-medium); }




.dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-7); margin-bottom: var(--sp-7); }
.stat { display: flex; flex-direction: column; gap: var(--sp-2); }
.stat-label { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }

.stat-value { font-size: var(--fs-hero); font-weight: var(--fw-heavy); line-height: var(--lh-none); font-variant-numeric: tabular-nums; }
.stat-sub { font-size: var(--fs-3); color: var(--text-muted); }

.dash-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); align-items: start; }
.dash-gap { margin-top: var(--sp-9); }


.dash-bar {



  display: grid; grid-template-columns: 18ch minmax(0, 1fr) 4ch;
  align-items: center; gap: var(--sp-5);

  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4); margin: 0 calc(-1 * var(--sp-4));
  border-radius: var(--r-md); color: var(--text); text-decoration: none;
  font-size: var(--fs-3);
}
.dash-bar:hover { background: var(--surface-alt); text-decoration: none; }
.dash-bar-label { display: flex; align-items: center; gap: var(--sp-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track { height: var(--sp-4); border-radius: var(--r-pill); background: var(--surface-alt); overflow: hidden; }

.dash-bar-fill { display: block; height: 100%; background: var(--text-muted); opacity: .28; }
.dash-bar-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }


.dash-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-5);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4); margin: 0 calc(-1 * var(--sp-4));
  border-radius: var(--r-md); color: var(--text); text-decoration: none;
}
.dash-row:hover { background: var(--surface-alt); text-decoration: none; }
.dash-row-icon { color: var(--text-muted); width: var(--sp-7); text-align: center; }
.dash-row-title { font-size: var(--fs-4); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-meta { font-size: var(--fs-3); color: var(--text-muted); font-variant-numeric: tabular-nums; }











.qc-chart { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.qc-grid { stroke: var(--border); stroke-width: var(--sw-line); }
.qc-ax { font-size: var(--fs-1); fill: var(--text-muted); }
.qc-line { fill: none; stroke: var(--primary); stroke-linejoin: round; stroke-linecap: round; }
.qc-line.is-on { stroke-width: var(--sw-active); }

.qc-line.is-off { stroke-width: var(--sw-line); opacity: .5; }
.qc-line.is-dash { stroke-dasharray: var(--sw-dash); }
.qc-dot { fill: var(--primary); }
.qc-bar { fill: var(--text-muted); opacity: .16; }
.qc-bar.is-on { opacity: .34; }
.qc-hair { stroke: var(--primary); stroke-width: var(--sw-line); opacity: .35; }


.qc-wrap { position: relative; }
.qc-tip {
  position: absolute; pointer-events: none; z-index: var(--z-raise);
  background: var(--rail-bot); color: var(--on-rail);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-2); line-height: var(--lh-normal); white-space: nowrap;
  opacity: 0; transition: opacity var(--mo-fast) ease-out;
}
.qc-tip.is-on { opacity: 1; }
.qc-tip b { color: var(--rail-mark); font-weight: var(--fw-bold); }
.qc-tip-d { font-weight: var(--fw-bold); margin-bottom: var(--sp-1); }
.qc-tip-m { color: var(--on-rail-dim); }





.qsheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }










body.sys-tour a, body.sys-quiz a,
body.sys-tour a:hover, body.sys-quiz a:hover,
body.sys-tour a:focus-visible, body.sys-quiz a:focus-visible,
body.sys-tour .cg-ben-namebtn:hover, body.sys-quiz .cg-ben-namebtn:hover,
body.sys-tour .cg-ben-namebtn:focus-visible, body.sys-quiz .cg-ben-namebtn:focus-visible {
  text-decoration: none;
}
.qsect { padding: var(--sp-9) var(--sp-8); }
.qsect + .qsect { border-top: 1px solid var(--border); }
.qsect-h {
  display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-2); font-weight: var(--fw-bold); letter-spacing: .05em;
  color: var(--text-muted); margin-bottom: var(--sp-7);
}
.qsect-h .spacer { flex: 1 1 auto; }
.qsect-note { font-weight: var(--fw-normal); letter-spacing: 0; }


.qfigs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.qfigs.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qfig {
  font: inherit; text-align: left; background: none; border: 0; color: inherit;
  padding: var(--sp-4) var(--sp-7) var(--sp-5) var(--sp-0);
  border-radius: var(--r-sm); cursor: pointer;
}
.qfig:hover { opacity: .72; }






.qfig.is-flat { cursor: default; }
.qfig.is-flat:hover { opacity: 1; }
.qfig-l { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-2); color: var(--text-muted); margin-bottom: var(--sp-3); }
.qfig-n { display: block; font-size: var(--fs-hero); font-weight: var(--fw-heavy); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.qfig-s { display: block; font-size: var(--fs-2); color: var(--text-muted); margin-top: var(--sp-3); }
.qfig-u { font-size: var(--fs-5); font-weight: var(--fw-bold); }


.qfig-dot { width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-circle); background: var(--primary); opacity: 0; }
.qfig[aria-pressed="true"] .qfig-dot { opacity: 1; }
.qfig[aria-pressed="true"] .qfig-l { color: var(--primary-fg); font-weight: var(--fw-bold); }
.qfig[aria-pressed="true"] .qfig-n { color: var(--primary-fg); }

.qfig-unread { font-size: var(--fs-3); font-weight: var(--fw-bold); color: var(--error-fg); }




.qrange { display: inline-flex; gap: var(--sp-1); background: var(--surface-alt); border-radius: var(--r-pill); padding: var(--sp-1); }
.qrange-btn {
  font-size: var(--fs-2); color: var(--text-muted); padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-pill); letter-spacing: 0; font-weight: var(--fw-normal);
}
.qrange-btn:hover { color: var(--text); }
.qrange-btn.is-on { background: var(--surface); color: var(--text); font-weight: var(--fw-bold); }


.qc-replay {
  font: inherit; font-size: var(--fs-2); background: none; border: 0; cursor: pointer;

  color: var(--primary-fg); padding: var(--sp-1) var(--sp-0);
}
.qc-replay:hover { color: var(--text); }

@media (max-width: 800px) {
  .qfigs, .qfigs.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qsect { padding: var(--sp-7) var(--sp-6); }
  .qfig-n { font-size: var(--fs-5); }
}


.dash-period { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--fs-3); color: var(--text-muted); }
.dash-period .dash-bar-track { flex: 1 1 12ch; }

.stat.is-key .stat-value { color: var(--primary); }
.stat-unit { font-size: var(--fs-5); font-weight: var(--fw-bold); }




.dash.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .dash-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) {
  .dash, .dash.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}





.card.table-wrap { padding-left: var(--sp-0); padding-right: var(--sp-0); }
.card.table-wrap > :not(table) { padding-left: var(--sp-8); padding-right: var(--sp-8); }



.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.table th, .table td {
  text-align: left;
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table th {
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }







.qt-list-acts { display: flex; gap: var(--sp-3); justify-content: flex-end; white-space: nowrap; }




.cell-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.table tbody tr.is-off td { opacity: 0.55; }

.cell-title { font-size: var(--fs-4); font-weight: var(--fw-bold); }

.cell-title a { color: inherit; text-decoration: none; }
.cell-title a:hover { color: var(--primary); }



.table .col-check { width: var(--sp-11); text-align: center; }
.table .col-type  { width: 18%; white-space: nowrap; }













.table .col-title { width: 30%; min-width: 24ch; }




.table .col-where { width: 12%; }
.table .col-num   { width: var(--sp-12); white-space: nowrap; }
.table .col-state { width: var(--sp-12); white-space: nowrap; }
.table .col-date  { white-space: nowrap; }





.btn:disabled { opacity: .45; cursor: not-allowed; }
.cell-sub { font-size: var(--fs-2); color: var(--text-muted); margin-top: var(--sp-1); }


.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2); font-weight: var(--fw-bold); line-height: var(--lh-none);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--surface-alt); color: var(--text-muted);
  white-space: nowrap;
}
.badge.is-success { background: var(--success-bg); color: var(--success-fg); }
.badge.is-warning     { background: var(--warning-bg); color: var(--warning-fg); }
.badge.is-error   { background: var(--error-bg);   color: var(--error-fg); }

.badge.is-soft      { background: var(--surface-alt); color: var(--text-muted); margin-left: var(--sp-3); }






.badge-toggle, .badge-more {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.badge-toggle:hover, .badge-more:hover { border-color: var(--control-border); }
.badge-toggle:disabled { opacity: .45; cursor: not-allowed; }


.ctx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.ctx-list li { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-3); }
.ctx-list i { color: var(--text-muted); }

.chip-toggle {
  font-size: var(--fs-2); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer;
}
.chip-toggle.is-on { border-color: var(--primary); background: var(--primary); color: var(--on-accent); }



.bn-purpose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.bn-pcard {
  display: flex; flex-direction: column; gap: var(--sp-2); text-align: left;
  padding: var(--sp-6); cursor: pointer;
  border: 1px solid var(--control-border); border-radius: var(--r-md);
  background: var(--surface); font-family: inherit;
}
.bn-pcard.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface-alt); }
.bn-pname { font-size: var(--fs-3); font-weight: var(--fw-bold); color: var(--text); }
.bn-pdesc { font-size: var(--fs-2); color: var(--text-muted); line-height: var(--lh-relaxed); }
.bn-sect {
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
  letter-spacing: .04em; margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.bn-fold {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left;
  margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-6); cursor: pointer;
  border: 1px dashed var(--control-border); border-radius: var(--r-md);
  background: var(--bg); color: var(--text-muted);
  font-family: inherit; font-size: var(--fs-3);
}
.bn-fold i { font-size: var(--fs-1); }
.bn-fold-body { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
.bn-sum {
  margin-top: var(--sp-7); padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--primary); border-radius: var(--r-md);
  background: var(--surface-alt);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.bn-sum .bn-sect { margin-top: 0; padding-top: 0; border-top: 0; color: var(--primary-fg); }
.bn-sumline { margin: 0; font-size: var(--fs-3); line-height: var(--lh-relaxed); color: var(--text); }
.bn-sumfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
@media (max-width: 700px) { .bn-purpose { grid-template-columns: repeat(1, minmax(0, 1fr)); } }










.btn.is-toggle-on {
  border-color: var(--success); background: var(--success-bg); color: var(--success-fg);
  font-weight: var(--fw-bold);
}
.btn.is-toggle-on:hover { border-color: var(--success); }




.qb-find { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-7); }
.qb-find .form-control { flex: 1 1 var(--w-find); min-width: var(--w-find); }
.qb-find .btn { flex: 0 0 auto; }





.chip-toggle.is-danger { border-color: var(--error); color: var(--error); }
.chip-toggle.is-danger.is-on { border-color: var(--error); background: var(--error); color: var(--on-accent); }



.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  white-space: nowrap;   
  font-family: inherit;
  font-size: var(--fs-4); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  padding: var(--sp-5) var(--sp-8);
  min-height: var(--tap-min);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  cursor: pointer;

  text-decoration: none;
}
.btn:hover { background: var(--surface-alt); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger  { background: var(--error); border-color: var(--error); color: var(--on-accent); }










.btn-danger:hover { background: color-mix(in srgb, var(--error) 86%, var(--text)); color: var(--on-accent); }
.btn-sm { font-size: var(--fs-3); padding: var(--sp-4) var(--sp-6); min-height: var(--sp-10); }
.btn-xs { font-size: var(--fs-2); padding: var(--sp-3) var(--sp-5); min-height: var(--sp-9); }


.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-btn); height: var(--icon-btn);
  padding: var(--sp-0);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
}





.icon-btn i { font-size: var(--fs-4); }





button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.icon-btn:hover { background: var(--surface-alt); color: var(--text); }
.icon-btn.icon-btn-sm { width: var(--icon-btn-sm); height: var(--icon-btn-sm); }
.icon-btn.is-bare { border-color: transparent; background: transparent; }
.icon-btn.is-primary { color: var(--primary); }
.icon-btn.is-danger  { color: var(--error); }


.form-label {
  display: block;
  font-size: var(--fs-2); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.form-control {
  display: block; width: 100%;



  max-width: var(--w-read);
  font-family: inherit;

  font-size: var(--fs-input);
  line-height: var(--lh-normal);
  padding: var(--sp-5) var(--sp-6);
  min-height: var(--tap-min);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);





  background: var(--input-bg); color: var(--text);
}
.form-control:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.form-row { margin-bottom: var(--sp-7); }


.jig { width: 100%; position: relative; }

.jig-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jig-board {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--stage-bg);
  border-radius: var(--r-lg);
  overflow: hidden;
  touch-action: none;          
  user-select: none;





  isolation: isolate;
}
.jig-guide {
  position: absolute; inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.jig-piece {
  position: absolute;
  background-repeat: no-repeat;
  cursor: grab;


  filter: drop-shadow(var(--shadow-piece));
}
.jig-piece.is-dragging { cursor: grabbing; filter: drop-shadow(var(--shadow-piece-lift)); }
.jig-piece.is-snapping { transition: left var(--mo-fast) ease-out, top var(--mo-fast) ease-out; }
.jig-piece.is-placed { filter: none; cursor: default; }


.jig-ghost {
  position: absolute;
  background: var(--on-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mo-fast) linear;
}
.jig-ghost.is-near { opacity: .35; }

.jig.is-solved .jig-guide { opacity: 1 !important; }


.jig-actions { display: flex; justify-content: center; margin-top: var(--sp-6); }





.fx-host { position: relative; min-height: var(--sp-12); isolation: isolate; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-raise); }
.fx-canvas { width: 100%; height: 100%; }
.fx-flash { background: var(--on-accent); opacity: 0; animation: fx-flash var(--mo-celebrate) ease-out forwards; }
@keyframes fx-flash { 0% { opacity: 0 } 12% { opacity: .55 } 100% { opacity: 0 } }

.jig .jig-board { transition: transform var(--mo-slow) ease-out; }
.jig.is-reveal .jig-board { transform: scale(1.03); }
.jig.is-reveal .jig-piece { filter: none; }



@media (prefers-reduced-motion: reduce) {
  .jig.is-reveal .jig-board { transform: none; }
}


.play { max-width: var(--w-read); margin: 0 auto; padding: var(--sp-8) var(--sp-7); }
.play.is-embed { padding: var(--sp-4); }   







@media (max-width: 640px) {
  .play { max-width: none; padding: var(--sp-5) 0; }
  .play > * { margin-left: var(--sp-5); margin-right: var(--sp-5); }
  .play > .phone-appbar { margin: 0; }
}























.cg-got.is-bleed {
  max-width: none; border-radius: 0;
  margin-left: calc(var(--sp-5) * -1); margin-right: calc(var(--sp-5) * -1);
}
@media (min-width: 641px) {
  body:not(.has-shell) .cg-got.is-bleed {
    margin-left: calc(var(--sp-7) * -1); margin-right: calc(var(--sp-7) * -1);
  }
}









body.has-shell .play {
  max-width: none; padding: 0;

  min-height: 100dvh; display: flex; flex-direction: column;
}
body.has-shell .play > * { margin-left: var(--sp-5); margin-right: var(--sp-5); }

body.has-shell .play > .phone-appbar { margin: 0; }
body.has-shell .cg-stage {
  margin-top: var(--sp-5);

  flex: 1 1 auto; align-content: start;
}




























body.has-shell .cg-stage.is-solo { align-content: safe center; }






body.has-shell .cg-stage.is-solo > *:last-child { margin-bottom: 0; }





































.cg-pc, .cg-pc-about { display: none; }
@media (min-width: 1025px), (min-width: 641px) and (pointer: fine) {
  body.cg-phone-only .play,
  body.cg-phone-only .cg-tabs,
  body.cg-phone-only .cg-banner,
  body.cg-phone-only .cg-queue,





  body.cg-phone-only .cg-sheet,
  body.cg-phone-only .cg-sheet-scrim,


  body.cg-phone-only .cg-board-bar,





  body.cg-phone-only [data-play-layer],
  body.cg-phone-only .cg-benpop { display: none !important; }
  body.cg-phone-only .cg-pc-about { display: block; }
  body.cg-phone-only .cg-pc {
    display: flex; align-items: center; justify-content: center;
    min-height: 100dvh; padding: var(--sp-8);
  }




  body.cg-phone-only .cg-try {
    display: block; min-height: 100dvh; padding: var(--sp-0);
  }
  body.cg-phone-only { background: var(--stage-bg); }
}








.cg-try { display: none; background: var(--paper); color: var(--text); }





.cg-try-head { text-align: center; padding: var(--sp-9) var(--sp-0) var(--sp-0); }
.cg-try-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: center; margin-top: var(--sp-0); margin-bottom: var(--sp-9);
}
.cg-try-chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-7); border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-2); color: var(--text-muted);
}






.cg-try-stage {
  display: grid; grid-template-columns: auto 1fr;

  gap: var(--sp-10); align-items: start;
}







.cg-try-side { min-width: 0; }

.cg-try-phone-col { position: sticky; top: var(--sp-8); }


.cg-try-phone.phone-frame.is-fit-h { max-height: 40rem; }





.cg-try-phone {
  position: relative;
  border: var(--sp-2) solid var(--stage-bg); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-modal);
}
.cg-try-screen {
  width: 100%; height: 100%; overflow: hidden;
  border-radius: var(--r-md); background: var(--surface);
}
.cg-try-frame { width: 100%; height: 100%; border: 0; display: block; }

















body.cg-in-frame { scrollbar-width: none; -ms-overflow-style: none; }
body.cg-in-frame::-webkit-scrollbar,
body.cg-in-frame *::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.cg-phone-only:not(.cg-in-frame),
body.st-neon:not(.cg-in-frame) { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body.cg-phone-only:not(.cg-in-frame)::-webkit-scrollbar,
body.st-neon:not(.cg-in-frame)::-webkit-scrollbar { width: var(--sp-4); height: var(--sp-4); }
body.cg-phone-only:not(.cg-in-frame)::-webkit-scrollbar-track,
body.st-neon:not(.cg-in-frame)::-webkit-scrollbar-track { background: transparent; }
body.cg-phone-only:not(.cg-in-frame)::-webkit-scrollbar-thumb,
body.st-neon:not(.cg-in-frame)::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: var(--r-pill);
}
.cg-try-note {
  text-align: center; margin: var(--sp-6) var(--sp-0) 0;
  font-size: var(--fs-2); color: var(--text-muted);
}

.cg-try-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-8);
}
.cg-try-top {
  display: flex; flex-wrap: wrap; gap: var(--sp-8);
  align-items: flex-start; justify-content: space-between;
}
.cg-try-top h2 { font-size: var(--fs-4); margin: 0; }
.cg-try-sub { font-size: var(--fs-2); color: var(--text-muted); margin: var(--sp-2) 0 0; }
.cg-try-stats { display: flex; gap: var(--sp-8); }
.cg-try-stat { text-align: right; }
.cg-try-stat b {
  display: block; font-size: var(--fs-4); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; color: var(--primary);
}
.cg-try-stat span { font-size: var(--fs-1); color: var(--text-muted); }

.cg-try-map { margin-top: var(--sp-8); }




.cg-try-kmap {
  width: 100%; aspect-ratio: 16 / 9; min-height: 12rem; max-height: 24rem;
  border-radius: var(--r-md); overflow: hidden; background: var(--surface-alt);
}



.cg-try-fallback[hidden] { display: none; }
.cg-try-svg { width: 100%; height: auto; max-height: 24rem; display: block; }


.cg-try-grid { stroke: var(--border); stroke-width: var(--sw-line); opacity: .35; }


.cg-try-leg {
  stroke: var(--border); stroke-width: var(--sw-active);
  stroke-dasharray: var(--sw-dash); stroke-linecap: round;
}
.cg-try-leg.is-done { stroke: var(--primary); stroke-dasharray: none; }
.cg-try-node circle { fill: var(--surface-alt); stroke: var(--border); stroke-width: var(--sw-line); }
.cg-try-node.is-done circle { fill: var(--primary); stroke: var(--primary); }
.cg-try-node.is-now circle { fill: var(--warning-bg); stroke: var(--warning-fg); stroke-width: var(--sw-strong); }
.cg-try-num { font-size: var(--fs-2); font-weight: var(--fw-bold); fill: var(--text-muted); }
.cg-try-node.is-done .cg-try-num { fill: var(--on-accent); }
.cg-try-node.is-now .cg-try-num { fill: var(--warning-fg); }
.cg-try-name { font-size: var(--fs-1); fill: var(--text-muted); }

.cg-try-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-8);
  margin-top: var(--sp-6); font-size: var(--fs-1); color: var(--text-muted);
}
.cg-try-legend div { display: inline-flex; align-items: center; gap: var(--sp-3); }
.cg-try-dot {
  width: var(--sp-5); height: var(--sp-5); border-radius: var(--r-pill);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.cg-try-dot.is-done { background: var(--primary); border-color: var(--primary); }
.cg-try-dot.is-now { background: var(--warning-bg); border-color: var(--warning-fg); }

.cg-try-placehead {
  display: flex; align-items: baseline; gap: var(--sp-6);
  margin: var(--sp-10) var(--sp-0) var(--sp-6);
}
.cg-try-placehead h3 { font-size: var(--fs-4); margin: 0; }


.cg-try-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--w-tile);
  gap: var(--sp-6); overflow-x: auto; padding-bottom: var(--sp-5);
}
.cg-try-place { position: relative; min-width: 0; }
.cg-try-place-art {
  aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
}
.cg-try-place-art img { width: 100%; height: 100%; object-fit: cover; }
.cg-try-place-art.is-empty i { color: var(--text-muted); font-size: var(--fs-5); }
.cg-try-place-no {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  min-width: var(--sp-9); text-align: center;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--scrim-strong); color: var(--on-accent);
  font-size: var(--fs-1); font-weight: var(--fw-bold);
}
.cg-try-place.is-now .cg-try-place-art { outline: var(--sp-1) solid var(--warning-fg); }
.cg-try-place-t {
  margin-top: var(--sp-4); font-size: var(--fs-2); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-try-place.is-done .cg-try-place-t { color: var(--text); }



@media (min-width: 641px) and (max-width: 1023px) {
  .cg-try-stage { grid-template-columns: 1fr; justify-items: center; }
  .cg-try-phone-col { position: static; width: var(--w-phone); max-width: 100%; }
  .cg-try-side { width: 100%; }
}





.cg-pc-about { max-width: var(--w-read); margin: var(--sp-8) auto 0; text-align: left; }
.cg-pc-h { font-size: var(--fs-5); margin: 0 0 var(--sp-3); }
.cg-pc-desc { margin: 0 0 var(--sp-5); color: var(--text-muted); line-height: var(--lh-relaxed); white-space: pre-wrap; }
.cg-pc-rate { margin: 0 0 var(--sp-5); font-size: var(--fs-3); }
.cg-pc-stars { color: var(--warning); letter-spacing: 1px; }
.cg-pc-reviews { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cg-pc-review { padding: var(--sp-5) 0; border-bottom: 1px solid var(--border); }
.cg-pc-review:last-child { border-bottom: 0; }
.cg-pc-review p { margin: var(--sp-2) 0 0; line-height: var(--lh-relaxed); white-space: pre-wrap; word-break: break-word; }
.cg-pc-review .meta { margin-left: var(--sp-3); }
.cg-pc-card {
  width: var(--w-phone); max-width: 100%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-9); text-align: center;
}
.cg-pc-lead { font-size: var(--fs-5); font-weight: var(--fw-bold); margin: 0 0 var(--sp-4); }
.cg-pc-card .meta { margin: 0 0 var(--sp-8); }

.cg-pc-qr { display: flex; justify-content: center; margin-bottom: var(--sp-6); }
.cg-pc-qr canvas, .cg-pc-qr img { display: block; }

.cg-pc-url {
  font-size: var(--fs-3); color: var(--text-muted);
  margin: 0 0 var(--sp-6); word-break: break-all;
}





.cg-code-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cg-code-row .form-control { flex: 1 1 var(--w-code, 8rem); min-width: 0; }
.cg-code-pre {
  font-size: var(--fs-3); color: var(--text-muted); white-space: nowrap;

  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.play-title { font-size: var(--fs-5); margin: 0 0 var(--sp-4); }

.play-title.is-hidden { display: none; }









.play-prompt { font-size: var(--fs-editor); line-height: var(--lh-editor); margin: 0 0 var(--sp-7); }








.play-outro { margin: var(--sp-7) 0; }

.w-jigsaw-off { color: var(--error-fg); font-size: var(--fs-3); text-align: center; margin: var(--sp-7) 0; }



.share-card { margin-bottom: var(--sp-8); }
.share-card h3 { font-size: var(--fs-5); margin: 0 0 var(--sp-3); }
.share-row { display: flex; gap: var(--sp-4); align-items: center; margin: var(--sp-4) 0 var(--sp-7); }
.share-row .form-control { flex: 1; }
.share-snippet { font-size: var(--fs-3); line-height: var(--lh-normal); resize: vertical; }
.share-pre {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-6); font-size: var(--fs-3); overflow-x: auto; margin: var(--sp-4) 0 var(--sp-7);
}




.qm-mode-switch { margin: 0 0 var(--sp-7); }
.qm-mode-switch a { display: inline-block; margin-top: var(--sp-5); }


.maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: start; }

.maker-preview { position: sticky; top: var(--sp-9); }

.pv-frame {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); overflow: hidden;
  margin-bottom: var(--sp-5);
}
.pv-frame .play { padding: var(--sp-6); }
.maker-preview h3 { font-size: var(--fs-2); color: var(--text-muted); margin: 0 0 var(--sp-6); }
.drop {
  border: 2px dashed var(--control-border);
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-7);
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
}
.drop:hover, .drop.is-over { border-color: var(--primary); color: var(--primary); }
.drop i { font-size: var(--fs-5); display: block; margin-bottom: var(--sp-4); }
.pieces-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }



@media (max-width: 1000px) {
  .maker { grid-template-columns: 1fr; }
  .maker-preview { position: static; }
}





.std-modal {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-7);
  background: var(--scrim-strong);
}
.std-modal-box {
  width: 100%; max-width: var(--w-read);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.std-modal-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8);
  background: var(--modal-head-bg);
  border-bottom: 1px solid var(--border);
}
.std-modal-head .spacer { flex: 1; }
.std-modal-title { font-size: var(--fs-5); font-weight: var(--fw-bold); line-height: var(--lh-tight); }



.std-modal-sub {
  flex-basis: 100%;
  font-size: var(--fs-2); color: var(--text-muted); line-height: var(--lh-tight);
  margin-top: var(--sp-0);
}


.std-modal-head > i { color: var(--primary); }

.std-modal-body { padding: var(--sp-8); overflow-y: auto; }



.std-modal-foot {
  position: sticky; bottom: calc(var(--sp-8) * -1);
  margin: var(--sp-7) calc(var(--sp-8) * -1) calc(var(--sp-8) * -1);
  padding: var(--sp-6) var(--sp-8);
  background: var(--modal-head-bg); border-top: 1px solid var(--border);
}
.std-modal-body > :last-child { margin-bottom: var(--sp-0); }




.help-doc h4 {
  margin: var(--sp-8) var(--sp-0) var(--sp-4);
  font-size: var(--fs-3); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  color: var(--text-muted);
}
.help-doc h4:first-child { margin-top: var(--sp-0); }
.help-doc p { margin: var(--sp-0) var(--sp-0) var(--sp-5); line-height: var(--lh-relaxed); }
.help-doc ol, .help-doc ul { margin: var(--sp-0) var(--sp-0) var(--sp-5); padding-left: var(--sp-8); }
.help-doc li { margin-bottom: var(--sp-3); line-height: var(--lh-relaxed); }
.help-doc > :last-child { margin-bottom: var(--sp-0); }






.std-viewer {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-7);
  background: var(--scrim-viewer);
}
.std-viewer img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--r-md);
  object-fit: contain;
}
.std-viewer-close {
  position: absolute; top: var(--sp-7); right: var(--sp-7);
  border-radius: var(--r-circle);
}

.is-zoomable { cursor: zoom-in; }






.std-modal-box.is-frame { height: 100%; }




.std-modal-box.is-frame.is-wide { max-width: var(--w-page); }



.std-modal-box:has(.gbm-edit) { max-width: var(--w-page); }

.std-modal-box.is-frame iframe { flex: 1; width: 100%; border: 0; display: block; background: var(--bg); }


.empty { padding: var(--sp-11) var(--sp-7); text-align: center; color: var(--text-muted); }
.empty h3 { font-size: var(--fs-5); color: var(--text); margin: 0 0 var(--sp-4); }
.empty p { margin: 0 0 var(--sp-8); }


.notice {
  padding: var(--sp-6) var(--sp-7);
  --rt-pad: var(--sp-7);
  overflow: hidden;
  border-radius: var(--r-md);
  font-size: var(--fs-3);
  margin-bottom: var(--sp-7);
}

























.notice.is-guide {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  color: var(--text);




  font-size: var(--fs-editor);
  line-height: var(--lh-editor);
}

.notice.is-guide p { margin: 0 0 var(--sp-editor-p); }
.notice.is-guide p:last-child { margin-bottom: 0; }
.notice.is-guide::before {
  content: "\f05a  안내사항";
  display: block;
  font-family: "Font Awesome 6 Free", var(--font);
  font-weight: 900;
  font-size: var(--fs-4);
  color: var(--text);
  margin-bottom: var(--sp-5);
}
.notice.is-guide > :last-child { margin-bottom: 0; }

.notice.is-guide ul { margin: 0; padding-left: var(--sp-8); }
.notice.is-guide li { margin-bottom: var(--sp-3); }
.notice.is-guide li:last-child { margin-bottom: 0; }
.notice.is-error   { background: var(--error-bg);   color: var(--error-fg); }
.notice.is-warning { background: var(--warning-bg); color: var(--warning-fg); }
.notice.is-success { background: var(--success-bg); color: var(--success-fg); }










.is-acting { pointer-events: none; }
.is-acting > i:first-child { animation: qt-spin var(--mo-slow) linear infinite; }
















.is-acted { position: relative; }
.is-acted::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;             
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--success), 0 0 var(--sp-6) var(--success);
  animation: qt-glow var(--mo-slow) ease-out forwards;
}
@keyframes qt-spin { to { transform: rotate(360deg); } }




.qt-working {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--scrim-strong);
  display: grid; place-items: center;
  padding: var(--sp-7);
}
.qt-working-box {
  display: flex; align-items: center; gap: var(--sp-5);
  max-width: var(--w-read);
  background: var(--surface); color: var(--text);
  border-radius: var(--r-md); box-shadow: var(--shadow-modal);
  padding: var(--sp-7) var(--sp-9);
  font-size: var(--fs-3); font-weight: var(--fw-bold);
}
.qt-working-txt { line-height: var(--lh-normal); }
.qt-working-spin { animation: qt-spin var(--mo-slow) linear infinite; }
@media (prefers-reduced-motion: reduce) { .qt-working-spin { animation: none; } }
@keyframes qt-glow { 0% { opacity: 0 } 25% { opacity: 1 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .is-acting > i:first-child { animation: none; }

  .is-acted::after { animation: none; box-shadow: 0 0 0 2px var(--success); }
}

.toast-host {


  position: fixed; z-index: var(--z-toast);
  right: var(--sp-7); bottom: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-4);
  max-width: var(--w-form);
  pointer-events: none;               
}





.toast {
  pointer-events: auto; cursor: pointer;   
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-md);
  font-size: var(--fs-3); line-height: var(--lh-normal);
  box-shadow: var(--shadow-modal);
  background: var(--surface); color: var(--text);
  opacity: 0; transform: translateY(var(--sp-7));
  transition: opacity var(--mo-fast) ease-out, transform var(--mo-fast) ease-out;
}
.toast.is-on { opacity: 1; transform: translateY(0); }
.toast.is-error   { background: var(--error-bg);   color: var(--error-fg); }
.toast.is-warning { background: var(--warning-bg); color: var(--warning-fg); }
.toast.is-success { background: var(--success-bg); color: var(--success-fg); }
.toast.is-out { opacity: 0; transform: translateY(var(--sp-4)); }

@media (max-width: 640px) {
  .toast-host { left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); max-width: none; }
}


.tab-bar {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-8);
}
.tab-btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-4); font-weight: var(--fw-medium); line-height: var(--lh-tight);
  color: var(--text-muted); text-decoration: none;
  padding: var(--sp-5) var(--sp-7);
  border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
}
.tab-btn.active,
.tab-btn.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--fw-bold); }







.card-title {
  font-size: var(--fs-4); font-weight: var(--fw-bold);
  margin: var(--sp-7) 0 var(--sp-4);
}
.card-title:first-child { margin-top: 0; }


.form-grid-2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2) var(--sp-7);
}
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }
.form-actions { margin-top: var(--sp-7); display: flex; justify-content: flex-end; }
.chip-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-4) 0; }


.mb-bulk { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin: var(--sp-5) 0; }
.mb-bulk .form-control { width: auto; flex: 1 1 auto; }


.mb-holds { margin-top: var(--sp-5); }
.mb-hold + .mb-hold { margin-top: var(--sp-4); }
.mb-hold-list { margin: var(--sp-2) 0 0; padding-left: var(--sp-7); }
.mb-hold-list li { line-height: var(--lh-relaxed); }
.mb-hold-key { word-break: break-all; color: var(--text-muted); }


.form-label + .chip-row { margin-top: var(--sp-0); }


.form-label + .fx-host > .chip-row { margin: var(--sp-0); }
.test-mail-row { display: flex; gap: var(--sp-4); align-items: center; max-width: var(--w-read); }


.dr-grid {
  display: grid; grid-template-columns: auto auto auto 1fr;
  gap: var(--sp-3) var(--sp-8); align-items: center;
  margin-top: var(--sp-6);
}
.dr-section {
  grid-column: 1 / -1;
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-6) 0 var(--sp-2);
}
.dr-key  { font-size: var(--fs-3); font-family: monospace; }
.dr-val  { font-size: var(--fs-2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dr-demo { line-height: var(--lh-none); }
.dr-role { font-size: var(--fs-2); color: var(--text-muted); }

.dr-swatch {
  display: inline-block; width: var(--sp-8); height: var(--sp-8);
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--v);
}
.dr-sample { white-space: nowrap; font-size: var(--v); }


.pending-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin: var(--sp-6) 0;
}
.pending-item { margin: 0; }
.pending-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-alt);
}
.pending-item figcaption { margin-top: var(--sp-2); }



.w-prompt-img {
  width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface-alt);
  margin-bottom: var(--sp-7);
}




.w-dlg-log { display: flex; flex-direction: column; gap: var(--sp-4); }
.w-dlg-row { display: flex; }



@keyframes w-dlg-in {
  from { opacity: 0; transform: translateY(var(--sp-4)) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.w-dlg-row.is-in { animation: w-dlg-in var(--mo-fast) ease-out both; }

.w-dlg-acts > * { animation: w-dlg-in var(--mo-fast) ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .w-dlg-row.is-in, .w-dlg-acts > * { animation: none; }
}
.w-dlg-row.is-me { justify-content: flex-end; }
.w-dlg-bub {




  max-width: 78%;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);





  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--text);

  border-bottom-left-radius: var(--r-sm);
}
.w-dlg-row.is-me .w-dlg-bub {
  background: var(--surface-alt); color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-sm);
  font-weight: var(--fw-medium);
}
.w-dlg-who {
  display: block; font-size: var(--fs-2); font-weight: var(--fw-bold);
  line-height: var(--lh-none); margin-bottom: var(--sp-3);
  color: var(--text-muted);
}



.w-dlg-text { margin: 0; font-size: var(--fs-4); line-height: var(--lh-relaxed); }



.w-dlg-cue {
  align-self: flex-end;
  font-size: var(--fs-2); color: var(--text-muted); font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}

.w-dlg-acts {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--sp-4); margin-top: var(--sp-6);
}


.w-dlg-choice, .w-dlg-next {
  max-width: 85%; min-height: var(--tap-min);
  padding: var(--sp-5) var(--sp-6);
  font-family: inherit; font-size: var(--fs-4); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); text-align: center;
  border-radius: var(--r-lg); cursor: pointer;
}
.w-dlg-choice {
  border: 1.5px solid var(--primary); background: var(--surface); color: var(--primary);
}
.w-dlg-next { border: 0; background: var(--primary); color: var(--on-accent); }


.w-dlg-typing { display: inline-flex; align-items: center; gap: var(--sp-2); }
.w-dlg-typing i {
  width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-circle);
  background: currentColor; opacity: .35;


  animation: w-dlg-dot var(--mo-slow) infinite ease-in-out;
}
.w-dlg-typing i:nth-child(2) { animation-delay: calc(var(--mo-slow) * 0.2); }
.w-dlg-typing i:nth-child(3) { animation-delay: calc(var(--mo-slow) * 0.4); }
@keyframes w-dlg-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: .9; transform: translateY(calc(var(--sp-2) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .w-dlg-typing i { animation: none; opacity: .5; }
}
.w-dlg-clue {
  margin-top: var(--sp-7); padding: var(--sp-6);
  border-radius: var(--r-lg); border: 1px solid var(--success);
  background: var(--success-bg); color: var(--success-fg);
}
.w-dlg-clue-k {
  display: block; font-size: var(--fs-2); font-weight: var(--fw-bold);
  line-height: var(--lh-none); margin-bottom: var(--sp-3);
}

.w-dlg-clue-t { font-size: var(--fs-5); font-weight: var(--fw-heavy); line-height: var(--lh-tight); }

.w-choice-list { display: flex; flex-direction: column; gap: var(--sp-4); }


.w-choice-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4);
}
.w-choice {
  font-family: inherit; font-size: var(--fs-input); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); text-align: left;
  padding: var(--sp-6); min-height: var(--tap-min);
  border: 1px solid var(--control-border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start;
}
.w-choice img { width: 100%; border-radius: var(--r-md); }



.w-choice.is-view { cursor: default; }
.w-choice.is-view:active { transform: none; }





.w-choice.has-media {
  border-color: transparent; background: transparent; padding: var(--sp-0);
}
.w-choice.has-media img { border-radius: var(--r-lg); }
.w-choice.is-on { border-color: var(--primary); outline: 2px solid var(--primary); }
.w-text { margin-bottom: var(--sp-5); }
.w-submit { width: 100%; margin-top: var(--sp-6); }




.w-submit:disabled { opacity: 1; }



.w-spots { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border); }
.w-spots-img { width: 100%; display: block; }








.w-spot {
  position: absolute; transform: translate(-50%, -50%);
  width: var(--sp-9); height: var(--sp-9);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--on-stage); border-radius: var(--r-circle);
  background: var(--scrim-strong); color: var(--on-stage);
  font-size: var(--fs-2); font-weight: var(--fw-bold);
  cursor: pointer; padding: 0;
}



.w-spot::after {
  content: ''; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-circle);
}
.w-spots-count { margin-top: var(--sp-3); }
.qm-spots { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--border); cursor: crosshair; }
.qm-spots img { width: 100%; display: block; }
.qm-spot {
  position: absolute; transform: translate(-50%, -50%);
  border: 2px dashed var(--primary); border-radius: var(--r-circle);
  background: transparent; cursor: pointer; padding: 0;
}




.w-grid { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.w-grid-img { width: 100%; display: block; }
.w-grid-cells { position: absolute; display: grid; }   
.w-grid-cell {
  border: 0; background-color: transparent; padding: 0; cursor: pointer;
  background-repeat: no-repeat;                 
  opacity: 0; transition: opacity var(--mo-fast);
}











.w-grid-cell.is-on { opacity: var(--pick-a, .45); }



.w-grid-cell:focus-visible { opacity: var(--pick-a, .45); }
.w-grid-count { margin-top: var(--sp-3); }


.qm-grid { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.qm-grid img { width: 100%; display: block; }
.qm-grid-cells { position: absolute; display: grid; box-shadow: 0 0 0 2px var(--primary); cursor: move; touch-action: none; }

.qm-grid-handle {
  position: absolute; right: 0; bottom: 0; width: var(--tap-min); height: var(--tap-min);
  transform: translate(40%, 40%); border-radius: var(--r-circle);
  background: var(--primary); border: 2px solid var(--on-accent); cursor: nwse-resize;
}
.qm-grid-cell {
  border: 1px dashed var(--on-accent); background: transparent; padding: var(--sp-1); cursor: pointer;
  color: var(--on-accent); font-size: var(--fs-1); font-weight: var(--fw-bold);
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.qm-grid-cell.is-on { background: var(--primary); border-style: solid; opacity: .72; }
.qm-grid-size { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.qm-grid-size .form-control { width: 5rem; }
.qm-pick { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.qm-pick-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); }


.qm-pick-a { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.qm-pick-a input[type="range"] { flex: 1 1 auto; min-width: 0; }
.qm-pick-a b { flex: 0 0 auto; width: var(--sp-11); text-align: right; font-variant-numeric: tabular-nums; }


.w-scratch {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--border);
}
.w-scratch-img { width: 100%; display: block; }
.w-scratch-cover {
  position: absolute; inset: 0;
  touch-action: none; cursor: crosshair;
  --cover: var(--surface-alt);
  color: var(--text-muted);
  font-size: var(--fs-5); font-weight: var(--fw-bold);
  transition: opacity var(--mo-slow);
}
.w-scratch-cover.is-done { opacity: 0; pointer-events: none; }


.gb-gate { display: flex; flex-direction: column; gap: var(--sp-4); }
.gb-gate-prompt { font-size: var(--fs-5); line-height: var(--lh-relaxed); margin: 0; }
.gbm-gate { display: flex; flex-direction: column; gap: var(--sp-3); }
.gbm-flag { max-width: 12ch; }


.set-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.set-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6); min-height: var(--tap-min);
  border: 1px solid var(--control-border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); text-decoration: none;
}
.set-item.is-solved { border-color: var(--success); }
.set-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.set-item .badge { flex: none; }


.w-ar-cam {
  overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.w-ar-cam video { width: 100%; display: block; }
.w-ar-clue-img { max-width: 100%; border-radius: var(--r-md); margin-bottom: var(--sp-4); }


.w-photo-hint { font-size: var(--fs-5); line-height: var(--lh-relaxed); margin: 0 0 var(--sp-6); text-align: center; }
.w-photo-view { margin-bottom: var(--sp-6); }
.w-photo-shot {
  width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--success); background: var(--surface-alt);
}

.w-photo-cap { width: 100%; margin-bottom: var(--sp-6); font-size: var(--fs-input); }


.w-read-text {
  font-size: var(--fs-5); line-height: var(--lh-relaxed); font-weight: var(--fw-bold);
  padding: var(--sp-8); margin: 0 0 var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.w-read-rule { font-size: var(--fs-3); color: var(--text-muted); margin: 0 0 var(--sp-6); }
.w-read-player { width: 100%; margin-bottom: var(--sp-6); }
.w-read-acts { display: flex; flex-direction: column; gap: var(--sp-3); }


.w-order-thumb {
  flex: none; width: var(--sp-12); height: var(--sp-12);
  object-fit: cover; border-radius: var(--r-md);
}

.w-ar-clue {
  text-align: center; padding: var(--sp-7);
  border: 1px solid var(--success); border-radius: var(--r-lg);
  background: var(--success-bg); color: var(--success-fg);
  font-size: var(--fs-5); font-weight: var(--fw-heavy);
  margin-bottom: var(--sp-6);
}






.rf-wheel {
  position: relative;
  width: 100%; max-width: 32ch; aspect-ratio: 220 / 264;
  margin: 0 auto var(--sp-7);
}
.rf-wheel-svg { width: 100%; height: 100%; display: block; }








.rf-wheel-spin {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform calc(var(--mo-celebrate) * 5) cubic-bezier(.16, .84, .3, 1);
}




.rf-wheel-spin.is-free { transition: transform var(--mo-wheel-free) linear; }
.rf-wheel-bezel { fill: var(--wheel-bezel); }




.cg-wheel-go {
  position: absolute; left: 50%; top: 41.7%;      
  transform: translate(-50%, -50%);
  min-width: 4.5rem; min-height: 4.5rem; border-radius: var(--r-circle);

  border: var(--sp-1) solid var(--wheel-bulb);


  background: var(--wheel-pin); color: var(--wheel-bulb);

  font-size: var(--fs-2); line-height: var(--lh-tight); font-weight: var(--fw-heavy);
  box-shadow: var(--shadow-modal); cursor: pointer;
  display: grid; place-items: center; padding: var(--sp-2);
  transition: transform var(--mo-fast) ease-out;
}
.cg-wheel-go:active { transform: translate(-50%, -50%) scale(.94); }
.cg-wheel-go:disabled { opacity: .55; cursor: default; }







.rf-bulb { fill: var(--wheel-bulb); }
.rf-wheel-svg.is-spinning .rf-bulb {
  animation: rf-bulb var(--mo-slow) linear infinite;
  animation-delay: calc(var(--i) / var(--n) * var(--mo-slow) * -1);
}
@keyframes rf-bulb {
  0%, 55% { fill: var(--wheel-bulb); }
  15%     { fill: var(--wheel-bulb-on); }
}


.rf-wheel-pin-g { transform-box: fill-box; transform-origin: top center; }
.rf-wheel-svg.is-spinning .rf-wheel-pin-g {

  animation: rf-pin var(--tick, var(--mo-fast)) ease-out infinite;
}
@keyframes rf-pin {
  0%   { transform: rotate(0deg); }
  35%  { transform: rotate(11deg); }
  100% { transform: rotate(0deg); }
}




.rf-slice.is-hit { animation: rf-hit var(--mo-celebrate) ease-out 3; }
@keyframes rf-hit {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
.rf-wheel-svg.is-landed { animation: rf-land var(--mo-celebrate) ease-out 1; }
@keyframes rf-land {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.rf-wheel-stand { fill: var(--wheel-stand); }
.rf-wheel-pin { fill: var(--wheel-pin); }
.rf-slice-bg { fill: var(--wheel-cream); }
.rf-slice-bg.is-tone0 { fill: var(--wheel-a); }
.rf-slice-bg.is-tone1 { fill: var(--wheel-b); }
.rf-slice-bg.is-tone2 { fill: var(--wheel-c); }
.rf-slice-bg.is-tone3 { fill: var(--wheel-d); }
.rf-slice-line { fill: none; stroke: var(--wheel-cream); stroke-width: var(--sw-line); }
.rf-wheel-rim { fill: none; stroke: var(--wheel-bezel); stroke-width: var(--sw-strong); }
.rf-wheel-hub { fill: var(--wheel-cream); stroke: var(--wheel-bezel); stroke-width: var(--sw-line); }


.rf-slice-text {
  font-size: var(--fs-2); font-weight: var(--fw-bold);
  fill: var(--wheel-text); text-anchor: middle; dominant-baseline: middle;
}
.rf-slice.is-miss .rf-slice-text { fill: var(--wheel-text-dim); }

.rf-wheel-note { text-align: center; margin: calc(var(--sp-6) * -1) 0 var(--sp-7); }
.rf-result {
  text-align: center; padding: var(--sp-7);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  margin: var(--sp-6) 0;
}
.rf-result.is-win { border-color: var(--success); background: var(--success-bg); }
.rf-result-label { font-size: var(--fs-5); font-weight: var(--fw-heavy); }
.rf-code {
  font-size: var(--fs-5); font-weight: var(--fw-bold);
  letter-spacing: 0.2ch; margin-top: var(--sp-4);
}
.rf-odds { margin-top: var(--sp-8); }
.rf-odds-list { margin: var(--sp-3) 0 0; padding-left: var(--sp-8); font-size: var(--fs-3); }
.rf-odds-list li { margin-bottom: var(--sp-2); }

.rf-num { max-width: 9ch; }






.w-clock { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.w-clock-head { display: flex; align-items: center; gap: var(--sp-2); }
.w-clock-num {
  width: 3ch; text-align: center;


  font-family: inherit; font-size: var(--fs-5); font-weight: var(--fw-heavy);
  line-height: var(--lh-none); color: var(--text);
  background: var(--surface); border: 1px solid var(--control-border);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-2);
}
.w-clock-sep { font-size: var(--fs-5); font-weight: var(--fw-heavy); color: var(--text); }
.w-clock-ampm { display: flex; gap: var(--sp-3); }
.w-clock-chip {
  font-family: inherit; font-size: var(--fs-3); font-weight: var(--fw-bold);
  min-height: var(--tap-min); padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--control-border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.w-clock-chip.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.w-clock-face { width: 100%; max-width: 17rem; aspect-ratio: 1; touch-action: none; cursor: grab; }
.w-clock-dial { fill: var(--surface); stroke: var(--control-border); stroke-width: var(--sw-active); }
.w-clock-tick { stroke: var(--text-muted); stroke-width: var(--sw-line); opacity: .5; }
.w-clock-tick.is-big { stroke: var(--text); stroke-width: var(--sw-strong); opacity: 1; }
.w-clock-hour-num {
  fill: var(--text); font-size: var(--fs-4); font-weight: var(--fw-bold);
  text-anchor: middle; dominant-baseline: central;
}


.w-clock-hand { stroke-linecap: round; }
.w-clock-hand.is-hour { stroke: var(--text); stroke-width: calc(var(--sw-strong) * 2.8); }
.w-clock-hand.is-min { stroke: var(--primary); stroke-width: calc(var(--sw-strong) * 1.6); }
.w-clock-pin { fill: var(--primary); }









.w-dials { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.w-dial-col {
  display: flex; flex-direction: column; gap: var(--sp-3); align-items: stretch;
  flex: 1 1 0; min-width: var(--tap-min);
}
.w-dial-num {
  text-align: center;
  font-size: var(--fs-5); font-weight: var(--fw-bold);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--control-border); border-radius: var(--r-md);
  background: var(--surface);
}




.w-code-tools { display: flex; gap: var(--sp-4); justify-content: center; margin-bottom: var(--sp-4); }
.w-code-tools .w-key { min-width: var(--sp-12); }


.w-wheel { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.w-wheel .w-key { min-width: var(--sp-12); }
.w-wheel-face {
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--control-border); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-3) var(--sp-9);
  overflow: hidden;
}
.w-wheel-cur { font-size: var(--fs-hero); font-weight: var(--fw-heavy); line-height: var(--lh-tight); }



.w-wheel-side { font-size: var(--fs-2); color: var(--text-muted); }
.w-wheel-put { min-width: var(--sp-12); }


.w-drag { touch-action: none; }
.w-drag-grip { margin-left: auto; color: var(--text-muted); }
.w-drag.is-dragging {
  border-color: var(--primary); outline: 2px solid var(--primary);
  box-shadow: var(--shadow-card); position: relative; z-index: var(--z-raise);
}


.w-order-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.w-order {
  font-family: inherit; font-size: var(--fs-input); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); text-align: left;
  padding: var(--sp-6); min-height: var(--tap-min);
  border: 1px solid var(--control-border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); cursor: pointer;
  display: flex; gap: var(--sp-4); align-items: center;
}
.w-order.is-on { border-color: var(--primary); outline: 2px solid var(--primary); }



.w-order .w-order-num,
.set-item-num {
  flex: none; width: var(--sp-8); height: var(--sp-8);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--control-border); border-radius: var(--r-circle);
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
}
.w-order.is-on .w-order-num { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }


.qm-order-num {
  flex: none; min-width: var(--sp-7); text-align: center;
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
}


.w-code-display {
  display: flex; gap: var(--sp-3); justify-content: center;
  margin-bottom: var(--sp-7); flex-wrap: wrap;
}
.w-code-slot {
  min-width: 2ch; min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-5); font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--control-border); color: var(--text);
}
.w-code-slot.is-filled { border-bottom-color: var(--primary); }
.w-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }



.w-key {
  font-family: inherit; font-size: var(--fs-5); font-weight: var(--fw-medium);
  line-height: var(--lh-none); min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--sp-5);
  border: 1px solid var(--control-border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.w-key.is-aux { color: var(--text-muted); }


.w-key-num { display: block; line-height: var(--lh-none); }






.w-dlg-pic {
  display: block; width: 100%; max-width: 32ch; height: auto;
  border-radius: var(--r-md); margin-bottom: var(--sp-3); cursor: zoom-in;
}
.w-dlg-row.has-pic .w-dlg-bub { max-width: 92%; }


.w-dlg-nav { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); }
.w-dlg-next { flex: 1; }
.w-dlg-back:disabled { opacity: .4; cursor: default; }



.w-lightbox {
  position: fixed; inset: 0; z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim-viewer); padding: var(--sp-6); cursor: zoom-out;
}
.w-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-md); }
.w-lightbox-x {
  position: absolute; top: var(--sp-6); right: var(--sp-6);
  width: var(--tap-min); height: var(--tap-min); border-radius: var(--r-circle);
  border: 0; background: var(--surface); color: var(--text); cursor: pointer;
}



.qm-group {
  display: inline-block; margin-right: var(--sp-3);
  font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--text-muted);
}
.qm-group::after { content: ' ›'; }



.cg-kind-row { margin-top: var(--sp-3); padding-left: var(--sp-5); border-left: 2px solid var(--border); }




.w-dialbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: var(--sp-6);
}
.w-callbtn {
  grid-column: 2; justify-self: center;
  width: var(--sp-11); height: var(--sp-11); border-radius: var(--r-circle);
  border: 0; background: var(--primary); color: var(--on-accent);
  font-size: var(--fs-5); cursor: pointer;
}
.w-callbtn:disabled { opacity: .5; cursor: default; }
.w-dialbar-back { grid-column: 3; justify-self: center; }
.w-key-sub {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-1); font-weight: var(--fw-medium);
  letter-spacing: .08em; color: var(--text-muted); line-height: var(--lh-none);
}
.w-key:active { border-color: var(--primary); }




.ph-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-7);
}
.ph-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
}
.ph-imgbox { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-md); background: var(--surface-alt); }
.ph-img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.ph-img.rot-90  { transform: rotate(90deg); }
.ph-img.rot-180 { transform: rotate(180deg); }
.ph-img.rot-270 { transform: rotate(270deg); }
.ph-badge { position: absolute; top: var(--sp-3); left: var(--sp-3); }

.ph-all {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2); color: var(--text-muted); white-space: nowrap;
}

.ph-missing {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-6); text-align: center;
  font-size: var(--fs-2); color: var(--warning-fg); background: var(--warning-bg);
}
.ph-meta { display: flex; align-items: center; gap: var(--sp-3); }


.cg-gate-ax { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); cursor: pointer; }
.cg-gate-ax + .meta { margin: var(--sp-1) 0 0 var(--sp-7); }









.cg-board {
  max-width: 34rem; margin: 0 auto;
  padding: var(--sp-6);



  padding-bottom: calc(var(--sp-12) + var(--sp-8));
}
.cg-board .phone-appbar { margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-6); }






.qt-framed .cg-board .phone-appbar { display: none; }
.cg-board-lead { font-size: var(--fs-3); color: var(--text-muted); margin: 0 0 var(--sp-6); }


.cg-board-write .cg-sheet-body {
  padding: var(--sp-6);

  overflow-y: auto;
}
.cg-board-write .form-control { margin-bottom: var(--sp-4); }
.cg-board-body { width: 100%; }
.cg-board-why { margin-top: var(--sp-6); }



.cg-board-list { display: flex; flex-direction: column; gap: 0; }
.cg-board-item { padding: var(--sp-5) 0; border-bottom: 1px solid var(--border); }
.cg-board-item:first-child { padding-top: 0; }
.cg-board-item:last-child { border-bottom: 0; }
.cg-board-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.cg-board-q { flex: 1; min-width: 0; font-weight: var(--fw-bold); }
.cg-board-stars { color: var(--warning-fg); letter-spacing: 1px; }

.cg-board-tag {
  flex: none; font-size: var(--fs-1); font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border);
}
.cg-board-tag.is-done { color: var(--success-fg); background: var(--success-bg); border-color: var(--success); }
.cg-board-a { margin: var(--sp-2) 0 0; line-height: var(--lh-relaxed); white-space: pre-wrap; word-break: break-word; }
.cg-board-meta { font-size: var(--fs-2); color: var(--text-muted); margin-top: var(--sp-1); }

.cg-board-reply {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--surface-alt); border-radius: var(--r-md);
}
.cg-board-reply.is-staff { padding-left: var(--sp-8); }



.cg-board-reply.is-staff .cg-board-meta { color: var(--text); font-weight: var(--fw-bold); }
.cg-board-empty { padding: var(--sp-10) 0; text-align: center; color: var(--text-muted); }






.cg-board-pager {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-8) 0 var(--sp-4);
}
.cg-board-pager .btn { min-height: var(--tap-min); padding: var(--sp-5) var(--sp-7); }
.cg-board-pager .btn.is-off { opacity: .45; pointer-events: none; }
.cg-board-pageno { flex: 1; text-align: center; color: var(--text-muted); font-size: var(--fs-3); }







.cg-board-more {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-5);
  min-height: var(--tap-min); margin-top: var(--sp-8);
  color: var(--primary); font-size: var(--fs-3); text-decoration: none;
}





.cg-board-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-4) var(--sp-6);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.cg-board-bar > .btn { margin: 0; }

.cg-board-back, .cg-board-cancel { flex: 0 0 auto; }
.cg-board-go { flex: 1 1 auto; }
.cg-board-bar [hidden] { display: none; }


.cg-review-share { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; font-size: var(--fs-3); }
.cg-review { padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface-alt); border-radius: var(--r-md); }
.cg-review-head { font-size: var(--fs-2); color: var(--text-muted); margin-bottom: var(--sp-3); }
.cg-review-body { margin: 0; line-height: var(--lh-relaxed); white-space: pre-wrap; word-break: break-word; }

.cg-review-report {
  margin-top: var(--sp-3); padding: 0; border: 0; background: none;
  font-size: var(--fs-2); color: var(--text-muted); text-decoration: underline; cursor: pointer;
}



.bl-post { max-width: 44rem; margin: 0 auto; }
.bl-title { margin: 0 0 var(--sp-4); line-height: var(--lh-tight); }
.bl-meta { font-size: var(--fs-2); color: var(--text-muted); margin: 0 0 var(--sp-8); }
.bl-cover { width: 100%; border-radius: var(--r-lg); margin-bottom: var(--sp-8); }

.bl-summary {
  padding: var(--sp-6); margin-bottom: var(--sp-8);


  background: var(--surface-alt); border-radius: var(--r-md);
}
.bl-summary-h { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); margin-bottom: var(--sp-3); }
.bl-summary p { margin: 0; line-height: var(--lh-relaxed); }
.bl-body { line-height: var(--lh-relaxed); }
.bl-body h2 { margin: var(--sp-10) 0 var(--sp-4); }
.bl-body h3 { margin: var(--sp-8) 0 var(--sp-3); }
.bl-body p, .bl-body ul, .bl-body ol { margin: 0 0 var(--sp-6); }
.bl-body img { max-width: 100%; border-radius: var(--r-md); }
.bl-body blockquote {
  margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-6);
  border-left: var(--sp-1) solid var(--border); color: var(--text-muted);
}
.bl-faq, .bl-sources { margin-top: var(--sp-10); }
.bl-faq-item { margin-bottom: var(--sp-6); }
.bl-faq-q { font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.bl-faq-a { margin: 0; line-height: var(--lh-relaxed); }
.bl-sources { font-size: var(--fs-3); color: var(--text-muted); }
.bl-back { margin-top: var(--sp-10); }

.bg-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }




.mn-builtin {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin: calc(var(--sp-3) * -1) 0 var(--sp-6);
}
.mn-builtin-t { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }
.mn-builtin-n { font-size: var(--fs-2); color: var(--text-muted); }








.lg-table .bd-head, .lg-table .bd-row { grid-template-columns: 9.5rem 1fr 11rem 5.5rem auto; }

.lg-when {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; text-align: left;
  font-size: var(--fs-2); color: var(--text);
}


@media (max-width: 720px) {
  .lg-table .bd-row { grid-template-columns: 1fr auto; }
  .lg-table .lg-when { grid-column: 1 / -1; }
}

.lg-detail {
  margin: var(--sp-3) 0 0; padding: var(--sp-3);
  max-height: 12rem; overflow: auto;
  background: var(--surface-alt); border-radius: var(--r-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-2); line-height: var(--lh-normal);
  white-space: pre-wrap; word-break: break-all;
}















.bd-table { border-top: 1px solid var(--border); }
.bd-head, .bd-row {
  display: grid;
  grid-template-columns: 3rem 1fr 7rem 6rem auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.bd-head {
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
  background: var(--surface-alt);
}
.bd-row:hover { background: var(--surface-alt); }

.bd-row.is-off { opacity: .55; }
.bd-no { font-size: var(--fs-2); color: var(--text-muted); text-align: center; }
.bd-subject { min-width: 0; }

.bd-title {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-title:hover, .bd-title:focus-visible { color: var(--primary-fg); }
.bd-title.is-plain { cursor: default; }
.bd-title.is-plain:hover { text-decoration: none; }

.bd-sub { display: none; font-size: var(--fs-2); color: var(--text-muted); margin-top: var(--sp-2); }
.bd-who, .bd-when { font-size: var(--fs-2); color: var(--text-muted); }
.bd-acts { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.bd-empty { padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--text-muted); }

.bd-row.is-drop { outline: 2px dashed var(--primary); outline-offset: calc(var(--sp-1) * -1); }
@media (max-width: 720px) {
  .bd-head { display: none; }
  .bd-row { grid-template-columns: 1fr auto; gap: var(--sp-3); }
  .bd-no, .bd-who, .bd-when { display: none; }
  .bd-sub { display: block; }
  .bd-title { white-space: normal; }
}



.bd-body { margin: 0 0 var(--sp-6); line-height: var(--lh-relaxed); white-space: pre-wrap; word-break: break-word; }


.bd-open { cursor: pointer; color: var(--primary-fg); }
.bd-comment {
  padding: var(--sp-5); margin-bottom: var(--sp-4);
  background: var(--surface-alt); border-radius: var(--r-md);
}



.bd-comment.is-staff { padding-left: var(--sp-8); }
.bd-comment.is-staff > .meta { color: var(--text); font-weight: var(--fw-bold); }



.ph-caption {
  margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-3); line-height: var(--lh-normal); color: var(--text);
  background: var(--surface-alt); border-radius: var(--r-md);
  white-space: pre-wrap; word-break: break-word;
}


.qm-media img { display: block; margin-bottom: var(--sp-3); }

.qm-number { width: 12ch; display: inline-block; }
.qm-unit { margin-left: var(--sp-3); }
.qm-options { display: flex; flex-direction: column; gap: var(--sp-3); }
.qm-option-row { display: flex; gap: var(--sp-3); align-items: center; }
.qm-opt-thumb {
  width: var(--sp-11); height: var(--sp-11); object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--border); cursor: pointer;
}
.qm-answer { display: flex; flex-direction: column; gap: var(--sp-4); }
.qm-accept { min-height: var(--sp-12); resize: vertical; }   


.gb { display: flex; flex-direction: column; gap: var(--sp-7); }
.gb-media {
  width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface-alt);
}
.gb-text p { margin: 0 0 var(--sp-4); line-height: var(--lh-relaxed); }
.gb-text p:empty { min-height: var(--sp-4); }
.gb-choices { display: flex; flex-direction: column; gap: var(--sp-4); }
.gb-choice {
  font-family: inherit; font-size: var(--fs-input); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); text-align: left;
  padding: var(--sp-7); min-height: var(--tap-min);
  border: 1px solid var(--control-border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.gb-choice:hover { border-color: var(--primary); }






.gb-choice:disabled { color: var(--text-muted); border-color: var(--border); cursor: default; }
.gb-ending {
  text-align: center; padding: var(--sp-9);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface-alt);
}
.gb-ending.is-success { background: var(--success-bg); border-color: var(--success); }
.gb-ending.is-fail    { background: var(--error-bg);   border-color: var(--error); }
.gb-ending-tag   { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }
.gb-ending-label { font-size: var(--fs-5); font-weight: var(--fw-heavy); margin-top: var(--sp-2); }
.gb-ending-pct   { font-size: var(--fs-2); color: var(--text-muted); margin-top: var(--sp-3); }




.gb-forks { display: flex; flex-direction: column; gap: var(--sp-7); margin-top: var(--sp-9); }
.gb-forks-title { font-size: var(--fs-5); font-weight: var(--fw-bold); }
.gb-forks-hint { font-size: var(--fs-4); color: var(--text-muted); margin: 0; }
.gb-fork { display: flex; flex-direction: column; gap: var(--sp-4); }

.gb-fork-where { font-size: var(--fs-5); line-height: var(--lh-tight); }
.gb-fork-taken { font-size: var(--fs-3); color: var(--text-muted); }



.gb-again { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-9); }
.gb-again-btn { color: var(--text-muted); }


.gb-again-ask { flex-basis: 100%; margin: 0; font-size: var(--fs-4); }




.gbm-meta { margin-bottom: var(--sp-7); }
.gbm-stage { margin-bottom: var(--sp-7); }
.gbm-stage-bar { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.gbm-stage-bar .spacer { flex: 1; }

.gbm-save-slot { display: contents; }







.gbm-stage.is-full {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  margin: 0; border-radius: 0;
  display: flex; flex-direction: column;
}

.gbm-stage.is-full .gbm-map-wrap.is-stage { flex: 1; height: auto; min-height: 0; }

body.gbm-full { overflow: hidden; }


.gbm-start { margin-bottom: var(--sp-7); }
.gbm-start-title { font-size: var(--fs-5); font-weight: var(--fw-bold); margin-bottom: var(--sp-7); }


.gbm-start-pick { margin-bottom: var(--sp-8); }
.gbm-start-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-9); }



.gbm-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); }
.gbm-step + .gbm-step { margin-top: var(--sp-9); }
.gbm-step-no {
  width: var(--icon-btn); height: var(--icon-btn);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-circle);
  background: var(--surface-alt); color: var(--text-muted);
  font-size: var(--fs-3); font-weight: var(--fw-bold); line-height: var(--lh-none);
}
.gbm-step-title {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-4); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  margin-bottom: var(--sp-4);
}
.gbm-step-more { margin-left: auto; }


.gbm-edit .gbm-step-cast, #ai-form.is-modal .gbm-step-cast { display: none; }



.gbm-cast {
  display: flex; align-items: flex-start; gap: var(--sp-6);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-6); margin-top: var(--sp-5);
}
.gbm-cast-body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-width: 0; }

.gbm-cast-pic {
  width: 12ch; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-alt); flex: none;
}
.gbm-cast-name { font-weight: var(--fw-bold); }
.gbm-cast-desc { resize: vertical; }
.gbm-cast-bar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.gbm-cast-bar .spacer { flex: 1; }


@media (max-width: 640px) {
  .gbm-cast { flex-direction: column; align-items: stretch; }
  .gbm-cast-pic { width: 12ch; }
}


.gbm-cards { display: flex; flex-direction: column; gap: var(--sp-7); }







.gbm-edit {
  display: grid; grid-template-columns: 320px minmax(0, var(--w-read));
  gap: var(--sp-9); align-items: start; justify-content: center;
}

@media (max-width: 800px) { .gbm-edit { grid-template-columns: minmax(0, 1fr); } }




.gbm-phone {
  position: sticky; top: var(--sp-0);
  border: 2px solid var(--text); border-radius: var(--r-lg);
  background: var(--bg); overflow: hidden;
}
.gbm-phone-bar {
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--on-accent);
  text-align: center; padding: var(--sp-3);
  background: var(--text);
}

.gbm-phone-screen { height: 58vh; overflow-y: auto; padding: var(--sp-7); }
.gbm-phone-empty { color: var(--text-muted); font-style: italic; margin: 0; }



.gbm-adv { display: none; }
.gbm-node.is-adv .gbm-adv { display: block; }


.gbm-story { display: flex; flex-direction: column; gap: var(--sp-7); }
.gbm-story-sec {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-7); background: var(--surface);
}
.gbm-story-sec.is-ending.is-success { border-color: var(--success); background: var(--success-bg); }
.gbm-story-sec.is-ending.is-fail { border-color: var(--error); background: var(--error-bg); }
.gbm-story-sec.is-orphan { border-color: var(--error); border-style: dashed; }
.gbm-story-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.gbm-story-head .spacer { flex: 1; }
.gbm-story-text { margin: 0; line-height: var(--lh-relaxed); white-space: pre-wrap; }
.gbm-story-choice { margin: var(--sp-4) 0 0; font-size: var(--fs-3); color: var(--text-muted); }

.gbm-syn { min-height: 96px; resize: vertical; }
.gbm-syn-bar { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.gbm-chars { display: flex; flex-direction: column; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.gbm-char { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 640px) { .gbm-char { grid-template-columns: 1fr; } }
.gbm-char-pic {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); overflow: hidden;
}
.gbm-char-pic img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gbm-char-body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.gbm-char-desc { resize: vertical; }
.gbm-char-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.gbm-draw-go { margin-top: var(--sp-5); }


.gbm-scene-full {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6);
  background: var(--surface-alt);
}
.gbm-scene-full > summary { cursor: pointer; font-size: var(--fs-3); color: var(--text-muted); }

.gbm-scene-text {
  margin: var(--sp-5) 0 0; white-space: pre-wrap;
  font-size: var(--fs-3); line-height: var(--lh-relaxed);
  max-height: 30vh; overflow-y: auto;
}
.gbm-scene-count { margin-top: var(--sp-3); }
.gbm-story-chap { display: flex; align-items: center; gap: var(--sp-4); }


.gbm-search { max-width: 26ch; }
.gbm-backref {
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-alt); color: var(--text-muted);
  font-size: var(--fs-1); line-height: var(--lh-tight);
  padding: 0 var(--sp-3); cursor: pointer;
}
.gbm-backref:hover { color: var(--primary); border-color: var(--primary); }
.gbm-box.is-found rect { stroke: var(--primary); stroke-width: var(--sw-strong); }
.gbm-story-chap {
  font-size: var(--fs-3); font-weight: var(--fw-bold); color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: var(--sp-3);
}
.gbm-node.is-bad { border-color: var(--error); }
.gbm-node-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.gbm-node-head .spacer { flex: 1; }
.gbm-media { margin-bottom: var(--sp-5); position: relative; }



.gbm-media img, .qm-media img {
  max-width: 100%; max-height: 200px;
  border-radius: var(--r-md); border: 1px solid var(--border);
}
.gbm-media-rm { position: absolute; top: var(--sp-2); left: var(--sp-2); background: var(--surface); }
.gbm-text { min-height: 88px; resize: vertical; }
.gbm-choices { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.gbm-choice-row { display: flex; gap: var(--sp-3); align-items: center; }


.gbm-to { max-width: 23ch; }
.gbm-ending-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-5); }
.gbm-score { max-width: 10ch; }   

.gbm-map-wrap { overflow: auto; max-height: 420px; margin: var(--sp-4) 0; border: 1px solid var(--border); border-radius: var(--r-md); }

.gbm-map-wrap.is-stage { height: 65vh; max-height: none; background: var(--bg); }
@media (max-width: 800px) { .gbm-map-wrap.is-stage { height: 55vh; } }
.gbm-map-wrap svg { width: 100%; min-width: 180px; }

.gbm-map-wrap svg.is-canvas { width: auto; min-width: 100%; touch-action: none; }
.gbm-box rect:active { cursor: grabbing; }
.gbm-box.is-gate rect { fill: var(--warning-bg); stroke: var(--warning); }
.gbm-port { fill: var(--primary); cursor: crosshair; }
.gbm-edge.is-gate { stroke: var(--warning); }
.gbm-edge.is-ghost { stroke: var(--primary); stroke-dasharray: var(--sw-dash); stroke-width: var(--sw-active); }
.gbm-edge { stroke: var(--control-border); stroke-width: var(--sw-line); }
.gbm-box rect { fill: var(--surface); stroke: var(--control-border); stroke-width: var(--sw-line); cursor: pointer; }
.gbm-box text { font-size: var(--fs-2); font-weight: var(--fw-bold); fill: var(--text); text-anchor: middle; pointer-events: none; }

.gbm-box .gbm-box-sub { font-size: var(--fs-1); font-weight: var(--fw-normal); fill: var(--text-muted); }
.gbm-box.is-start rect { stroke: var(--primary); stroke-width: var(--sw-strong); }
.gbm-box.is-ending rect { fill: var(--surface-alt); }
.gbm-box.is-ending.is-success rect { fill: var(--success-bg); stroke: var(--success); }
.gbm-box.is-ending.is-fail rect { fill: var(--error-bg); stroke: var(--error); }
.gbm-box.is-bad rect { stroke: var(--error); stroke-width: var(--sw-strong); }





.login { max-width: var(--w-form); margin: var(--sp-12) auto; }
.login h1 { font-size: var(--fs-5); margin: 0 0 var(--sp-8); }


.table-wrap { overflow-x: auto; }
@media (max-width: 640px) {
  .page { padding: var(--sp-7) var(--sp-5); }



  .card { padding: var(--sp-7); --rt-pad: var(--sp-7); }
  .card.table-wrap { padding-left: var(--sp-0); padding-right: var(--sp-0); }
  .card.table-wrap > :not(table) { padding-left: var(--sp-7); padding-right: var(--sp-7); }
  .table th, .table td { padding: var(--sp-6) var(--sp-7); }








  .table { font-size: var(--fs-4); }
  .meta { font-size: var(--fs-4); }
  .badge, .chip-toggle { font-size: var(--fs-3); }
  .cell-sub { font-size: var(--fs-3); }
  .sidenav-title { font-size: var(--fs-3); }





  .row-pick, #pick-all, .qt-pick, .qt-pick-all { width: var(--sp-8); height: var(--sp-8); }
}





body.ar-body { overflow: hidden; height: 100%; background: var(--stage-bg); color: var(--on-stage); }
.ar-stage { position: fixed; inset: 0; }
.ar-stage video, .ar-stage canvas { object-fit: cover; }








.ar-intro {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-7); padding: var(--sp-11) var(--sp-9); text-align: center;
  background: linear-gradient(160deg, var(--stage-bg), var(--primary-dark));
}
.ar-intro h1 { font-size: var(--fs-hero); font-weight: var(--fw-heavy); line-height: var(--lh-tight); margin: 0; }



.ar-intro p { margin: 0; font-size: var(--fs-5); line-height: var(--lh-relaxed); color: var(--on-stage-dim); max-width: 42ch; }
.ar-badge {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-7); border-radius: var(--r-pill);
  background: var(--scrim-strong); color: var(--on-stage);
  font-size: var(--fs-2); font-weight: var(--fw-heavy); letter-spacing: .1em;
}
.ar-thumbs { display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: center; }
.ar-thumbs img {
  width: var(--sp-12); height: var(--sp-12); object-fit: cover;
  border-radius: var(--r-lg); border: 2px solid var(--on-stage-dim);
}
.ar-start { min-width: 20ch; }
.ar-note { font-size: var(--fs-2) !important; color: var(--on-stage-dim); line-height: var(--lh-relaxed); }


.ar-scan { position: fixed; inset: 0; z-index: var(--z-raise); pointer-events: none; display: none; }
.ar-scan.is-on { display: block; }
.ar-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(74vw, 40ch); aspect-ratio: 1 / 1;
}
.ar-frame i { position: absolute; width: var(--sp-10); height: var(--sp-10); border: 3px solid var(--warning); }
.ar-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: var(--r-lg) 0 0 0; }
.ar-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 var(--r-lg) 0 0; }
.ar-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 var(--r-lg); }
.ar-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 var(--r-lg) 0; }
.ar-frame::after {
  content: ''; position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--warning), transparent);
  animation: ar-sweep var(--mo-celebrate) ease-in-out infinite alternate;
}
@keyframes ar-sweep { from { top: 6%; } to { top: 94%; } }
.ar-guide {
  position: absolute; left: 0; right: 0; bottom: var(--sp-11); text-align: center;
  font-size: var(--fs-5); font-weight: var(--fw-bold); color: var(--on-stage);
  text-shadow: 0 2px 12px var(--scrim-viewer);
}
.ar-guide small { display: block; margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--on-stage-dim); font-weight: var(--fw-normal); }


.ar-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); display: none;
  align-items: center; justify-content: space-between; gap: var(--sp-6);
  padding: calc(env(safe-area-inset-top) + var(--sp-6)) var(--sp-7) var(--sp-6);
  background: linear-gradient(180deg, var(--scrim-strong), transparent);
}
.ar-topbar.is-on { display: flex; }
.ar-top-title { font-size: var(--fs-5); font-weight: var(--fw-heavy); color: var(--on-stage); }
.ar-top-title small { display: block; font-size: var(--fs-2); color: var(--on-stage-dim); font-weight: var(--fw-normal); }
.ar-topbar .icon-btn { background: var(--scrim-strong); color: var(--on-stage); border-color: transparent; }


.ar-result {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay);


  transform: translateY(110%); transition: transform var(--mo-sheet) ease-out;
  background: var(--surface); color: var(--text);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-9) var(--sp-9) calc(env(safe-area-inset-bottom) + var(--sp-9));
  box-shadow: var(--shadow-modal); max-height: 82vh; overflow-y: auto;
}
.ar-result.is-on { transform: none; }
.ar-found {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill);
  background: var(--success-bg); color: var(--success-fg);
  font-size: var(--fs-2); font-weight: var(--fw-heavy);
}
.ar-result h2 { margin: var(--sp-6) 0 var(--sp-4); font-size: var(--fs-5); font-weight: var(--fw-heavy); }
.ar-desc { font-size: var(--fs-5); line-height: var(--lh-relaxed); color: var(--text-muted); margin: 0; }
.ar-answer {
  margin: var(--sp-7) 0 var(--sp-3); padding: var(--sp-9); border-radius: var(--r-lg); text-align: center;
  background: var(--warning-bg); border: 1px solid var(--warning);
}
.ar-answer small { display: block; font-size: var(--fs-2); font-weight: var(--fw-heavy); color: var(--warning-fg); letter-spacing: .1em; }
.ar-answer b { display: block; margin-top: var(--sp-4); font-size: var(--fs-hero); font-weight: var(--fw-heavy); letter-spacing: .14em; color: var(--warning-fg); }
.ar-acts { display: flex; gap: var(--sp-5); margin-top: var(--sp-7); }
.ar-acts .btn { flex: 1; justify-content: center; }


.ar-err {
  position: fixed; inset: 0; z-index: var(--z-overlay); display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-7); padding: var(--sp-10); text-align: center; background: var(--stage-bg);
}
.ar-err.is-on { display: flex; }
.ar-err i { font-size: var(--fs-hero); color: var(--warning); }
.ar-err h2 { margin: 0; font-size: var(--fs-5); font-weight: var(--fw-bold); color: var(--on-stage); }
.ar-err p { margin: 0; font-size: var(--fs-5); line-height: var(--lh-relaxed); color: var(--on-stage-dim); max-width: 42ch; }





.w-ar-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7);
              margin: var(--sp-7) 0; }
@media (min-width: 640px) { .w-ar-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.w-ar-qr { text-align: center; }








@media (hover: none) and (pointer: coarse) {
  .w-ar-qr { display: none; }


  .w-ar-entry { grid-template-columns: minmax(0, 1fr); }
}
.w-ar-qr canvas, .w-ar-qr img { max-width: 100%; height: auto; }
.w-ar-steps { margin: 0; padding-left: var(--sp-8); font-size: var(--fs-3); color: var(--text-muted); }
.w-ar-steps li { margin-bottom: var(--sp-3); }
.w-ar-steps li:last-child { margin-bottom: 0; }




.notice.is-guide .w-ar-steps { color: inherit; }


.w-ar-entry .notice { margin-bottom: 0; }



.cg-place { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); margin: var(--sp-5) 0; }
.cg-place-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cg-place-head .form-control { flex: 1; }
.cg-geo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cg-geo .form-control { max-width: 14rem; }
.cg-els { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cg-el-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cg-el-row .form-control { flex: 1; min-width: 10rem; }




.cg-pts { max-width: 9rem; }



.cg-ben-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.cg-ben-row:last-child { border-bottom: 0; }
.cg-ben-thumb { width: 3rem; height: 3rem; border-radius: var(--r-md); object-fit: cover; background: var(--surface-alt); border: 1px solid var(--border); flex: none; }
.cg-ben-main { flex: 1; min-width: 8rem; }
.cg-ben-name { font-weight: var(--fw-bold); }


.cg-ben-namebtn {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; font-weight: var(--fw-bold);
}
.cg-ben-namebtn:hover, .cg-ben-namebtn:focus-visible { text-decoration: underline; }
.cg-ben-meta { font-size: var(--fs-2); color: var(--text-muted); }
.cg-ben-acts { display: flex; gap: var(--sp-2); flex: none; }
.cg-ben-off .cg-ben-name, .cg-ben-off .cg-ben-thumb { opacity: 0.5; }















.cg-savebar {
  display: flex; align-items: center; gap: var(--sp-5);
  justify-content: space-between; flex-wrap: wrap;
  margin-bottom: var(--sp-7); padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);







  position: sticky; top: calc(var(--sp-7) * -1); z-index: var(--z-sticky);
  background: var(--surface); padding-top: var(--sp-7);
}
@media (max-width: 800px) { .cg-savebar { top: calc(var(--sp-6) * -1); padding-top: var(--sp-6); } }





.cg-savebar.is-page { top: 0; padding-top: var(--sp-5); background: var(--bg); }
@media (max-width: 800px) { .cg-savebar.is-page { top: 0; padding-top: var(--sp-4); } }

.cg-savebar-r { display: flex; align-items: center; gap: var(--sp-4); }

.cg-ben-imgs {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}

.cg-ben-place { display: grid; gap: var(--sp-4); }
.cg-ben-img {
  display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--sp-3);
  justify-items: center; align-content: start;
}
.cg-ben-img-t { font-size: var(--fs-2); font-weight: var(--fw-bold); text-align: center; }
.cg-ben-img img { width: 6rem; height: 6rem; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); }
.cg-ben-img .meta { text-align: center; }









.cg-prize-list { display: grid; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-3); }
.cg-prize-row {
  display: grid; gap: var(--sp-4); align-items: start;
  grid-template-columns: 4.5rem minmax(13rem, 1fr) 7rem 6rem 2rem;
  min-width: 36rem;
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt);
}

.cg-prize-row.is-miss { grid-template-columns: 4.5rem minmax(13rem, 1fr) 6rem 2rem; min-width: 27rem; }

.cg-prize-pic { display: grid; gap: var(--sp-2); justify-items: center; }
.cg-prize-pic .meta { text-align: center; }
.cg-prize-row img { width: 4.5rem; height: 4.5rem; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.cg-prize-fields { display: grid; gap: var(--sp-3); }

.cg-prize-stat { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-2); color: var(--text-muted); }
.cg-prize-stat .is-out { color: var(--error); font-weight: var(--fw-bold); }


.cg-stock-top { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.cg-stock-top .form-control { flex: 1; min-width: 8rem; }
.cg-stock-head { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.cg-stock-head .tab-bar { margin-left: auto; margin-bottom: 0; }
.cg-stock-table { width: 100%; font-size: var(--fs-3); }

.cg-stock-table .form-control.is-num { width: 4.5rem; display: inline-block; padding: var(--sp-2); }
.cg-stock-table tbody tr { cursor: pointer; }
.cg-stock-table tbody tr:hover { background: var(--surface-alt); }

.cg-stock-table tbody tr.is-focus { background: var(--surface-alt); box-shadow: inset 3px 0 0 var(--primary); }
.cg-stock-table .is-out { color: var(--error); font-weight: var(--fw-bold); }

.cg-stock-table .is-hold { font-weight: var(--fw-bold); }






.cg-stock-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--sp-4);
}
.cg-stock-tiles .t {
  background: var(--surface); padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.cg-stock-tiles .k { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }
.cg-stock-tiles .v {
  font-size: var(--fs-hero); font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums; line-height: var(--lh-tight);
}
.cg-stock-tiles .s { font-size: var(--fs-2); color: var(--text-muted); }

.cg-stock-tiles .t.is-warn .v, .cg-stock-tiles .t.is-warn .s { color: var(--error); }

.cg-stock-legend {
  display: flex; gap: var(--sp-7); flex-wrap: wrap;
  font-size: var(--fs-2); color: var(--text-muted); margin: var(--sp-5) 0 var(--sp-6);
}
.cg-stock-legend span { display: inline-flex; align-items: center; gap: var(--sp-3); }
.cg-sw {
  width: var(--sp-8); height: var(--sp-5); border-radius: var(--sp-1);
  display: inline-block; border: 1px solid var(--border);
}
.cg-sw.is-given { background: var(--primary); border-color: var(--primary); }

.cg-sw.is-hold {
  background: repeating-linear-gradient(135deg, var(--primary) 0 3px, transparent 3px 6px), var(--surface-alt);
}
.cg-sw.is-left { background: var(--surface-alt); border-color: var(--control-border); }

.cg-stock-bars { display: flex; flex-direction: column; gap: var(--sp-1); }
.cg-bar {
  display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr minmax(9rem, auto);
  gap: var(--sp-7); align-items: center; padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm); cursor: pointer;
}
.cg-bar:hover { background: var(--surface-alt); }
.cg-bar.is-focus { background: var(--surface-alt); }
.cg-bar.is-focus .nm { font-weight: var(--fw-heavy); }
.cg-bar .nm {
  font-size: var(--fs-3); font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0;
}

.cg-bar .nm .dot {
  width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-circle);
  background: var(--primary); flex: none; visibility: hidden;
}
.cg-bar.is-focus .nm .dot { visibility: visible; }
.cg-bar .nm .rk { color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--fs-2); flex: none; }
.cg-bar .nm .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-bar .track {
  height: var(--sp-7); border-radius: var(--sp-1); background: var(--surface-alt);
  display: flex; overflow: hidden; border: 1px solid var(--control-border);
}
.cg-bar .track i { height: 100%; display: block; }
.cg-bar .track i.g { background: var(--primary); }
.cg-bar .track i.h { background: repeating-linear-gradient(135deg, var(--primary) 0 3px, transparent 3px 6px), var(--surface-alt); }
.cg-bar .fg { font-size: var(--fs-2); color: var(--text-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cg-bar .fg b { color: var(--text); font-weight: var(--fw-bold); }
.cg-bar .fg .is-low { color: var(--error); font-weight: var(--fw-heavy); }

.cg-bar.is-inf .track { opacity: .35; }
@media (max-width: 40rem) {
  .cg-bar { grid-template-columns: 1fr; gap: var(--sp-2); }
  .cg-bar .fg { text-align: left; }
}

.cg-got-top { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
.cg-got-top .form-control { flex: 1; }
.cg-got-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-3); }
.cg-got-row .who { font-weight: var(--fw-bold); }



.vw-stage {
  position: relative; height: 58vh; min-height: 16rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--stage-bg); overflow: hidden;
}


.vw-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vw-fps {
  position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: var(--z-raise);
  background: var(--scrim-strong); color: var(--on-accent);
  font-size: var(--fs-3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  padding: var(--sp-2) var(--sp-5); border-radius: var(--r-md);
}
.vw-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-7); margin-top: var(--sp-5); }
.vw-m { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.vw-m b { display: block; font-size: var(--fs-5); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.vw-m span { font-size: var(--fs-2); color: var(--text-muted); }
.vw-m.is-ok b { color: var(--success-fg); }
.vw-m.is-warn b { color: var(--warning-fg); }
.vw-m.is-bad b { color: var(--error-fg); }
.vw-log {
  margin-top: var(--sp-5); font-size: var(--fs-2); color: var(--text-muted);
  white-space: pre-wrap; max-height: 14rem; overflow: auto;
}



.mt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--stage-bg);
}
.mt-cell { position: relative; aspect-ratio: 1 / 1; }
.mt-cell.is-fail { background: var(--error-bg); }
.mt-img { display: block; width: 100%; height: 100%; }
.mt-cap {
  position: absolute; left: 0; bottom: 0;
  background: var(--scrim-strong); color: var(--on-accent);
  font-size: var(--fs-1); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  padding: 0 var(--sp-2);
}



.cg-eplist { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.cg-epcard {
  display: grid; gap: var(--sp-2); text-align: left; width: 100%;
  padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.cg-epcard b { font-size: var(--fs-5); font-weight: var(--fw-bold); }
.cg-epmeta, .cg-epintro, .cg-epgift, .cg-eplock, .cg-epgo {
  font-size: var(--fs-2); color: var(--text-muted);
}
.cg-epintro { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-epgift { color: var(--primary); font-weight: var(--fw-bold); }
.cg-epcert { margin-bottom: var(--sp-3); }
.cg-epgo { color: var(--success-fg); font-weight: var(--fw-bold); }

.cg-epcard.is-locked { opacity: 0.6; }
.cg-epcard.is-done { border-color: var(--success); }


.cg-stage { display: grid; gap: var(--sp-5); }




















.cg-stage > * { min-width: 0; }
.cg-code { font-size: var(--fs-hero); font-weight: var(--fw-heavy); letter-spacing: 0.3em; text-align: center; margin: var(--sp-4) 0; font-variant-numeric: tabular-nums; }






.cd-code {


  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: var(--fw-bold); letter-spacing: .06em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cg-progress { font-size: var(--fs-5); font-weight: var(--fw-bold); }
.cg-finish { font-size: var(--fs-5); font-weight: var(--fw-heavy); color: var(--success-fg); }





.cg-el-text { white-space: pre-wrap; font-size: var(--fs-editor); line-height: var(--lh-editor); }


.cg-el-text p { margin: 0 0 var(--sp-editor-p); }
.cg-el-text p:last-child { margin-bottom: 0; }






.cg-quiz-frame {
  display: block; width: 100%; min-height: 12rem;
  border: 0; border-radius: var(--r-md); background: transparent;
}





















.cg-resume { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.cg-wake { margin-left: var(--sp-3); }







.cg-banner { position: fixed; top: var(--sp-5); left: 50%; transform: translateX(-50%); z-index: var(--z-overlay); display: flex; align-items: center; gap: var(--sp-4); width: max-content; max-width: calc(100% - var(--sp-5) * 2); background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success); border-radius: var(--r-pill); padding: var(--sp-4) var(--sp-7); font-weight: var(--fw-bold); box-shadow: var(--shadow-modal); }


.stat-bars { display: flex; align-items: flex-end; gap: var(--sp-1); height: 120px; margin: var(--sp-4) 0; }
.stat-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.stat-bar > span { display: block; width: 100%; min-height: 2px; background: var(--primary); border-radius: var(--r-sm) var(--r-sm) 0 0; }

.sv-gate-warn { color: var(--warning-fg); }










.dash-unread { color: var(--warning-fg); font-size: var(--fs-2); font-weight: var(--fw-normal); }
.dash-up { color: var(--success-fg); font-size: var(--fs-2); }
.dash-down { color: var(--error-fg); font-size: var(--fs-2); }
.dash-flat { color: var(--text-muted); font-size: var(--fs-2); }
.dash-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }




.dash-todo li { padding: var(--sp-3) var(--sp-0); border-bottom: 1px solid var(--surface-alt); }
.dash-todo li:last-child { border-bottom: 0; }
.dash-todo li a { color: var(--text); }


.dash-todo-link { font-size: var(--fs-3); color: var(--primary-fg); }
.dash-todo li.dash-todo-stock a, .dash-todo li.dash-todo-gate a,
.dash-todo li.dash-todo-missed a { color: var(--error-fg); font-weight: var(--fw-bold); }




.cg-exit-toast { position: fixed; bottom: var(--sp-7); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); max-width: 92vw; background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success); border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-6); font-size: var(--fs-3); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-modal); pointer-events: none; }

.cg-queue { position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); z-index: var(--z-overlay); background: var(--warning-bg); color: var(--warning-fg); border: 1px solid var(--warning); border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-6); font-size: var(--fs-2); font-weight: var(--fw-bold); white-space: nowrap; }




.cg-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }



.cg-top.is-hidden { display: none; }

















.cg-menu {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-overlay);
  height: 100vh;
  height: 100dvh;
  background: var(--bg); overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--sp-9));
}
.cg-menu-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface);
}
.cg-menu-head b { font-size: var(--fs-5); }


.cg-menu-head .icon-btn { flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min); }
.cg-menu .who { color: var(--text-muted); font-size: var(--fs-2); }
.cg-menu .sp { flex: 1; }




.cg-menu-prof {
  display: flex; align-items: center; gap: var(--sp-5);
  margin: var(--sp-6); padding: var(--sp-6); min-height: var(--tap-min);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--surface));
  border-radius: var(--r-lg); text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.cg-menu-prof .ava {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-circle);
  background: var(--primary); color: var(--on-accent); font-weight: var(--fw-bold);
}
.cg-menu-prof .ava.is-guest { background: var(--surface-alt); color: var(--text-muted); }
.cg-menu-prof .col { flex: 1; min-width: 0; }
.cg-menu-prof .prow { display: flex; align-items: center; gap: var(--sp-4); }
.cg-menu-prof .prow b { font-size: var(--fs-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-menu-prof .chip {
  font-size: var(--fs-1); font-weight: var(--fw-bold); flex: none;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-accent);
}
.cg-menu-prof .sub {
  font-size: var(--fs-2); color: var(--text-muted); margin-top: var(--sp-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-menu-prof i { color: var(--text-muted); flex: none; }

.cg-menu-prof .chip.is-lv { background: var(--success-bg); color: var(--success-fg); }

.cg-menu-lv {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border);
  font-size: var(--fs-2); color: var(--text-muted);
}
.cg-menu-lv img { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-circle); object-fit: cover; }
.cg-menu-lv b { font-size: var(--fs-4); color: var(--text); }

.cg-menu-bar {
  height: var(--sp-3); margin: var(--sp-0) var(--sp-6) var(--sp-6);
  border-radius: var(--r-pill); background: var(--surface-alt); overflow: hidden;
}
.cg-menu-bar i { display: block; height: 100%; background: var(--primary); }

.cg-menu-card {
  margin: var(--sp-6); padding: var(--sp-8) var(--sp-6); text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cg-menu-card .t { color: var(--primary); font-weight: var(--fw-bold); font-size: var(--fs-3); }
.cg-menu-card .n { font-size: var(--fs-hero); font-weight: var(--fw-heavy); line-height: var(--lh-none); margin: var(--sp-4) 0; }

.mb-search { max-width: var(--w-read); }


.auth-sns { padding: var(--sp-6) var(--sp-0); border-top: 1px solid var(--border); }
.auth-sns:first-of-type { border-top: 0; }
.auth-sns-head { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.auth-sns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 800px) { .auth-sns-grid { grid-template-columns: 1fr; } }
.auth-gap { margin-top: var(--sp-6); }

.terms-edit { font: inherit; font-size: var(--fs-3); line-height: var(--lh-relaxed); resize: vertical; }




.login-or {
  display: flex; align-items: center; gap: var(--sp-5);
  margin: var(--sp-7) var(--sp-0); font-size: var(--fs-2); color: var(--text-muted);
}
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.login-social { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-sns { width: 100%; justify-content: center; font-weight: var(--fw-bold); }
.login-sns.is-kakao { background: var(--sns-kakao); border-color: var(--sns-kakao); color: var(--sns-kakao-ink); }
.login-sns.is-naver { background: var(--sns-naver); border-color: var(--sns-naver); color: var(--on-accent); }
.login-sns.is-google { background: var(--surface); border-color: var(--control-border); color: var(--text); }
.login-fine { margin-top: var(--sp-7); }

.login-sns { position: relative; }
.login-last {
  position: absolute; top: calc(-1 * var(--sp-4)); right: var(--sp-4);
  padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill);
  background: var(--text); color: var(--surface);
  font-size: var(--fs-1); font-weight: var(--fw-bold); white-space: nowrap;
}
.login-last-note {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-0) var(--sp-0) var(--sp-5);
  font-size: var(--fs-2); color: var(--text-muted);
}

.consent-row {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-0);
  font-size: var(--fs-4); cursor: pointer;
}
.consent-row input { width: var(--sp-8); height: var(--sp-8); flex: none; }
.consent-row.is-all { border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); }





.terms-page { max-width: var(--w-read); }
.terms-body {
  margin: var(--sp-0); font: inherit; font-size: var(--fs-3); line-height: var(--lh-relaxed);
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}




.lv-at { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 720px) { .lv-at { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lv-at .form-control { text-align: right; }
.bg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 720px) { .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bg-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.bg-h { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }


.bg-art {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-12); height: var(--sp-12); padding: var(--sp-0);
  border: 1px dashed var(--control-border); border-radius: var(--r-circle);
  background: var(--surface-alt); cursor: pointer; overflow: hidden;
}
.bg-art img { width: 100%; height: 100%; object-fit: cover; }

.bg-num { font-size: var(--fs-5); font-weight: var(--fw-heavy); color: var(--text-muted); }
.bg-in { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.bg-in .k { font-size: var(--fs-2); color: var(--text-muted); flex: none; }
.bg-in .form-control { text-align: right; }
.bg-gap { margin-top: var(--sp-7); }

.mn-pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sp-4); }
@media (max-width: 800px) { .mn-pair { grid-template-columns: 1fr; } }



.cg-menu-h {
  margin: var(--sp-7) var(--sp-6) var(--sp-3); padding: 0 var(--sp-2);
  font-size: var(--fs-2); font-weight: var(--fw-heavy);
  color: var(--text-muted); letter-spacing: .1em;
}

.cg-menu-list + .cg-menu-list { margin-top: var(--sp-7); }
.cg-menu-list { margin: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cg-menu-list a, .cg-menu-list button {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  padding: var(--sp-6); border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  min-height: var(--tap-min);
}
.cg-menu-list > :last-child { border-bottom: 0; }
.cg-menu-list a:hover, .cg-menu-list button:hover { background: var(--surface-alt); }















.cg-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.cg-tab {



  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  border: 0; background: none; cursor: pointer;


  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted); font: inherit; font-size: var(--fs-1);


  min-height: 3.9rem; min-width: var(--tap-min);
}

.cg-tab i { font-size: var(--fs-5); margin-bottom: var(--sp-3); }



.cg-tab.is-on { color: var(--primary); }


.cg-ico { display: inline-flex; width: 1.25em; height: 1.25em; }




.cg-ico svg { width: 100%; height: 100%; display: block; stroke-width: var(--sw-hair); }




.cg-tab .cg-ico,
.cg-tabfold .cg-ico { width: calc(var(--sp-9) + var(--sp-2)); height: calc(var(--sp-9) + var(--sp-2)); }

.cg-tab span { display: block; line-height: var(--lh-none); white-space: nowrap; }

















body.has-shell .cg-tabs {

  --fold-w: var(--sp-10);
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  width: min(26rem, calc(100% - var(--sp-8)));
  border: 1px solid var(--border); border-top: 1px solid var(--border);
  border-radius: var(--r-pill); box-shadow: var(--shadow-modal);
  padding-bottom: 0;




  justify-content: flex-start;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  transition: width var(--mo-fast) ease, border-radius var(--mo-fast) ease;
}
body.has-shell .cg-tabs::-webkit-scrollbar { display: none; }










body.has-shell .cg-tabs .cg-tabfold + .cg-tab { margin-left: auto; }
body.has-shell .cg-tabs .cg-tab:last-child { margin-right: auto; }





body.has-shell .cg-tabs::after {


  content: ''; flex: 0 1 var(--fold-w); align-self: stretch;
}
body.has-shell .cg-tabs.is-mini::after { display: none; }










.cg-tabfold {
  flex: 0 0 auto; width: var(--sp-10); border: 0; background: none; cursor: pointer;




  padding: var(--sp-0);
  color: var(--text-muted); font: inherit; min-height: 3.9rem;








  display: flex; align-items: center; justify-content: center;






  order: 0;
  position: sticky; left: 0; z-index: var(--z-raise); background: var(--surface);
}
body:not(.has-shell) .cg-tabfold { display: none; }














body.has-shell .cg-tab { justify-content: center; }



body.has-shell .cg-tab.is-on { opacity: 1; }









body.has-shell .cg-tabs.is-mini {
  left: var(--sp-5); right: auto; transform: none;
  width: 3.4rem; min-width: 3.4rem; height: 3.4rem;
  border-radius: var(--r-circle); overflow: hidden;

  align-items: center;
}
body.has-shell .cg-tabs.is-mini .cg-tab { display: none; }







body.has-shell .cg-tabs.is-mini .cg-tabfold {
  width: 100%; padding: 0; opacity: 1; min-height: 0;
}













.cg-tabs { transition: opacity var(--mo-fast) ease; }
@media (prefers-reduced-motion: reduce) { .cg-tabs { transition: none; } }

body.has-tabs.is-tabmini .play { padding-bottom: 4rem; }



.cg-bag { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cg-bag .lb { font-size: var(--fs-2); color: var(--text-muted); white-space: nowrap; }
.cg-bag .lb b { color: var(--text); }
.cg-bag-slot {
  width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-sm);
  border: 1px dashed var(--control-border); background: var(--surface-alt);
  display: grid; place-items: center; color: var(--text-muted); font-size: var(--fs-2);
  overflow: hidden;
}
.cg-bag-slot.is-got { border-style: solid; border-color: var(--primary); background: var(--surface); color: var(--primary); }
.cg-bag-slot img { width: 100%; height: 100%; object-fit: cover; }



.cg-got, .cg-walk { text-align: center; max-width: var(--w-read); }
.cg-got-k { font-size: var(--fs-2); letter-spacing: .1em; color: var(--primary); font-weight: var(--fw-bold); }
.cg-got-mark {
  width: var(--sp-10); height: var(--sp-10); margin: 0 auto var(--sp-4);
  border-radius: var(--r-pill); border: 2px solid var(--primary); color: var(--primary);
  display: grid; place-items: center; font-size: var(--fs-5); font-weight: var(--fw-heavy);
}





.cg-walkgot { margin-bottom: var(--sp-4); }



.cg-dist { font-size: var(--fs-title); font-weight: var(--fw-heavy); line-height: var(--lh-none); color: var(--text); }
.cg-dist span { font-size: var(--fs-5); font-weight: var(--fw-bold); color: var(--text-muted); margin-left: var(--sp-1); }




.cg-walkhead {
  display: flex; align-items: center; justify-content: center;



  gap: var(--sp-10); margin: var(--sp-6) 0;
}
.cg-walkhead-col { display: grid; justify-items: start; gap: var(--sp-1); }



.cg-walkhead-col .cg-got-k, .cg-walkhead-col .ph-eyebrow {
  margin: var(--sp-0); font-weight: var(--fw-normal);
}





.cg-walkhead .ph-radar { margin: var(--sp-0); }



.cg-walkhead .ph-radar i {
  animation: cgWalkStep var(--mo-walk-step) ease-in-out infinite alternate;
}
@keyframes cgWalkStep { to { transform: translateY(-2.5px); } }
@media (prefers-reduced-motion: reduce) {
  .cg-walkhead .ph-radar i { animation: none; }
}



.ph-radar {
  flex: 0 0 auto;
  width: var(--sp-12); height: var(--sp-12); border-radius: var(--r-circle);
  display: grid; place-items: center;
  font-size: var(--fs-5); color: var(--primary); border: 2px solid var(--border);
}



.cg-pro { max-width: var(--w-read); }
.cg-pro-k { font-size: var(--fs-2); letter-spacing: .1em; color: var(--primary); font-weight: var(--fw-bold); }



















.cg-facts { display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5) var(--sp-6); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--r-md); }
.cg-facts dt { color: var(--text-muted); font-size: var(--fs-2); white-space: nowrap; }
.cg-facts dd { margin: 0; font-weight: var(--fw-medium); }







.cg-fold { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.cg-fold > summary {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--tap-min); padding: var(--sp-4) var(--sp-6);
  cursor: pointer; color: var(--text-muted); font-size: var(--fs-3);
  line-height: var(--lh-tight);
  list-style: none;          
}
.cg-fold > summary::-webkit-details-marker { display: none; }
.cg-fold > summary::before {
  content: '▸'; flex: 0 0 auto; color: var(--text-muted);
  transition: transform var(--mo-fast) ease;
}
.cg-fold[open] > summary::before { transform: rotate(90deg); }
.cg-fold > div { padding: 0 var(--sp-6) var(--sp-5); }







.cg-hint-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: var(--sp-7);
  min-height: var(--tap-min); padding: var(--sp-4) var(--sp-7);
  font-size: var(--fs-4);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));




  color: color-mix(in srgb, var(--primary) 70%, var(--text));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--surface));
}


.cg-resume-hint {
  margin: var(--sp-7) 0 var(--sp-3);
  font-size: var(--fs-3); line-height: var(--lh-normal); color: var(--text-muted);
}












.cg-door { display: flex; flex-direction: column; margin-top: var(--sp-5); }
.cg-door-go { width: 100%; }


.cg-door .cg-door-go.is-out {




  background: var(--surface); color: var(--primary-fg); border: 1.5px solid var(--border);
  box-shadow: none;
}
.cg-door-go + .cg-door-sub { margin: var(--sp-2) 0 var(--sp-5); }
.cg-door-sub {
  margin: var(--sp-2) 0 var(--sp-5);
  font-size: var(--fs-2); line-height: var(--lh-normal); color: var(--text-muted); text-align: center;
}

.cg-door-link {
  align-self: center; margin-top: var(--sp-3);
  background: none; border: 0; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-3); color: var(--primary); text-decoration: underline; cursor: pointer;
}
.cg-door-note {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-2); line-height: var(--lh-normal); color: var(--text-muted);
}






















.cg-langs { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.cg-lang {
  position: relative;
  padding: var(--sp-2) var(--sp-6); border: 0; background: var(--surface-alt);
  border-radius: var(--r-pill); font-size: var(--fs-2); color: var(--text-muted); white-space: nowrap;
  font-family: inherit; line-height: inherit; -webkit-appearance: none; appearance: none;
  cursor: pointer; margin: 0;
}

.cg-lang::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; min-width: var(--tap-min); height: var(--tap-min);
}

.cg-lang[aria-pressed="true"] { cursor: default; }




.cg-langrow {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; min-height: var(--tap-min);
  padding: var(--sp-4) var(--sp-6); margin: 0 0 var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: var(--fs-3); text-align: left;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cg-langrow.is-on { border-color: var(--primary); color: var(--primary); font-weight: var(--fw-bold); cursor: default; }

.cg-langrow-on { margin-left: auto; }


.cg-lang.is-on {
  background: transparent; box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text); font-weight: var(--fw-bold);
}








.cg-door-head {
  margin-top: var(--sp-6); margin-bottom: var(--sp-4);
  font-size: var(--fs-1); letter-spacing: 0.1em; color: var(--text);
  font-weight: var(--fw-bold); text-align: center;
}































.cg-socials {
  display: flex; flex-direction: row; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.cg-soc {
  flex: 1 1 0; min-width: 0;
  border: 0; background: none; padding: 0;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--text);
}













.cg-soc svg {
  width: 2.75rem; height: 2.75rem; display: block; flex: 0 0 auto;
  padding: var(--sp-6); border-radius: var(--r-circle);
}
.cg-soc.is-google svg { background: var(--soc-google-bg); border: 1px solid var(--control-border); }
.cg-soc.is-kakao svg { background: var(--soc-kakao-bg); }
.cg-soc.is-naver svg { background: var(--soc-naver-bg); }




.cg-soc.is-naver svg path { fill: var(--soc-naver-fg); }
.cg-soc.is-kakao svg path { fill: var(--soc-kakao-fg); }

.cg-soc span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }












.cg-codeok { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.cg-codeok-m { flex: 1; min-width: 0; font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text); }
.cg-codeok-a {
  background: none; border: 0; padding: var(--sp-2) var(--sp-3); cursor: pointer;
  font-size: var(--fs-2); color: var(--text-muted); text-decoration: underline;
}


.cg-or { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-6) 0; }
.cg-or i { flex: 1; height: 1px; background: var(--border); opacity: .6; }


.cg-or span { font-size: var(--fs-1); color: var(--text); font-weight: var(--fw-bold); letter-spacing: 0.06em; }







.cg-door-card { display: flex; flex-direction: column; }



.cg-door-title { text-align: center; }

.cg-door-lab {
  margin-top: var(--sp-6); margin-bottom: var(--sp-2);
  font-size: var(--fs-2); color: var(--text-muted); font-weight: var(--fw-medium);
}


.cg-strip {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}




.cg-strip-dot { width: 0.4rem; height: 0.4rem; border-radius: var(--r-pill); flex: none; }
.cg-strip.is-code .cg-strip-dot { background: var(--warning); }
.cg-strip.is-login .cg-strip-dot { background: var(--primary); }
.cg-strip-l { min-width: 0; }
.cg-strip-k { font-size: var(--fs-1); color: var(--text-muted); letter-spacing: 0.04em; }
.cg-strip-v {
  font-size: var(--fs-5); font-weight: var(--fw-bold); letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.cg-strip-m { font-size: var(--fs-3); font-weight: var(--fw-medium); }
.cg-strip-a {
  background: none; border: 0; padding: var(--sp-2);
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--primary); cursor: pointer; white-space: nowrap;
}
.cg-strip-a.is-mute { color: var(--text-muted); font-weight: var(--fw-medium); }
.cg-strip-x { background: none; border: 0; padding: var(--sp-2); color: var(--text-muted); cursor: pointer; }
.cg-strip-note { margin: 0 0 0 var(--sp-4); font-size: var(--fs-1); color: var(--text-muted); }


















.phone-appbar {
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
  background: var(--header-bg, var(--surface));
  color: var(--header-fg, var(--text));
}


.phone-titlerow { display: flex; align-items: center; gap: var(--sp-2); }
.phone-title {
  font-size: var(--fs-3); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  flex: 1 1 auto; min-width: 0;


  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


.ab-bar-pad { flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min); }

.ph-bar-right { display: inline-flex; align-items: center; gap: var(--sp-2); }










.phone-titlerow.is-mid { position: relative; justify-content: space-between; }
.phone-titlerow.is-mid .phone-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  flex: 0 0 auto; max-width: calc(100% - 4 * var(--tap-min) - var(--sp-8));
  text-align: center;
}



.cg-title-btn {
  border: 0; background: none; padding: var(--sp-0); margin: var(--sp-0);
  color: inherit; font: inherit; text-align: inherit; cursor: pointer;
}
.cg-title-btn:active { opacity: .6; }


.cg-hint-look { margin-top: var(--sp-6); }


.phone-progress { display: flex; gap: var(--sp-1); margin-top: var(--sp-5); }
.phone-progress i {
  flex: 1; height: var(--sw-line); border-radius: var(--r-pill); background: currentColor;
  opacity: .3; transition: opacity var(--mo-fast);
}
.phone-progress i.done { opacity: 1; }
.phone-progress i.now { opacity: .65; }

.ph-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: var(--tap-min); min-height: var(--tap-min);
  padding: 0;
  border: 0; cursor: pointer;
  background: none;
  color: inherit; font: inherit; font-size: var(--fs-5); font-weight: var(--fw-bold);
  line-height: var(--lh-none);
}

.ph-icon:hover { opacity: .75; }
.ph-icon:active { opacity: .55; }





.ph-icon:disabled { opacity: .35; cursor: default; }
.ph-icon:disabled:hover { opacity: .35; }

a.ph-icon { text-decoration: none; }

.cg-tab .n {
  position: absolute; transform: translate(1.1rem, -0.4rem);
  background: var(--error); color: var(--on-accent); border-radius: var(--r-pill);
  font-size: var(--fs-1); font-weight: var(--fw-bold); padding: 0 var(--sp-2); line-height: var(--lh-normal);
}





body.has-tabs .play { padding-bottom: 5rem; }
.cg-chip { font-size: var(--fs-2); font-weight: var(--fw-bold); padding: var(--sp-2) var(--sp-6); border-radius: var(--r-pill); border: 1.5px solid var(--control-border); background: var(--surface); color: var(--text-muted); cursor: pointer; }
.cg-chip[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }



.cg-progress { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--sp-5); }
.cg-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.cg-progress-label { font-size: var(--fs-2); font-weight: var(--fw-bold); }
.cg-progress-num { font-size: var(--fs-4); font-weight: var(--fw-heavy); color: var(--primary); }
.cg-progress-of { font-size: var(--fs-2); color: var(--text-muted); }
.cg-progress-bar { height: var(--sp-2); border-radius: var(--r-pill); background: var(--surface-alt); overflow: hidden; }
.cg-progress-fill { height: 100%; background: var(--primary); border-radius: var(--r-pill); transition: width var(--mo-fast) ease; }
@media (prefers-reduced-motion: reduce) { .cg-progress-fill { transition: none; } }





.cg-asset-logo {
  height: var(--h-thumb, 1.5rem); width: auto; max-width: 40%;



  min-width: 2rem;
  object-fit: contain; flex-shrink: 0;
}




.cg-asset-herowrap { position: relative; min-height: 6rem; }


.cg-asset-herowrap > .cg-asset-hero:only-child {
  position: static; display: block; margin: 0 auto var(--sp-5);
  max-width: 62%; max-height: 8rem;
}
.cg-asset-hero {
  position: absolute; inset: 0; margin: auto;
  max-width: 62%; max-height: 62%; width: auto; height: auto;



  min-height: 3rem;
  object-fit: contain; pointer-events: none;
}

.cg-asset-finish {
  display: block; margin: 0 auto var(--sp-6);
  max-width: 60%; max-height: 9rem; width: auto; height: auto; object-fit: contain;
}


.cg-asset-guide {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md); margin-bottom: var(--sp-4);
}





.cg-asset-board, .cg-asset-checkin, .cg-asset-card {
  display: block; margin-left: auto;
  width: var(--w-thumb, 6rem); height: auto;
  aspect-ratio: 1 / 1; max-width: 40%;
  object-fit: contain; pointer-events: none;
}

body.has-asset-mark .cg-stage { position: relative; }
body.has-asset-mark .cg-stage::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--asset-mark); background-repeat: repeat;
  background-size: 12rem auto; opacity: .05; pointer-events: none;
}


body.has-asset-mark .cg-stage > * { position: relative; z-index: var(--z-raise); }
















.cg-path { position: relative; padding-left: var(--sp-10); }













.cg-path-link { position: absolute; left: calc(var(--sp-10) * -1 + var(--sp-9) / 2 - var(--sp-1) / 2); width: var(--sp-1); background: var(--border); }
.cg-path-link.is-up { top: 0; height: calc(var(--sp-3) + var(--sp-9) / 2); }
.cg-path-link.is-dn { top: calc(var(--sp-3) + var(--sp-9) / 2); bottom: 0; }
.cg-path-node.is-unfolded .cg-path-link.is-up { height: calc(var(--sp-5) + var(--sp-9) / 2); }
.cg-path-node.is-unfolded .cg-path-link.is-dn { top: calc(var(--sp-5) + var(--sp-9) / 2); }
.cg-path-link.is-done { background: var(--success); }

.cg-path-node { position: relative; display: block; width: 100%; text-align: left; padding: var(--sp-3) 0; }

.cg-path-head {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.cg-path-headtxt { flex: 1; min-width: 0; }

.cg-path-chev { flex: none; font-size: var(--fs-1); color: var(--text-muted); }
.cg-path-node.is-unfolded .cg-path-chev { transform: rotate(180deg); color: var(--primary); }
.cg-path-dot {
  position: absolute; left: calc(var(--sp-10) * -1); top: var(--sp-3);
  width: var(--sp-9); height: var(--sp-9); border-radius: var(--r-circle);
  display: grid; place-items: center; font-size: var(--fs-1); font-weight: var(--fw-medium);
  background: var(--surface); border: 2px solid var(--border); color: var(--text-muted); box-sizing: border-box;
}
.cg-path-node.is-done .cg-path-dot { background: var(--success); border-color: var(--success); color: var(--on-accent); }
.cg-path-node.is-now .cg-path-dot { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.cg-path-name { display: block; font-size: var(--fs-3); font-weight: var(--fw-bold); color: var(--text); line-height: var(--lh-tight); }
.cg-path-node.is-lock .cg-path-name { color: var(--text-muted); font-weight: var(--fw-medium); }
.cg-path-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); font-size: var(--fs-1); color: var(--text-muted); }











.cg-path-node.is-unfolded {
  background: var(--surface); outline: 2px solid var(--primary); outline-offset: 0;
  border-radius: var(--r-lg); padding: var(--sp-5);
}

.cg-pathcard { padding: var(--sp-8); }
.cg-path-node.is-unfolded .cg-path-dot { top: var(--sp-5); }




.cg-path-photo {
  flex: none; width: calc(var(--sp-12) + var(--sp-1)); height: calc(var(--sp-12) + var(--sp-1));
  object-fit: cover; border-radius: var(--r-lg); background: var(--surface-alt);
}
.cg-path-node.is-unfolded .cg-path-name { font-size: var(--fs-5); font-weight: var(--fw-heavy); }
.cg-path-node.is-unfolded .cg-path-meta { margin-top: var(--sp-3); }
.cg-path-panel { margin-top: var(--sp-5); }


.cg-path-why { margin: 0; font-size: var(--fs-2); color: var(--text-muted); line-height: var(--lh-normal); }



.cg-path-go {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%;
  background: var(--primary); color: var(--on-accent); border: 0; border-radius: var(--r-md);
  padding: var(--sp-4); font-size: var(--fs-3); font-weight: var(--fw-bold); font-family: inherit;
  cursor: pointer; min-height: var(--tap-min);
}
.cg-path-go.is-again {
  background: none; color: var(--primary);
  border: var(--sp-1) solid var(--border); padding: calc(var(--sp-4) - var(--sp-1));
}


.cg-path-chip { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-1); font-weight: var(--fw-bold); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2); border-radius: var(--r-pill); line-height: var(--lh-normal); white-space: nowrap; }
.cg-path-chip.is-done { background: var(--success-bg); color: var(--success-fg); }
.cg-path-chip.is-now { background: var(--primary); color: var(--on-accent); }
.cg-path-chip.is-lock { background: var(--surface-alt); color: var(--text-muted); }
.cg-path-chip.is-open { background: var(--surface-alt); color: var(--text); font-weight: var(--fw-medium); }

.cg-path-note { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-1); color: var(--text-muted); margin: var(--sp-3) 0 0; line-height: var(--lh-normal); }


.cg-path-eps { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); margin-bottom: var(--sp-4); }
.cg-path-ep {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); font-size: var(--fs-2);
  font-weight: var(--fw-medium); color: var(--text-muted); font-family: inherit; cursor: pointer;
  min-height: var(--tap-min);
}
.cg-path-ep.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-accent); font-weight: var(--fw-bold); }
.cg-path-ep.is-done { background: var(--success-bg); border-color: var(--success-bg); color: var(--success-fg); }
.cg-path-ep.is-lock { background: var(--surface-alt); }
.cg-path-ep-n { font-size: var(--fs-1); opacity: .8; }


.cg-path-epline {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); font-family: inherit; color: var(--text); cursor: pointer;
  text-align: left; margin-bottom: var(--sp-4); min-height: var(--tap-min);
}
.cg-path-epline-l { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cg-path-epline-n { font-size: var(--fs-1); color: var(--text-muted); flex: none; }
.cg-path-epline-t { font-size: var(--fs-3); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-path-sheetrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-2); background: none; border: 0; border-radius: var(--r-sm);
  font-family: inherit; color: var(--text); cursor: pointer; text-align: left; min-height: var(--tap-min);
}
.cg-path-sheetrow.is-on { background: var(--surface-alt); }
.cg-path-sheetrow-l { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cg-path-sheetname { font-size: var(--fs-3); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-path-sheetrow.is-lock .cg-path-sheetname { color: var(--text-muted); }



.cg-stampboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-4); }
.cg-stampboard-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.cg-stampboard-card.is-stamped { border-color: var(--success); background: var(--success-bg); cursor: default; }
.cg-stampboard-card.is-locked { opacity: 0.55; cursor: default; }
.cg-stampboard-card.is-stamped .cg-stampboard-name, .cg-stampboard-card.is-stamped .meta { color: var(--success-fg); }
.cg-stampboard-name { font-weight: var(--fw-bold); }
.cg-celebrate { position: fixed; inset: 0; display: grid; place-items: center; z-index: var(--z-overlay); pointer-events: none; }
.cg-celebrate-card { background: var(--surface); border: 2px solid var(--success); border-radius: var(--r-lg); padding: var(--sp-9) var(--sp-10); text-align: center; box-shadow: var(--shadow-modal); animation: cg-pop var(--mo-celebrate) ease-out; }
.cg-stamp-big { font-size: var(--fs-hero); line-height: var(--lh-none); }
.cg-celebrate-title { font-size: var(--fs-5); font-weight: var(--fw-heavy); color: var(--success-fg); margin-top: var(--sp-4); }
@keyframes cg-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }










.cg-bengrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-6); }



.cg-bengrid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-bencard {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6); text-align: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
}

.cg-bencard.is-ready { border-color: var(--primary); }
.cg-bencard.is-used { opacity: .6; }
.cg-bencard-art {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--r-md); background: var(--surface-alt); overflow: hidden;
}
.cg-bencard-art img { width: 100%; height: 100%; object-fit: contain; }
.cg-bencard-art i { font-size: var(--fs-hero); color: var(--text-muted); }
.cg-bencard-name { font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.cg-bencard-need { font-size: var(--fs-2); color: var(--text-muted); }

.cg-bencard-left { font-size: var(--fs-2); color: var(--warning-fg); font-weight: var(--fw-bold); }
.cg-benleft { text-align: center; color: var(--warning-fg); font-weight: var(--fw-bold); }
.cg-bencard-chip {
  font-size: var(--fs-2); font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-5); border-radius: var(--r-pill);
  border: 1px solid var(--control-border); color: var(--text-muted);
}
.cg-bencard.is-ready .cg-bencard-chip { border-color: var(--primary); color: var(--primary); }



.cg-bencard-chip.is-done {
  background: var(--error-bg); border-color: var(--error); color: var(--error-fg);
}

.cg-benhero {
  display: grid; place-items: center; margin: var(--sp-6) auto;



  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-7); background: var(--surface);
}
.cg-benhero img { width: 100%; max-width: var(--w-form); height: auto; object-fit: contain; }



.cg-benhero > i { font-size: var(--fs-hero); color: var(--text-muted); }





.cg-benhero-gift {
  position: absolute; right: var(--sp-5); bottom: var(--sp-5);
  margin-bottom: var(--sp-0);
}


.cg-benhero-name {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-3);
  text-align: center; font-weight: var(--fw-bold); font-size: var(--fs-5);
  color: var(--primary); margin-bottom: var(--sp-6);
}



.cg-benfacts {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}
.cg-benfact { font-size: var(--fs-3); color: var(--text-muted); text-align: center; }
.cg-benfact.is-cond { font-size: var(--fs-4); font-weight: var(--fw-bold); color: var(--text); }
.cg-benfact.is-left { color: var(--warning-fg); font-weight: var(--fw-bold); }


.cg-benintro {
  text-align: center; line-height: var(--lh-relaxed);
  margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border);
  margin-bottom: var(--sp-7);
}















.cg-benguide {
  line-height: var(--lh-relaxed); text-align: left;
  margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border);
}

.cg-benguide img, .cg-benguide video { max-width: 100%; height: auto; border-radius: var(--r-md); }














.cg-bendetail.is-guided { overflow: visible; }
.cg-bendetail.is-guided .cg-benact.btn-primary {
  position: sticky; z-index: var(--z-sticky);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-modal);
}



.cg-benact {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; margin-bottom: var(--sp-5);
}




.cg-benhow-head { display: grid; justify-items: center; gap: var(--sp-2); }


.cg-benhow-icon {
  display: grid; place-items: center;
  width: var(--sp-11); height: var(--sp-11); margin-bottom: var(--sp-2);
  border-radius: var(--r-circle); background: var(--primary); color: var(--on-accent);
  font-size: var(--fs-5);
}
.cg-benhow-h { text-align: center; font-size: var(--fs-5); font-weight: var(--fw-bold); }
.cg-benhow-sub { text-align: center; color: var(--text-muted); line-height: var(--lh-relaxed); }
.cg-benhow-note { text-align: center; line-height: var(--lh-relaxed); }


.cg-benhow-box {
  margin-top: var(--sp-7); padding: var(--sp-6);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.cg-benhow-boxh {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5); font-weight: var(--fw-bold);
}
.cg-benhow-boxh i {
  display: grid; place-items: center;
  width: var(--sp-9); height: var(--sp-9);
  border-radius: var(--r-circle); background: var(--primary); color: var(--on-accent);
  font-size: var(--fs-2);
}

.cg-benhow-place {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); font-weight: var(--fw-bold);
}
.cg-benhow-place i { color: var(--primary); }
.cg-benhow-addr { margin-top: var(--sp-2); margin-left: var(--sp-7); color: var(--text-muted); }
.cg-benhow-notes { margin: 0; padding-left: var(--sp-8); }
.cg-benhow-notes li { line-height: var(--lh-relaxed); color: var(--text-muted); }

.cg-benhow-box .cg-benact { margin-bottom: 0; }














.cg-walkmap-onerow {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-7);
}
.cg-walkmap-onerow > * { min-width: 0; text-align: center; }

.cg-benexp {
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px dashed var(--border); text-align: center;
}

.cg-benuse-img { display: block; width: 100%; max-width: 12rem; margin: var(--sp-5) auto; border-radius: var(--r-md); }
.cg-benuse-ok { width: 100%; margin-top: var(--sp-6); }


.cg-benuse-touch {
  display: grid; place-items: center; gap: var(--sp-4);
  width: 100%; min-height: 7rem; margin-top: var(--sp-6);
  border: 2px dashed var(--primary); border-radius: var(--r-lg);
  background: var(--surface-alt); color: var(--primary);
  font-size: var(--fs-5); font-weight: var(--fw-bold); cursor: pointer;
}
.cg-benuse-touch i { font-size: var(--fs-hero); }
.cg-benuse-touch:active { background: var(--primary); color: var(--on-accent); }
.cg-benuse-hint { text-align: center; color: var(--text-muted); line-height: var(--lh-relaxed); }





.cg-benuse-group {
  display: flex; flex-direction: column; gap: var(--sp-4);
  margin: var(--sp-5) 0; padding: var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md);
}
.cg-benuse-legend {
  font-weight: 600; color: var(--text); margin-bottom: var(--sp-1);
}
.cg-benuse-field { display: flex; flex-direction: column; gap: var(--sp-2); }

.cg-benuse-label { font-size: var(--fs-2); color: var(--text-muted); }

.cg-benuse-group .form-control { min-height: var(--sp-11); }





.cg-draw-board {
  display: grid; gap: var(--sp-3); margin: var(--sp-5) 0;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 380px) { .cg-draw-board { grid-template-columns: repeat(2, 1fr); } }
.cg-draw-cell {
  display: grid; gap: var(--sp-2); justify-items: center; align-content: start;
  padding: var(--sp-4) var(--sp-3); border: 2px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); text-align: center;
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text);
}
.cg-draw-cell img { width: 3rem; height: 3rem; object-fit: contain; }
.cg-draw-cell.is-out { opacity: 0.35; }


.cg-draw-cell.is-lit { border-color: var(--primary); background: var(--primary); color: var(--on-accent); }
.cg-draw-cell.is-win { border-color: var(--success-fg); background: var(--success-bg); color: var(--success-fg); }
.cg-draw-out { font-size: var(--fs-1); font-weight: var(--fw-normal); }



.cg-wheel-wrap { position: relative; display: grid; justify-items: center; margin: var(--sp-5) 0; }
.cg-wheel-wrap .rf-wheel { margin-bottom: 0; }

.cg-draw-won {
  display: grid; gap: var(--sp-3); justify-items: center;
  padding: var(--sp-6); margin: var(--sp-5) 0;
  border: 2px solid var(--success-fg); border-radius: var(--r-lg); background: var(--success-bg);
}
.cg-draw-won img { width: 7rem; height: 7rem; object-fit: contain; }
.cg-draw-won-name { font-size: var(--fs-5); font-weight: var(--fw-heavy); color: var(--success-fg); }


.cg-draw-rank { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); text-align: center; }
.cg-draw-btn { width: 100%; margin-top: var(--sp-4); }







.gv-body { margin: 0; }
.gv-wrap {
  min-height: 100dvh; display: grid; gap: var(--sp-4);
  align-content: center; justify-items: center;
  padding: var(--sp-5); text-align: center;
  background: var(--bg);
}
.gv-head { display: grid; gap: var(--sp-1); }
.gv-title { color: var(--text-muted); font-size: var(--fs-3); }
.gv-point { font-size: var(--fs-5); font-weight: var(--fw-heavy); }

.gv-qr {
  display: grid; place-items: center;
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--qr-paper); min-width: 12rem; min-height: 12rem;
}
.gv-qr img, .gv-qr canvas { display: block; max-width: 100%; height: auto; }
.gv-note { font-size: var(--fs-5); font-weight: var(--fw-bold); margin: 0; }
.gv-help { color: var(--text-muted); font-size: var(--fs-3); margin: 0; }


.cg-scan {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--text); margin-bottom: var(--sp-4);
}
.cg-scan video { width: 100%; height: 100%; object-fit: cover; }

.cg-scan-fail {
  color: var(--bg); font-size: var(--fs-5); font-weight: var(--fw-bold);
  padding: var(--sp-5); margin: 0; text-align: center;
}

.cg-benuse-alt { width: 100%; margin-top: var(--sp-3); }

.cg-benefit { border-top: 1px solid var(--border); padding: var(--sp-5) 0; }
.cg-benefit-name { font-weight: var(--fw-bold); }
.cg-benefit-state { color: var(--warning-fg); font-size: var(--fs-3); font-weight: var(--fw-bold); }
.cg-benefit-state.is-done { color: var(--success-fg); }









.n-preset {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) { .n-preset { grid-template-columns: 1fr; } }





.ad-linkbtn {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--primary-fg); text-decoration: underline; cursor: pointer;
}
.ad-linkbtn:hover, .ad-linkbtn:focus-visible { color: var(--primary); }
.ad-modal {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--scrim-strong);
  display: grid; place-items: center; padding: var(--sp-6);
}
.ad-modal-box {
  background: var(--surface); color: var(--text);
  border-radius: var(--r-lg); box-shadow: var(--shadow-modal);
  padding: var(--sp-8);
  width: min(34rem, 100%); max-height: 86dvh; overflow: auto;
  display: flex; flex-direction: column; gap: var(--sp-4);
}




.st-detail > td { background: var(--surface-alt); padding: var(--sp-6); }
.st-detail-h { font-weight: var(--fw-bold); margin-top: var(--sp-4); }
.st-detail-h:first-child { margin-top: 0; }
.st-detail-list { list-style: none; margin: var(--sp-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.st-detail-list li { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.st-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-4); }
.st-sent {
  margin: var(--sp-3) 0; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
}
.st-sent.is-bad { border-color: var(--error); }
.st-sent-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.st-sent-body {
  margin: var(--sp-3) 0 0; white-space: pre-wrap; word-break: break-word;
  font: inherit; font-size: var(--fs-3); color: var(--text);
}

.st-row {
  display: grid; grid-template-columns: 2.5ch minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) 0;
}
.st-row + .st-row { border-top: 1px solid var(--border); }
.st-no { font-size: var(--fs-1); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.st-name { font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-num { font-size: var(--fs-2); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.st-track {
  grid-column: 2 / -1;
  display: block; background: var(--surface-alt); border-radius: var(--r-pill);
  height: var(--sp-3); overflow: hidden;
}
.st-fill {




  display: block; height: 100%; background: var(--text-muted); opacity: .28; border-radius: var(--r-pill);


  transition: width var(--mo-slow) cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .st-fill { transition: none; } }


.cg-cover { width: 100%; max-height: 14rem; object-fit: cover; border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.cg-place-photo { width: 100%; max-height: 12rem; object-fit: cover; border-radius: var(--r-md); margin-bottom: var(--sp-4); }





.cg-go { display: block; width: 100%; margin-top: var(--sp-7); }










.card.is-art { padding: var(--sp-0); --rt-pad: var(--sp-0); position: relative; }
.card.is-art .cg-el-text { margin: var(--sp-0); }
.card.is-art .rt-img { margin: var(--sp-0); width: 100%; }


.card.is-art .cg-elnav {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: var(--sp-0); padding: var(--sp-8) var(--sp-7) var(--sp-7);
  background: linear-gradient(to top, var(--scrim-strong), transparent);
}

.card.is-art .rt-img { max-height: 76dvh; object-fit: cover; }

.cg-elnav { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-7); }


.cg-jump-now { display: block; margin: var(--sp-5) auto 0; }

.cg-elnav .cg-go { margin-top: var(--sp-0); flex: 1 1 auto; width: auto; }



.cg-elnav .icon-btn { width: var(--tap-min); height: var(--tap-min); }



.cg-elnav .cg-hint-btn { width: auto; flex: 1 1 auto; margin-top: var(--sp-0); }












.cg-stampboard-thumb { width: 100%; height: 4.5rem; object-fit: cover; border-radius: var(--r-sm); }
.ed-thumb { width: var(--sp-12); height: var(--sp-12); object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); }

.cg-cert { text-align: center; padding: var(--sp-10) var(--sp-7); }
.cg-cert-badge { font-size: var(--fs-hero); line-height: var(--lh-none); }
.cg-cert-name { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); letter-spacing: 0.3em; margin-top: var(--sp-4); }
.cg-cert-course { font-size: var(--fs-5); font-weight: var(--fw-heavy); margin: var(--sp-3) 0; }
.cg-cert-meta { color: var(--text-muted); font-size: var(--fs-3); }
.cg-cert-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-5) 0; }
.cg-cert-who { font-size: var(--fs-5); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }




.cg-cert-sheet { margin-bottom: var(--sp-7); }


.cg-cert-canvas {
  display: block; width: 67%; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: var(--r-md); box-shadow: var(--shadow-modal);
}

.cg-cert-h {
  font-size: var(--fs-5); font-weight: var(--fw-heavy);
  text-align: center; margin: var(--sp-7) var(--sp-0) var(--sp-6);
}





.cg-share { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
.cg-share .btn { flex: 1 1 auto; }
.cg-share-note:empty { display: none; }








.cg-sheet-scrim {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--scrim-strong);
  opacity: 0; transition: opacity var(--mo-fast) ease-out;


  cursor: pointer;
}
.cg-sheet-scrim.is-on { opacity: 1; }
.cg-sheet {
  position: fixed; left: 0; right: 0; z-index: var(--z-overlay);

  bottom: 0;


  min-height: 38dvh; max-height: 82dvh; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-modal);




  padding-bottom: var(--safe-bottom);



  margin: 0 auto;

  transform: translateY(100%);






  transition: transform var(--mo-fast) ease-out;
}
.cg-sheet.is-on { transform: translateY(0); }












@supports (top: 100dvh) {
  .cg-sheet { bottom: auto; top: 100dvh; transform: translateY(0); }
  .cg-sheet.is-on { transform: translateY(-100%); }
}




.cg-sheet:focus { outline: none; }


@media (min-width: 641px) { .cg-sheet { max-width: var(--w-phone); } }











.cg-sheet.has-embed { height: 72dvh; }
@supports not (height: 72dvh) { .cg-sheet.has-embed { height: 72vh; } }

.cg-sheet-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-7) var(--sp-5);
}
.cg-sheet-head b { font-size: var(--fs-5); }
.cg-sheet-head .sp { flex: 1; }
.cg-sheet-head .icon-btn { flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min); }
.cg-sheet-body { overflow-y: auto; padding: 0 var(--sp-7) var(--sp-10); }








.cg-sheet-body.is-embed {
  overflow: hidden; display: flex; flex-direction: column;
  padding-bottom: var(--sp-7);






  flex: 1 1 auto; min-height: 0;
}
.cg-sheet-body.is-embed .cg-embed { flex: 1 1 auto; height: auto; min-height: 0; }




.cg-embed {
  display: block; width: 100%; height: 60vh; border: 0;
  border-radius: var(--r-md); background: var(--surface);
}





.cg-sheet-acts { display: flex; gap: var(--sp-8); margin-top: var(--sp-9); }
.cg-sheet-acts .btn {
  flex: 1 1 0; min-height: var(--tap-min); padding: var(--sp-6) var(--sp-7);
  font-size: var(--fs-4); justify-content: center;
}





.cg-bag-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.cg-bag-row {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5); background: var(--surface);
}
.cg-bag-row.is-locked { background: var(--surface-alt); }

.cg-bag-row.is-locked .cg-got-side { display: flex; align-items: center; }
.cg-got-art .lock { font-size: var(--fs-5); color: var(--text-muted); }

.cg-bag-ep {
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
  margin: var(--sp-6) 0 var(--sp-3);
}
.cg-bag-ep:first-child { margin-top: var(--sp-0); }


.cg-hint-step {
  border-radius: var(--r-md); padding: var(--sp-5);
  background: var(--surface-alt); margin-bottom: var(--sp-5);
}
.cg-hint-step .k { display: block; font-size: var(--fs-2); color: var(--text-muted); margin-bottom: var(--sp-3); }
.cg-hint-step .btn { width: 100%; }
.cg-hint-step.is-shut .k { margin-bottom: var(--sp-0); }



.cg-got { text-align: center; }

.cg-got-art {
  width: 60%; max-width: var(--sp-12); margin: var(--sp-7) auto;
  background: var(--surface-alt); border-radius: var(--r-lg); padding: var(--sp-7);
}
.cg-got-art img { display: block; width: 100%; height: auto; }
.cg-got-name { font-size: var(--fs-5); font-weight: var(--fw-heavy); }
.cg-got-sub { color: var(--text-muted); font-size: var(--fs-3); margin-top: var(--sp-3); }


.cg-got-stock { color: var(--primary); font-size: var(--fs-2); font-weight: var(--fw-bold); margin-top: var(--sp-4); }


.cg-new {
  display: inline-block; margin-left: var(--sp-3);
  background: var(--error); color: var(--on-accent); border-radius: var(--r-pill);
  font-size: var(--fs-1); font-weight: var(--fw-bold); padding: 0 var(--sp-3);
  letter-spacing: normal; vertical-align: middle;
}

.cg-got-desc {
  margin-top: var(--sp-6); text-align: left;
  font-size: var(--fs-4); line-height: var(--lh-relaxed); color: var(--text);
}




.cg-got.is-item { display: flex; gap: var(--sp-6); align-items: flex-start; text-align: left; }
.cg-got.is-item .cg-got-art {
  flex: 0 0 42%; width: auto; max-width: none; margin: var(--sp-0);
  padding: var(--sp-0); background: none; overflow: hidden;
}

.cg-got.is-item .cg-got-art.is-empty {
  background: var(--surface-alt); padding: var(--sp-7); text-align: center;
}
.cg-got.is-item .cg-got-art img { border-radius: var(--r-md); }
.cg-got-side { flex: 1; min-width: 0; }
.cg-got-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cg-got.is-item .cg-got-name { font-size: var(--fs-5); line-height: var(--lh-tight); }

.cg-got-rule {
  position: relative; margin: var(--sp-5) 0;
  border-top: 1px solid var(--border);
}
.cg-got-rule::before, .cg-got-rule::after {
  content: ''; position: absolute; top: 0;
  width: var(--sp-2); height: var(--sp-2); background: var(--border);
  transform: translateY(-50%) rotate(45deg);
}
.cg-got-rule::before { left: 0; }
.cg-got-rule::after { right: 0; }
.cg-got.is-item .cg-got-desc { margin-top: var(--sp-0); }

.cg-got-msg { margin-top: var(--sp-6); font-weight: var(--fw-bold); }
.cg-got.is-item .cg-got-sub { margin-top: var(--sp-2); }









.cg-trophy {
  width: calc(var(--sp-12) * 1.5); height: calc(var(--sp-12) * 1.5);



  margin: var(--sp-9) auto var(--sp-7);
  border-radius: var(--r-circle); background: var(--primary); color: var(--on-accent);
  display: grid; place-items: center; font-size: calc(var(--fs-hero) * 1.35);
}
.cg-done-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }
.cg-done-grid figure { margin: 0; text-align: center; }
.cg-done-grid img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--surface-alt); }
.cg-done-grid figcaption { font-size: var(--fs-2); margin-top: var(--sp-2); }



.ct-phone { width: var(--w-phone); max-width: 100%; margin: 0 auto; }
.ct-stage { position: relative; background: var(--surface-alt); border-radius: var(--r-md); overflow: hidden; }
.ct-stage .meta { padding: var(--sp-9); text-align: center; }
.ct-bg { display: block; width: 100%; height: auto; }

.ct-box {
  position: absolute; transform: translate(-50%, -50%);
  cursor: move; user-select: none; touch-action: none;
  line-height: var(--lh-tight); white-space: pre-wrap; word-break: break-word;
  outline: 1px dashed var(--control-border); outline-offset: var(--sp-1);
}
.ct-box.is-on { outline-color: var(--primary); }
.ct-handle {
  position: absolute; right: calc(var(--sp-5) * -1); top: 50%;
  width: var(--sp-6); height: var(--sp-6); transform: translateY(-50%);
  background: var(--primary); border-radius: var(--r-circle); cursor: ew-resize;
}

.ct-arts { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.ct-art {
  width: var(--sp-12); padding: var(--sp-0); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.ct-art.is-on { border-color: var(--primary); }
.ct-art img { display: block; width: 100%; height: auto; }

.ct-slots { display: grid; gap: var(--sp-5); }
.ct-slot { display: flex; align-items: center; gap: var(--sp-5); }
.ct-slot-thumb {
  width: var(--sp-11); min-height: var(--sp-11);
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text-muted); font-size: var(--fs-2);
  overflow: hidden;
}
.ct-slot-thumb img { display: block; width: 100%; height: auto; }


#art-slots .ct-slot { padding: var(--sp-5) var(--sp-0); border-bottom: 1px solid var(--border); }
#art-slots .ct-slot:last-child { border-bottom: 0; }
.art-slot-main { flex: 1 1 auto; min-width: 0; }
.art-slot-main .meta { margin: var(--sp-1) var(--sp-0) var(--sp-0); }


.cg-ben-img img.is-fallback, .cg-artfallback { opacity: 0.55; }
.cg-artfallback { display: block; width: var(--sp-11); height: auto; border-radius: var(--r-md); }
.ct-field {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5); margin-bottom: var(--sp-5); background: var(--surface);
}
.ct-field.is-on { border-color: var(--primary); }
.ct-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.ct-tools input[type=range] { flex: 1 1 auto; min-width: var(--sp-12); }
.ct-color { width: var(--tap-min); height: var(--sp-10); padding: var(--sp-0); border: 0; background: none; cursor: pointer; }
.ct-tokens { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


.cg-nick { display: flex; gap: var(--sp-4); margin: var(--sp-6) 0; }
.cg-nick .form-control { flex: 1 1 auto; min-width: 0; }










.cg-benefit-img,
.cg-benefit-how { display: block; width: 100%; max-width: 16rem; border-radius: var(--r-md); margin: var(--sp-3) auto; }
.cg-benefit-stamp { width: 5rem; height: 5rem; object-fit: contain; }








.cg-clue-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-card);
  padding: var(--sp-6) var(--sp-7) var(--sp-7); margin-bottom: var(--sp-6);
}
.cg-clue-card.is-locked { background: var(--surface-alt); box-shadow: none; }
.cg-clue-chip {
  display: inline-block; margin-bottom: var(--sp-5);
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
  background: var(--surface-alt); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-6);
}
.cg-clue-card.is-locked .cg-clue-chip { background: var(--surface); }



.cg-clue-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-7); }
.cg-clue-row + .cg-clue-row { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.cg-clue-art { flex: 0 0 42%; min-width: 0; }
.cg-clue-art img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }


.cg-clue-art.is-empty {
  flex: 0 0 var(--tap-min); width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-circle); background: var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.cg-clue-side { flex: 1 1 8rem; min-width: 0; }
.cg-clue-name { font-size: var(--fs-5); font-weight: var(--fw-heavy); line-height: var(--lh-tight); }
.cg-clue-side .meta { margin: var(--sp-2) 0 0; }
.cg-clue-logo { max-width: 12rem; max-height: 4rem; object-fit: contain; }
.cg-clue-word { display: flex; gap: var(--sp-4); flex: 1 1 11rem; min-width: 0; }
.cg-clue-word .form-control { flex: 1 1 auto; min-width: 0; }

.cg-clue-word .form-control, .cg-clue-word .btn { min-height: var(--tap-min); }
.cg-clue-word .btn { flex: 0 0 auto; }

.cg-clue-err { flex: 1 1 100%; color: var(--error); font-size: var(--fs-2); margin: var(--sp-0); }

.cg-clue-tip {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  margin: var(--sp-2) 0 0; padding: var(--sp-6) var(--sp-7);
  background: var(--surface-alt); border-radius: var(--r-lg);
  font-size: var(--fs-3); color: var(--text-muted); line-height: var(--lh-normal);
}
.cg-clue-tip i { margin-top: var(--sp-1); }
.cg-clue-tip b { color: var(--text); letter-spacing: .06em; margin-right: var(--sp-3); }



.cg-spot { display: block; border-top: 1px solid var(--border); padding: var(--sp-5) 0; color: inherit; text-decoration: none; }
.cg-spot-h { display: flex; gap: var(--sp-3); align-items: center; }
.cg-spot-kind {
  font-size: var(--fs-2); font-weight: var(--fw-bold);
  color: var(--text-muted); border: 1px solid var(--control-border);
  border-radius: var(--r-pill); padding: 0 var(--sp-4);
}
.cg-spot-name { font-weight: var(--fw-bold); }
.cg-spot-img { width: 100%; max-width: 16rem; border-radius: var(--r-md); margin-bottom: var(--sp-3); display: block; }





.tab-btn.is-dirty::after,
.card-title.is-dirty::after {
  content: ''; display: inline-block;
  width: var(--sp-2); height: var(--sp-2);
  margin-left: var(--sp-3);
  border-radius: var(--r-circle);
  background: var(--primary);
  vertical-align: middle;
}




.sv-page { max-width: 42rem; margin: 0 auto; }
.sv-intro { color: var(--text-muted); white-space: pre-wrap; }




.req-mark { color: var(--error); }




.open-chk { display: flex; flex-direction: column; gap: var(--sp-1); }
.open-chk-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-3); line-height: var(--lh-tight);
}
.open-chk-row > span { min-width: 0; overflow-wrap: anywhere; }
.open-chk-row.is-head { font-size: var(--fs-2); color: var(--text-muted); font-weight: var(--fw-bold); }

.open-chk-row.is-bad { background: var(--error-bg); }
.open-chk-row.is-bad > span:first-child { color: var(--error); font-weight: var(--fw-bold); }
.open-chk-row.is-ok > span:first-child { color: var(--text-muted); }
@media (max-width: 34rem) {

  .open-chk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .open-chk-row > span:nth-child(2) { display: none; }
}


.open-fail-msg { line-height: var(--lh-relaxed); margin-bottom: var(--sp-6); }
.sv-opts { display: grid; gap: var(--sp-3); }
.sv-opt { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; line-height: var(--lh-normal); }

.sv-save-phone { margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--text-muted); }
.sv-addr { display: grid; gap: var(--sp-3); }
.sv-thanks { font-weight: var(--fw-bold); }



.sv-fields { display: grid; gap: var(--sp-5); }
.sv-fcard { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); background: var(--surface); }

.sv-fpeek { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-3); color: var(--text); }

.sv-fhead { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sv-fnum { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }
.sv-ftype { font-size: var(--fs-2); color: var(--text-muted); }
.sv-facts { display: flex; gap: var(--sp-2); margin-left: auto; }


.sv-share { margin-top: var(--sp-8); border-top: 1px solid var(--border); padding-top: var(--sp-6); }
.sv-link { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.sv-link-head { display: flex; align-items: center; gap: var(--sp-4); }
.sv-link-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.sv-link-row .form-control { flex: 1; min-width: 12rem; }


.sv-sum { display: grid; gap: var(--sp-3); }
.sv-sumrow { display: flex; align-items: center; gap: var(--sp-3); }
.sv-sumlabel { flex: none; min-width: 8rem; font-size: var(--fs-3); }
.sv-bar { flex: 1; height: var(--sp-4); background: var(--surface-alt); border-radius: var(--r-pill); overflow: hidden; }
.sv-bar-fill { display: block; height: 100%; background: var(--primary); }
.sv-bar-n { flex: none; font-size: var(--fs-2); color: var(--text-muted); }
.sv-samples { margin: 0; padding-left: var(--sp-7); color: var(--text); font-size: var(--fs-3); line-height: var(--lh-normal); }



.sv-err { color: var(--error); font-size: var(--fs-2); margin-top: var(--sp-2); }


.sv-danger { border-color: var(--error); }
.form-control.is-bad { border-color: var(--error); }


.sv-phone { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.sv-phone .sv-cc { flex: none; width: auto; min-width: 9rem; }
.sv-phone input { flex: 1; min-width: 10rem; }


.sv-pie-wrap { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.sv-pie { width: 9rem; height: 9rem; flex: none; transform: rotate(-90deg); }
.sv-legend { list-style: none; margin: 0; padding: 0; font-size: var(--fs-3); line-height: var(--lh-relaxed); }
.sv-legend li { display: flex; align-items: center; gap: var(--sp-3); }
.sv-swatch { width: var(--sp-5); height: var(--sp-5); border-radius: var(--r-sm); flex: none; background: var(--primary); }



@media print {
  .sv-noprint, .topbar, .rail, .sidebar { display: none !important; }
  .sv-result .card { break-inside: avoid; page-break-inside: avoid; border-color: var(--border); }
  .sv-page { max-width: none; }
  body { background: var(--surface); }
}













.cg-benpop {
  position: fixed; left: 0; right: 0; top: 0; height: 100dvh;
  z-index: var(--z-notice); display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim-strong); cursor: pointer;
}
.cg-benpop-card { cursor: auto; }







.cg-benpop-card {
  width: 100%; max-width: 30rem; background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-8); padding-bottom: var(--safe-bottom);
  display: grid; gap: var(--sp-3); justify-items: center; text-align: center;
  max-height: 82dvh; overflow-y: auto;

  transform: translateY(100%); transition: transform var(--mo-sheet) ease-out;
  position: relative;
}


.cg-benpop-x { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.cg-benpop.is-up .cg-benpop-card { transform: translateY(0); }
.cg-benpop-img { width: 100%; max-width: 14rem; border-radius: var(--r-md); }
.cg-benpop-title { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }
.cg-benpop-name { font-size: var(--fs-5); font-weight: var(--fw-heavy); }
.cg-benpop-acts { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }


.cg-stars { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cg-star { font-size: var(--fs-5); line-height: var(--lh-none); background: none; border: none; cursor: pointer; color: var(--control-border); padding: var(--sp-2); }
.cg-star.is-on { color: var(--warning); }
.cg-map { margin-top: var(--sp-4); }





.cg-walkmap {
  position: relative; margin: var(--sp-4) 0;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-alt);
}




.cg-walkmap-box { position: relative; height: var(--walkmap-h); }
.cg-walkmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; }


.cg-walkmap-grid line { stroke: var(--control-border); stroke-width: var(--sw-line); opacity: 0.5; }
.cg-walkmap-line {
  stroke: var(--primary); stroke-width: var(--sw-strong);
  stroke-linecap: round; stroke-dasharray: var(--sw-dash);
}

.cg-walkmap-ring { fill: var(--primary); fill-opacity: 0.12; stroke: var(--primary); stroke-width: var(--sw-line); }



.cg-walkmap-goal { r: var(--sp-5); fill: var(--primary); stroke: var(--surface); stroke-width: var(--sw-strong); }
.cg-walkmap-goal-tail { fill: var(--surface); stroke: none; }
.cg-walkmap-back { fill: var(--text-muted); opacity: 0.55; }
.cg-walkmap-me,
.cg-walkmap-arrow { fill: var(--success); stroke: var(--surface); stroke-width: var(--sw-line); }

.cg-walkmap-trail { fill: none; stroke: var(--success); stroke-width: var(--sw-line); opacity: 0.45; stroke-linejoin: round; stroke-linecap: round; }

.cg-walkmap-acc { fill: var(--success); fill-opacity: 0.08; stroke: var(--success); stroke-width: var(--sw-line); stroke-opacity: 0.35; }

.cg-walkmap-scale { stroke: var(--text-muted); stroke-width: var(--sw-active); stroke-linecap: butt; }
.cg-walkmap-scaletext { fill: var(--text-muted); font-size: var(--fs-1); font-weight: var(--fw-bold); }
.cg-walkmap-n {
  position: absolute; top: var(--sp-2); right: var(--sp-3);
  font-size: var(--fs-1); font-weight: var(--fw-bold); color: var(--text-muted);
}
.cg-walkmap-note {
  margin: 0; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-2); color: var(--text-muted); text-align: center;
}
.cg-walkmap-note:empty { display: none; }






.cg-walkmap-wrap { --walkmap-h: 16.8rem; margin: var(--sp-4) 0; }
.cg-walkmap-wrap .cg-walkmap { margin: 0; }











.cg-walkmap-stack { position: relative; min-height: var(--walkmap-h); }
.cg-walkmap-kakao { height: var(--walkmap-h); }
.cg-walkmap-stack .cg-walkmap-kakao { position: absolute; inset: 0; height: auto; }
.cg-walkmap-kakao.is-waiting { opacity: 0; pointer-events: none; }

.cg-walkmap-diag {
  margin: var(--sp-2) 0 0; font-size: var(--fs-1); color: var(--text-muted);
  word-break: break-all;
}




.cg-walkmap-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-7);
}
.cg-walkmap-btn {


  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  flex: 0 0 auto; white-space: nowrap;   


  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--control-border); background: var(--surface); color: var(--text);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-2); font-weight: var(--fw-bold); cursor: pointer;
}



a.cg-walkmap-btn { text-decoration: none; }

.cg-walkmap-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.cg-walkmap-nav:empty { display: none; }





.cg-walkmap-btn .cg-navlogo {



  height: var(--sp-8); width: auto; max-width: var(--sp-11);


  object-fit: contain; display: block; flex: 0 1 auto; min-width: 0;
}


.cg-walkmap-none {
  margin: var(--sp-4) 0 0; padding: var(--sp-5);
  border: 1px dashed var(--control-border); border-radius: var(--r-md);
  font-size: var(--fs-2); color: var(--text-muted); text-align: center;
}
.cg-walkmap-none + .cg-walkmap-none { margin-top: var(--sp-2); border-style: solid; }






.cg-iconpick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cg-iconpick-b {
  display: grid; place-items: center;
  width: var(--sp-9); height: var(--sp-9);
  border: 1.5px solid var(--control-border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-muted);
  font-size: var(--fs-2); font-weight: var(--fw-bold); cursor: pointer;
}
.cg-iconpick-b.is-on { border-color: var(--primary); background: var(--primary); color: var(--on-accent); }








.cg-journey { padding-left: 0; padding-right: 0; }






.cg-journey > .card-title { padding-left: var(--sp-7); padding-right: var(--sp-7); }
.cg-journey .cg-map.is-full { margin: 0; }




.cg-journey .cg-map.is-full .cg-trail-stack {
  --trail-h: max(16rem, calc(100dvh - 22rem));
  margin-top: 0; border-radius: 0;
}
.cg-journey .cg-map.is-full .cg-trail-kakao,
.cg-journey .cg-map.is-full .cg-trail { border-left: 0; border-right: 0; border-radius: 0; }

.cg-journey .cg-trail-list { margin-top: var(--sp-5); }
.cg-journey .cg-trail-foot { border-top: 1px solid var(--border); padding-top: var(--sp-5); }

.cg-trail-stack {
  --trail-h: 15.5rem;
  position: relative; min-height: var(--trail-h); margin-top: var(--sp-4);
}
.cg-trail-kakao {
  position: absolute; inset: 0;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}


.cg-trail-kakao.is-waiting { opacity: 0; pointer-events: none; }






.cg-mappin {
  position: relative; display: block;
  --pin-d: var(--sp-11);          
  --pin-bw: var(--sp-2);          
  --pin-badge: var(--sp-9);       
}










.cg-mappin b {
  display: grid; place-items: center; overflow: hidden;
  width: var(--pin-d); height: var(--pin-d); border-radius: var(--r-circle);
  font-size: var(--fs-3); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--text-muted);
  border: var(--pin-bw) solid var(--map-pin-line);
  box-shadow: var(--shadow-card);
}



.cg-mappin::after {
  content: ''; display: block; width: 0; height: 0; margin: calc(var(--pin-bw) * -1) auto 0;
  border-left: calc(var(--pin-d) / 3) solid transparent;
  border-right: calc(var(--pin-d) / 3) solid transparent;
  border-top: calc(var(--pin-d) / 4) solid var(--map-pin-line);
}

.cg-mappin.has-photo b { padding: 0; }
.cg-mappin b img { width: 100%; height: 100%; object-fit: cover; display: block; }










.cg-mappin.is-done:not(.has-photo) b { background: var(--success); color: var(--map-pin-ink); }



.cg-mappin u {
  position: absolute; top: calc(var(--sp-2) * -1); right: calc(var(--sp-2) * -1);
  display: grid; place-items: center; text-decoration: none;
  width: var(--pin-badge); height: var(--pin-badge); border-radius: var(--r-circle);
  background: var(--primary); color: var(--on-accent);
  font-size: var(--fs-2); border: var(--pin-bw) solid var(--map-pin-line);
  box-shadow: var(--shadow-card);
}
.cg-mappin.is-done u { background: var(--success); }


.cg-mappin em {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: var(--sp-1); padding: 0 var(--sp-2); border-radius: var(--r-sm);
  white-space: nowrap; font-style: normal;
  font-size: var(--fs-1); font-weight: var(--fw-bold);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.cg-trail-kakao.is-near .cg-mappin em { display: block; }


@keyframes cg-pin-bounce {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(calc(var(--sp-4) * -1)); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(calc(var(--sp-2) * -1)); }
}
.cg-mappin.is-bounce { animation: cg-pin-bounce var(--mo-slow) ease-in-out 2; z-index: var(--z-sticky); }

@media (prefers-reduced-motion: reduce) {
  .cg-mappin.is-bounce { animation: none; }
  .cg-mappin.is-bounce b { border-color: var(--primary); }
}








@keyframes cg-pin-bounce-plane {
  0%, 100% { transform: scale(1) translateY(0); }
  25%      { transform: scale(1) translateY(calc(var(--sp-4) * -1)); }
  50%      { transform: scale(1) translateY(0); }
  75%      { transform: scale(1) translateY(calc(var(--sp-2) * -1)); }
}



.cg-trail-pin.is-bounce { z-index: var(--z-sticky); }
.cg-trail-pin.is-bounce .cg-mappin { animation: cg-pin-bounce-plane var(--mo-slow) ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
  .cg-trail-pin.is-bounce .cg-mappin b { animation: none; border-color: var(--primary); }
}

.cg-trail {
  position: relative; height: var(--trail-h, 15.5rem); margin-top: 0;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-alt);
  perspective: 900px; perspective-origin: 50% 42%;
}
.cg-trail-plane {
  position: absolute; inset: -10% -4%;
  transform-style: preserve-3d;
  transform: rotateX(54deg) rotateZ(-16deg);
}
.cg-trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cg-trail-grid { stroke: var(--border); stroke-width: var(--sw-line); }
.cg-trail-line { fill: none; stroke: var(--primary); stroke-width: var(--sw-strong); stroke-linejoin: round; stroke-linecap: round; }



.cg-trail-pins { position: absolute; inset: 0; transform-style: preserve-3d; }
.cg-trail-pin {
  position: absolute; transform-style: preserve-3d;
  transform: translate(-50%, -100%) rotateZ(16deg) rotateX(-54deg);
  opacity: 0; transition: opacity var(--mo-fast) ease;
}
.cg-trail-pin.is-on { opacity: 1; }
.cg-trail-stem { display: block; width: var(--sp-1); height: var(--sp-10); margin: 0 auto; background: var(--text-muted); opacity: 0.45; }





.cg-trail-pin .cg-mappin {
  --pin-d: var(--sp-10); --pin-bw: var(--sp-1); --pin-badge: var(--sp-7);
  transform: scale(0.4); transition: transform var(--mo-slow) cubic-bezier(.2,1.5,.4,1);
}
.cg-trail-pin.is-on .cg-mappin { transform: scale(1); }









.cg-trail-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);






  margin: var(--sp-7) var(--sp-4);
}








.cg-trail-item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-2); color: var(--text); min-width: 0; }






.cg-trail-item > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}



.cg-pcard-row { display: flex; gap: var(--sp-5); align-items: flex-start; }
.cg-pcard-photo {
  width: var(--sp-12); height: var(--sp-12); flex: 0 0 auto;
  border-radius: var(--r-md); object-fit: cover; display: block;
}
.cg-pcard-main { flex: 1; min-width: 0; }

.cg-pcard-name {
  font-size: var(--fs-5); font-weight: var(--fw-heavy); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-pcard-meta {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-2); font-size: var(--fs-2); color: var(--text-muted);
}

.cg-path-nav { margin-top: var(--sp-4); }



.cg-trail-item.is-nogeo b { border-style: dashed; opacity: 0.6; }
.cg-trail-item em { font-style: normal; font-size: var(--fs-1); color: var(--text-muted); opacity: 0.8; }
.cg-trail-item b {


  flex: 0 0 auto;
  display: grid; place-items: center; width: var(--sp-8); height: var(--sp-8);
  border-radius: var(--r-circle); font-size: var(--fs-1); font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;



  background: var(--surface); color: var(--text); border: 1px solid var(--text-muted);
}
.cg-trail-item.is-done { color: var(--text); font-weight: var(--fw-bold); }



.cg-trail-item.is-done b { background: var(--success); border-color: var(--success); color: var(--map-pin-ink); }




.cg-map-me {
  width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-circle);
  background: var(--primary); border: 2px solid var(--on-accent);
  box-shadow: var(--shadow-card);
  margin: calc(var(--sp-3) * -1) 0 0 calc(var(--sp-3) * -1);
}


.cg-map-compass {
  position: absolute; left: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-sticky);
  width: var(--sp-11); height: var(--sp-11); border-radius: var(--r-circle);
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); font-size: var(--fs-3);
}
.cg-map-compass:hover { border-color: var(--text-muted); }

.cg-trail-me { position: absolute; width: var(--sp-7); height: var(--sp-7); margin: calc(var(--sp-4) * -1) 0 0 calc(var(--sp-4) * -1); opacity: 0; transition: opacity var(--mo-fast); }
.cg-trail-me.is-on { opacity: 1; }
.cg-trail-me i { position: absolute; inset: 0; border-radius: var(--r-circle); background: var(--primary); border: var(--sp-1) solid var(--surface); }
.cg-trail-me em { position: absolute; inset: calc(var(--sp-4) * -1); border-radius: var(--r-circle); border: var(--sp-1) solid var(--primary); animation: cg-trail-pulse var(--mo-celebrate) ease-out infinite; }
@keyframes cg-trail-pulse { 0% { transform: scale(.55); opacity: .9 } 100% { transform: scale(1.35); opacity: 0 } }

.cg-trail-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); margin-top: var(--sp-4); }
.cg-trail-stat { text-align: center; padding: var(--sp-4) var(--sp-1); }
.cg-trail-stat b { display: block; font-size: var(--fs-5); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-trail-stat span { font-size: var(--fs-2); color: var(--text-muted); }
.cg-map-svg { width: 100%; height: auto; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); }
.cg-map-line { fill: none; stroke: var(--primary); stroke-width: var(--sw-strong); stroke-linejoin: round; stroke-linecap: round; }
.cg-map-place { fill: var(--surface); stroke: var(--text-muted); stroke-width: var(--sw-active); }
.cg-map-place.is-stamped { fill: var(--success); stroke: var(--success); }



.sys-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem)); gap: var(--sp-7); justify-content: center; align-content: center; min-height: 70vh; padding: var(--sp-9); }
.sys-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-10) var(--sp-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: center; text-decoration: none; color: var(--text); }
.sys-card:hover, .sys-card:focus-visible { border-color: var(--primary); }
.sys-card i { font-size: var(--fs-hero); color: var(--primary); }
.sys-card-name { font-size: var(--fs-5); font-weight: var(--fw-bold); }
.sys-card-desc { font-size: var(--fs-3); color: var(--text-muted); margin: 0; }












.cg-maincol { min-width: 0; }


.cg-epsec { margin-bottom: var(--sp-6); }

.cg-prologue {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  border: 1px dashed var(--border); border-radius: var(--r-md);
  margin: var(--sp-3) 0;
  background: var(--surface-alt);
}

.cg-prologue-lb {
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); white-space: nowrap;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.cg-prologue-lb:hover { color: var(--text); }

.cg-prologue button.cg-elchip.is-info { cursor: pointer; font-family: inherit; }
.cg-prologue .cg-pels { flex: 1; min-width: 0; flex-wrap: wrap; }


.cg-ephead {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.cg-ephead.is-sel { background: var(--brass-tint, var(--surface)); border-color: var(--primary); }
.cg-tw { border: 0; background: none; color: var(--text-muted); font-size: var(--fs-2); padding: 0; cursor: pointer; }
.cg-epno {
  font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: .1em;
  color: var(--text-muted); border: 1px solid var(--control-border);
  background: var(--surface); padding: 0 var(--sp-3); border-radius: var(--r-sm);
}

.cg-epname {
  font-size: var(--fs-5); font-weight: var(--fw-bold);


  min-width: 0; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 0; background: none; padding: 0; margin: 0;
  color: var(--text); text-align: left; cursor: pointer; font-family: inherit;
}

body.sys-tour .cg-epname:hover { color: var(--primary-fg); }
.cg-epstat { font-size: var(--fs-3); color: var(--text-muted); white-space: nowrap; }


.cg-epgap { flex: 1; min-width: 0; }
.cg-epsec .cg-pops { margin-left: 0; }


.cg-ptable {
  border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md); background: var(--surface);

  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cg-thead, .cg-prow {
  min-width: var(--w-table-min);
  display: grid;


  grid-template-columns: var(--sp-9) calc(var(--w-thumb) + var(--h-thumb) + var(--sp-10)) minmax(0, var(--w-place)) var(--w-verify) var(--sp-11) minmax(0, 1fr) var(--w-ops);
  gap: var(--sp-5); align-items: center;
  padding: var(--sp-5) var(--sp-6);
}
.cg-thead {
  font-size: var(--fs-2); font-weight: var(--fw-bold); letter-spacing: .12em;
  color: var(--text-muted); background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}


.cg-prow { border-bottom: 1px solid var(--border); background: var(--surface); }
.cg-prow:last-of-type { border-bottom: 0; }
.cg-prow:hover { background: var(--surface-alt); }


.cg-prow.is-sel { background: var(--surface-alt); }
.cg-prow.is-bad .cg-pname { color: var(--error); }
.cg-prow.is-drop { box-shadow: inset 0 var(--sp-1) 0 var(--primary); }
.cg-pno { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }
.cg-pthumb {
  width: var(--w-thumb); height: var(--h-thumb); border: 1px solid var(--control-border);
  border-radius: var(--r-sm); background-size: cover; background-position: center; display: block;
}
.cg-pthumb.is-none {
  border-style: dashed; border-color: var(--control-border); background: var(--surface-alt);
  color: var(--text-muted); font-size: var(--fs-1);
  display: grid; place-items: center;
}

.cg-pthumbs { display: flex; gap: var(--sp-6); align-items: center; }

.cg-pthumb.is-stamp { width: var(--h-thumb); border-radius: var(--r-circle); }


.cg-pname {
  font-size: var(--fs-input); font-weight: var(--fw-bold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; background: none; padding: 0; margin: 0;
  color: var(--text); text-align: left; cursor: pointer; font-family: inherit;
}
body.sys-tour .cg-pname:hover { color: var(--primary-fg); }
.cg-pname.is-none { color: var(--text-muted); font-weight: var(--fw-normal); }
.cg-pvf { font-size: var(--fs-3); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



.cg-ppt { font-size: var(--fs-3); color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }







.cg-pvf, .cg-thead > span:nth-child(4) { text-align: right; }
.cg-thead > span:nth-child(5) { text-align: center; }
.cg-pels { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cg-pops { display: flex; gap: var(--sp-3); justify-content: flex-end; }




.cg-pops > button { flex: none; }


.cg-pops .icon-btn i { font-size: var(--fs-3); }










.cg-pops .icon-btn { opacity: .5; }
.cg-pops .icon-btn:hover,
.cg-pops .icon-btn:focus-visible { opacity: 1; }

@media (hover: none) {
  .cg-pops .icon-btn { opacity: 1; }
}








.cg-prow .cg-pops, .cg-thead > span:last-child {




  position: sticky; right: var(--sp-6); background: inherit;
  padding-left: var(--sp-4);
}


.cg-elchip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-3); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface);
  color: var(--text-muted); white-space: nowrap; cursor: grab;
}
.cg-elchip b { font-size: var(--fs-1); color: var(--text-muted); font-weight: var(--fw-bold); }

.cg-elchip.is-quiz { color: var(--primary); font-weight: var(--fw-bold); }
.cg-elchip.is-drop { border-color: var(--primary); }
.cg-elchip.is-miss { border-color: var(--error); color: var(--error); cursor: default; }

.cg-elchip.is-info { border-color: var(--border); color: var(--text-muted); cursor: default; }







.cg-elchip.is-todo {
  border-color: var(--warning); color: var(--warning); font-weight: var(--fw-bold);
}
.cg-elchip.is-todo b { color: var(--warning); }



.cg-blocked {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  margin-bottom: var(--sp-5); padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--warning); border-radius: var(--r-md);
  background: var(--warning-bg); color: var(--warning-fg);
  font-size: var(--fs-3); font-weight: var(--fw-bold);
  text-align: left; cursor: pointer;
}
.cg-blocked .sp { flex: 1; }


.cg-blocked.is-fail { border-color: var(--error); background: var(--error-bg); color: var(--error-fg); }







.cg-addbar {
  display: flex; border-top: 1px dashed var(--control-border);
  background: var(--surface-alt);
}
.cg-addrow {
  display: inline-block; width: auto; text-align: left;
  padding: var(--sp-5) var(--sp-6); border: 0; border-top: 1px dashed var(--control-border);
  background: var(--surface-alt); color: var(--text-muted); font-size: var(--fs-3); cursor: pointer;
}
.cg-addbar .cg-addrow { border-top: 0; }


.cg-addbar .cg-addrow.is-ep {
  margin-left: auto; white-space: nowrap; text-align: right;
  border-left: 1px dashed var(--control-border);
}
.cg-addrow:hover { color: var(--text); }


.cg-side-box { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.cg-side-h {
  padding: var(--sp-5) var(--sp-6); background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: .12em; color: var(--text-muted);
}
.cg-side-body { padding: var(--sp-6); }
.cg-chk {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-4) var(--sp-6); border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--error); font-size: var(--fs-2); cursor: pointer;
}
.cg-chk:last-child { border-bottom: 0; }
.cg-chk:hover { background: var(--error-bg); }











.shell > main { padding: var(--sp-8) var(--sp-9) var(--sp-11); }
@media (max-width: 800px) { .shell > main { padding: var(--sp-6) var(--sp-5) var(--sp-10); } }





@media (min-width: 801px) {
  .shell { grid-template-columns: var(--w-rail) minmax(0, 1fr); }
}




@media (min-width: 801px) and (max-width: 1400px) {




  .shell:not(:has(.sidenav-head)) { grid-template-columns: var(--w-rail-mini) minmax(0, 1fr); }
}


.sidenav-head {
  padding: 0 var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.rail-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.rail-badge {
  font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: .04em;
  padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill);
  background: var(--surface-alt); color: var(--text-muted);
}



.rail-badge.is-home {
  text-decoration: none; border: 1px solid var(--control-border);
  background: transparent; color: var(--text-muted);
}
.rail-badge.is-home:hover { color: var(--text); border-color: var(--text-muted); }
body.sys-tour .rail-badge.is-home {
  background: transparent; border-color: var(--rail-line); color: var(--on-rail-dim);
}
body.sys-tour .rail-badge.is-home:hover { color: var(--on-rail); border-color: var(--on-rail-faint); }
.rail-game { display: flex; gap: var(--sp-5); align-items: center; }
.rail-cover {
  width: var(--w-cover); height: var(--h-cover); flex: 0 0 auto;
  border-radius: var(--r-sm); object-fit: cover; display: block;
  background: var(--surface-alt);
}
.rail-cover.is-none {
  display: grid; place-items: center; text-align: center;
  font-size: var(--fs-1); color: var(--text-muted);
  border: 1px dashed var(--control-border); line-height: var(--lh-tight);
}
.rail-gmeta { min-width: 0; display: block; }
.rail-gname {
  display: block; font-size: var(--fs-4); font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-gsub { display: block; font-size: var(--fs-2); color: var(--text-muted); margin-top: var(--sp-2); }
.rail-acts { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.rail-act {
  flex: 1; text-align: center; font-size: var(--fs-2); font-weight: var(--fw-bold);
  padding: var(--sp-4) var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--control-border); color: var(--text-muted); text-decoration: none;
}
.rail-act.is-go { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }


body.sys-tour .sidenav-head { border-bottom-color: var(--rail-line); }
body.sys-tour .rail-badge { background: var(--rail-hi); color: var(--on-rail-dim); }
body.sys-tour .rail-badge.is-role { color: var(--rail-mark); }
body.sys-tour .rail-gname { color: var(--on-rail); }
body.sys-tour .rail-gsub { color: var(--on-rail-faint); }
body.sys-tour .rail-cover { background: var(--rail-hi); }
body.sys-tour .rail-cover.is-none { border-color: var(--rail-line); color: var(--on-rail-faint); }
body.sys-tour .rail-act { border-color: var(--rail-line); color: var(--on-rail-dim); }
body.sys-tour .rail-act:hover { background: var(--rail-hi); color: var(--on-rail); }
body.sys-tour .rail-act.is-go { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }



body.sys-tour .sidenav-item {
  border-radius: 0;
  margin-left: calc(var(--sp-5) * -1);
  margin-right: calc(var(--sp-5) * -1);
  padding-left: var(--sp-7);
  padding-right: var(--sp-7);
}
body.sys-tour .sidenav-item.is-active {
  background: var(--rail-hi); color: var(--on-rail); font-weight: var(--fw-bold);
  box-shadow: none;
}



body.sys-tour .sidenav { scrollbar-width: thin; scrollbar-color: var(--rail-line) transparent; }
body.sys-tour .sidenav::-webkit-scrollbar { width: var(--sp-3); }
body.sys-tour .sidenav::-webkit-scrollbar-track { background: transparent; }
body.sys-tour .sidenav::-webkit-scrollbar-thumb {
  background: var(--rail-line); border-radius: var(--r-pill);
}
body.sys-tour .sidenav::-webkit-scrollbar-thumb:hover { background: var(--on-rail-faint); }














.cg-scrim {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--scrim-strong);
  opacity: 0; visibility: hidden;
  transition: opacity var(--mo-fast) ease, visibility var(--mo-fast);
}
.cg-scrim.is-open { opacity: 1; visibility: visible; }

.cg-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: var(--z-overlay);
  width: var(--w-drawer);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--mo-fast) ease, visibility var(--mo-fast);
}
.cg-drawer.is-open { transform: none; visibility: visible; }





.cg-drawer-head {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  flex: 0 0 auto;
}
.cg-dtitle {
  flex: 1; min-width: 0;
  font-size: var(--fs-4); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cg-dwhere { display: inline; font-size: var(--fs-2); font-weight: var(--fw-normal); color: var(--text-muted); }
.cg-dwhere::before { content: ' · '; }


.cg-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-7); --rt-pad: var(--sp-7); }
.cg-drawer-foot {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-7);
  border-top: 1px solid var(--border); background: var(--surface-alt);
  flex: 0 0 auto;
}
.cg-drawer-foot .spacer { flex: 1; }


.cg-elpick {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%;
  padding: var(--sp-5) var(--sp-6); text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: var(--fs-3);
  margin-bottom: var(--sp-3); cursor: pointer;
}
.cg-elpick:hover { background: var(--surface-alt); }
.cg-elpick .n { font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted); }
.cg-elpick .go { margin-left: auto; color: var(--text-muted); font-size: var(--fs-2); }



.cg-check {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); border-color: var(--control-border);
  margin-bottom: var(--sp-6); overflow: hidden;
}
.cg-check.is-ok { border-color: var(--border); background: var(--surface-alt); }
.cg-check-h {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  padding: var(--sp-5) var(--sp-6); border: 0; background: none; cursor: pointer;
  font-size: var(--fs-3); font-weight: var(--fw-bold); color: var(--text); text-align: left;
}
.cg-check-h b { color: var(--error); }
.cg-check.is-ok .cg-check-h { color: var(--text-muted); }
.cg-check-h .tw { margin-left: auto; font-size: var(--fs-2); }
.cg-check-list { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: 0 var(--sp-6) var(--sp-6); }
.cg-check-list .cg-chk {
  width: auto; border: 1px solid var(--error); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5); background: var(--surface); font-size: var(--fs-2);
}








.cg-prog {
  border: 1px solid var(--control-border); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: var(--sp-6); overflow: hidden;
}
.cg-prog-row { display: flex; align-items: stretch; }
.cg-step {
  flex: 1; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); border: 0; border-right: 1px solid var(--border);
  background: none; text-align: left; cursor: pointer; color: var(--text);
  font-size: var(--fs-3); font-family: inherit; min-width: 0;
}
.cg-step:last-of-type { border-right: 0; }
.cg-step:hover { background: var(--surface-alt); }
.cg-step .dot {
  flex: none; width: var(--sp-7); height: var(--sp-7); border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: var(--fs-1); font-weight: var(--fw-bold);
  border: 1px solid var(--control-border); color: var(--text-muted); background: var(--surface);
}
.cg-step .lb { min-width: 0; }

.cg-step .lb i {
  display: block; font-style: normal; font-size: var(--fs-2); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-step.is-done .dot { background: var(--success); border-color: var(--success); color: var(--on-accent); }
.cg-step.is-now .dot { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.cg-step.is-now { background: var(--surface-alt); }
.cg-step.is-now .lb { font-weight: var(--fw-bold); }
.cg-step.is-todo .lb { color: var(--text-muted); }
.cg-prog-end {
  flex: none; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); background: var(--surface-alt);
  border-left: 1px solid var(--border); font-size: var(--fs-2); color: var(--text-muted);
}
.cg-prog-end.is-ready { color: var(--success-fg); font-weight: var(--fw-bold); }
.cg-prog-end.is-blocked { color: var(--error-fg); }
.cg-prog-tw {
  flex: none; border: 0; background: none; cursor: pointer; color: var(--text-muted);
  font-size: var(--fs-2); padding: 0 var(--sp-5); border-left: 1px solid var(--border);
}
.cg-prog-open { border-top: 1px solid var(--border); background: var(--surface-alt); padding: var(--sp-5) var(--sp-6); }
.cg-prog-open .t { font-size: var(--fs-2); color: var(--text-muted); margin-bottom: var(--sp-3); }



.cg-onb {
  border: 1px dashed var(--control-border); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-9) var(--sp-6); text-align: center;
}
.cg-onb .k { font-size: var(--fs-2); letter-spacing: .1em; color: var(--primary); font-weight: var(--fw-bold); }
.cg-onb h4 { margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-5); }
.cg-onb p { margin: 0 auto var(--sp-6); color: var(--text-muted); max-width: var(--w-read); }
.cg-onb .skip { display: block; margin-top: var(--sp-4); font-size: var(--fs-2); color: var(--text-muted); }


.cg-work { display: block; }




@media (max-width: 800px) {
  .cg-drawer { width: 100vw; height: 100dvh; border-left: 0; }
}





.cg-elchip.is-add {
  border-style: dashed; border-left-width: 1px; border-color: var(--control-border);
  color: var(--text-muted); cursor: pointer; font-weight: var(--fw-bold);
}
.cg-elchip.is-add:hover { border-color: var(--primary); color: var(--primary); }
.cg-kindmenu {
  position: absolute; z-index: var(--z-overlay);
  background: var(--surface); border: 1px solid var(--control-border);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
  padding: var(--sp-2); min-width: var(--w-kindmenu);
}
.cg-kindmenu button {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-4) var(--sp-5); border: 0; background: none;
  color: var(--text); font-size: var(--fs-3); border-radius: var(--r-sm); cursor: pointer;
}
.cg-kindmenu button:hover { background: var(--surface-alt); }







main .topbar {
  position: static; height: auto; z-index: auto;
  flex-wrap: wrap; row-gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-card);
}
main .topbar h2 { margin: 0; font-size: var(--fs-5); line-height: var(--lh-tight); }
main .topbar .meta { min-width: 0; }

main .tab-bar { margin-bottom: var(--sp-7); }



.cg-dsec {
  margin: var(--sp-9) 0 var(--sp-5); padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
  font-size: var(--fs-2); font-weight: var(--fw-bold); letter-spacing: .1em;
  color: var(--text-muted);
}
.cg-drawer-body > div > .cg-dsec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }


.rt-tools { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }



.rt-btn {
  min-width: var(--icon-btn); height: var(--icon-btn); padding: 0 var(--sp-4);
  border: 1px solid var(--control-border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-2); font-weight: var(--fw-bold); cursor: pointer;
}
.rt-btn:hover { background: var(--surface-alt); }
.rt-swatch { min-width: var(--icon-btn-sm); width: var(--icon-btn); }















.rt-f-serif { font-family: var(--font-serif); }
.rt-f-round { font-family: var(--font-round); }
.rt-f-base { font-family: var(--font); }


.rt-lg { font-size: var(--fs-editor-lg); }
.rt-sm { font-size: var(--fs-editor-sm); }
.rt-base { font-size: var(--fs-rt-base); }










.rt-c-base { color: var(--text); }
.rt-c-primary { color: var(--primary-fg); }
.rt-c-error { color: var(--error-fg); }
.rt-c-muted { color: var(--text-muted); }



.rt-btn.rt-swatch-base { background: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.rt-btn.rt-sw-primary { background: var(--primary-fg); }
.rt-btn.rt-sw-error { background: var(--error-fg); }
.rt-btn.rt-sw-muted { background: var(--text-muted); }

.rt-btn.rt-size-def { box-shadow: inset 0 0 0 2px var(--primary); }


.rt-area {
  min-height: calc(var(--sp-12) + var(--sp-11));
  height: calc(var(--sp-12) * 3); max-width: none; overflow-y: auto;
  resize: vertical;


  --rt-pad: var(--sp-6);
}



.rt-meter { margin: var(--sp-2) 0 0; text-align: right; }
.rt-meter.is-over { color: var(--error-fg); font-weight: var(--fw-bold); }








.rt-img {
  display: block;
  width: calc(100% + var(--rt-pad) * 2);
  max-width: none;
  margin: var(--sp-4) calc(var(--rt-pad) * -1);

  border-radius: 0;
}





.rt-vid-box { position: relative; display: block; isolation: isolate; }
.rt-vid {
  display: block;
  width: calc(100% + var(--rt-pad) * 2);
  max-width: none;
  margin: var(--sp-4) calc(var(--rt-pad) * -1);
  border-radius: 0;
  background: var(--stage-bg);
}


.rt-vid-sound {
  position: absolute; right: var(--sp-5); bottom: var(--sp-6);
  min-width: var(--tap-min); min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-circle); cursor: pointer;
  background: var(--scrim-strong); color: var(--on-stage);
  font-size: var(--fs-3);
}
.rt-vid-sound.is-on { background: var(--primary); color: var(--on-accent); }











.phone-frame { aspect-ratio: var(--ratio-phone); margin-inline: auto; }


.phone-frame.is-fit-h {
  height: min(var(--h-phone-cap), var(--h-phone-max));
  width: auto; min-width: var(--w-phone-min); max-width: 100%;
}


.phone-frame.is-fit-w { width: 100%; max-width: var(--w-phone); height: auto; }







.pv-wrap {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--scrim-viewer);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); padding: var(--sp-6);
}



.pv-stack { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 100%; }
.pv-head { display: flex; align-items: center; gap: var(--sp-4); }
.pv-title { flex: 1; color: var(--on-accent); font-size: var(--fs-3); font-weight: var(--fw-bold); }
.pv-phone {
  border: var(--sp-2) solid var(--stage-bg); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card);
}
.pv-phone iframe { width: 100%; height: 100%; border: 0; display: block; }



.help-panel { border-color: var(--primary); }
.help-h { font-size: var(--fs-4); font-weight: var(--fw-bold); margin: var(--sp-8) 0 var(--sp-4); }
.help-list { margin: 0 0 var(--sp-5); padding-left: var(--sp-9); line-height: var(--lh-relaxed); }
.help-list li { margin-bottom: var(--sp-3); }




.cg-maker-frame {
  width: 100%; height: calc(var(--sp-12) * 12);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); display: block;
}



body.is-embed-page { background: var(--surface); overflow-x: hidden; }
















body.is-embed-quiz { background: transparent; }
















body.is-embed-quiz .play.is-embed { padding: 0; }
body.is-embed-quiz .play > * { margin-left: 0; margin-right: 0; }


























body.is-embed-quiz .w-prompt-img,
body.is-embed-quiz .w-read-text,
body.is-embed-quiz .w-spots,
body.is-embed-quiz .w-scratch,
body.is-embed-quiz .w-ar-cam,
body.is-embed-quiz .w-photo-shot {
  background: transparent;
  border-color: transparent;
}


body.is-embed-quiz .w-read-text { padding: 0; }



.cg-cert-nav { display: flex; margin-top: var(--sp-7); }
.embed-main { padding: var(--sp-6); }
.embed-main .page { max-width: none; }






.embed-main .page-head {
  position: sticky; top: calc(var(--sp-6) * -1); z-index: var(--z-sticky);
  background: var(--surface); padding-top: var(--sp-6);
  padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border);
}

.qm-savenote { font-size: var(--fs-3); color: var(--warning); }
.embed-main .maker { grid-template-columns: minmax(0, 1fr); }
.embed-main .form-grid-2 { grid-template-columns: minmax(0, 1fr); }







@media (min-width: 900px) {
  body.is-bare-page .embed-main .maker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.is-bare-page .embed-main .form-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}


.cg-rank-me { font-size: var(--fs-5); font-weight: var(--fw-bold); margin-bottom: var(--sp-5); }
.cg-rank-me b { color: var(--primary); }
.cg-rank-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cg-rank-row {
  display: grid; grid-template-columns: var(--sp-10) minmax(0, 1fr) auto;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-3);
}
.cg-rank-row.is-me { background: var(--surface-alt); font-weight: var(--fw-bold); }
.cg-rank-no { color: var(--text-muted); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cg-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-rank-score { font-variant-numeric: tabular-nums; }


.cg-hints { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.cg-hint b { color: var(--primary); }


.cg-quiz-preview {
  width: 100%; height: calc(var(--sp-12) * 7);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}



.cg-mapbox {
  height: 17rem; margin: var(--sp-5) 0;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-alt);
}


.cg-mapfind { display: grid; gap: var(--sp-1); margin: var(--sp-4) 0; max-height: 11rem; overflow-y: auto; }
.cg-mapfind-item {
  display: grid; gap: var(--sp-1); text-align: left; cursor: pointer;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit;
}
.cg-mapfind-item:hover { border-color: var(--primary); }
.cg-mapfind-item b { font-size: var(--fs-3); font-weight: var(--fw-bold); }
.cg-mapfind-item span { font-size: var(--fs-2); color: var(--text-muted); }

.cg-mapstub {
  border: 1px dashed var(--control-border); border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text-muted);
  font-size: var(--fs-3); padding: var(--sp-8); text-align: center;
}




.shell > main .card { margin-bottom: var(--sp-7); }



button.sidenav-title {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left;
}
.sidenav-title .tw { margin-left: auto; font-size: var(--fs-1); }
.sidenav-group.is-shut .sidenav-item { display: none; }
body.sys-tour .sidenav-title {
  font-size: var(--fs-4); font-weight: var(--fw-heavy);
  color: var(--on-rail-dim); letter-spacing: .08em;
}


.pending-tools { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.pending-item { position: relative; }
.pending-check {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  width: var(--sp-8); height: var(--sp-8);
  accent-color: var(--primary);
}
.pending-item figcaption { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }






@media (max-width: 800px) {







  main .topbar:has(.btn) {


    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0;
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
    flex-wrap: nowrap; gap: var(--sp-4); overflow-x: auto;
    box-shadow: var(--shadow-modal);
  }
  main .topbar:has(.btn) h2,
  main .topbar:has(.btn) .meta,
  main .topbar:has(.btn) .spacer { display: none; }
  main .topbar:has(.btn) .btn { flex: 1 1 auto; min-width: 0; }


  .shell > main:has(> .topbar .btn) { padding-bottom: calc(var(--tap-min) + var(--sp-11)); }


  main .tab-bar {
    flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-3);
    margin: 0 calc(var(--sp-5) * -1) var(--sp-6);
    padding: 0 var(--sp-5) var(--sp-3);
    scrollbar-width: none;
  }
  main .tab-bar::-webkit-scrollbar { display: none; }
  main .tab-btn {
    white-space: nowrap; flex: 0 0 auto;
    font-size: var(--fs-3); padding: var(--sp-4) var(--sp-6);
    border: 1px solid var(--control-border); border-radius: var(--r-pill);
    border-bottom-color: var(--control-border);
  }



  main .tab-btn.active,
  main .tab-btn.is-active {
    background: var(--primary); border-color: var(--primary); color: var(--on-accent);
  }



  .cg-ptable { overflow-x: visible; border: 0; background: none; }
  .cg-thead { display: none; }              
  .cg-prow, .cg-prow.is-drop {
    display: grid; min-width: 0;
    grid-template-columns: var(--w-cover) minmax(0, 1fr) var(--tap-min);
    grid-template-areas: 'thumb main more';
    gap: var(--sp-5); align-items: start;
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface);
  }
  .cg-prow.is-bad { border-color: var(--error); }

  .cg-pno { display: none; }
  .cg-pthumb { grid-area: thumb; width: var(--w-cover); height: var(--h-cover); }
  .cg-pname { grid-area: main; font-size: var(--fs-4); }






  .cg-pvf { grid-column: 2; grid-row: 2; font-size: var(--fs-2); margin-right: var(--sp-11); }
  .cg-ppt {
    grid-column: 2; grid-row: 2; justify-self: end;
    font-size: var(--fs-2); text-align: right;
  }
  .cg-ppt::after { content: '점'; }
  .cg-pels { grid-column: 2; grid-row: 3; margin-top: var(--sp-4); }
  .cg-pops { grid-area: more; align-self: start; }


  .cg-epsec .cg-ephead { border-radius: var(--r-md); border-bottom: 1px solid var(--border); }
  .cg-epsec .sheet, .cg-epsec .cg-ptable { border-top: 1px solid transparent; }

  .cg-ephead { padding: var(--sp-5); margin-bottom: var(--sp-5); flex-wrap: wrap; row-gap: var(--sp-2); }
  .cg-epname { font-size: var(--fs-4); flex: 1 1 0; }
  .cg-epstat { flex: 1 0 100%; order: 9; font-size: var(--fs-2); }
  .cg-ephead .cg-pops { margin-left: auto; }


  .cg-check-h { font-size: var(--fs-3); }




  .cg-drawer-body { padding: var(--sp-6); --rt-pad: var(--sp-6); }
}













.tp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: var(--sp-7); align-items: start; }
@media (max-width: 1000px) { .tp-wrap { grid-template-columns: minmax(0, 1fr); } }




@media (min-width: 1001px) and (min-height: 860px) {
  .tp-side { position: sticky; top: calc(var(--h-topbar) + var(--sp-5)); }
}






.tp-pane-labels { animation: tp-pane-in var(--mo-fast) ease; }
@keyframes tp-pane-in { from { opacity: 0; transform: translateX(calc(var(--sp-8) * -1)); } to { opacity: 1; transform: none; } }
.tp-lab-head { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.tp-lab-head .card-title { margin: var(--sp-0); }
.tp-lab-head .spacer { flex: 1; }
.tp-lab-modes { margin: var(--sp-0); }

.tp-lab-group { margin-top: var(--sp-7); }
.tp-lab-group:first-child { margin-top: var(--sp-0); }
.tp-lab-gh { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.tp-lab-gh b { font-size: var(--fs-3); }
.tp-lab-n {
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
  background: var(--surface-alt); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-4);
}
.tp-lab-group.is-locked .tp-lab-gh b { color: var(--text-muted); }

.tp-lab-off {
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-4);
}
.tp-lab-row.is-locked .form-label { color: var(--text-muted); }
.tp-lab-row.is-locked .form-control { background: var(--surface-alt); cursor: not-allowed; }





.ed-more { margin-top: var(--sp-6); border-top: 1px solid var(--border); padding-top: var(--sp-5); }
.ed-more > summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-3); font-weight: var(--fw-bold); color: var(--text-muted);
  padding: var(--sp-3) var(--sp-0);
}
.ed-more > summary::-webkit-details-marker { display: none; }
.ed-more > summary::before { content: '\25B8'; margin-right: var(--sp-4); display: inline-block; }
.ed-more[open] > summary::before { transform: rotate(90deg); }
.ed-sect { margin-top: var(--sp-7); border-top: 1px solid var(--border); padding-top: var(--sp-5); }
.ed-sect-h {
  display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5);
  font-size: var(--fs-3); font-weight: var(--fw-bold);
}



















body.sys-tour .form-row {



  --ed-label-w: 6rem;
  display: grid;



  grid-template-columns: var(--ed-label-w) minmax(0, var(--w-field));
  column-gap: var(--sp-7); row-gap: var(--sp-3);
  align-items: start;
  margin-bottom: var(--sp-0);
  padding: var(--sp-6) var(--sp-0);
}


body.sys-tour .form-row + .form-row { border-top: 1px solid var(--border); }
body.sys-tour .form-row > .form-label {
  grid-column: 1; grid-row: 1;
  margin-bottom: var(--sp-0); padding-top: var(--sp-4);


  color: var(--text);
}
body.sys-tour .form-row > *:not(.form-label) { grid-column: 2; }
























body.sys-tour .form-row > *:not(.form-label) { max-width: none; }
body.sys-tour .form-row > div:not(.form-label) { width: 100%; }
body.sys-tour .form-row .form-control,
body.sys-tour .form-row .rt-wrap { max-width: none; }






body.sys-tour .form-row .form-control { flex: 1 1 0; min-width: 0; }

body.sys-tour .form-row > .meta { margin-top: var(--sp-0); }

body.sys-tour .form-row > .form-label + .chip-row { margin-top: var(--sp-0); }
body.sys-tour .form-row > .form-label + .fx-host > .chip-row { margin: var(--sp-0); }







body.sys-tour .ed-span { display: flex; align-items: center; gap: var(--sp-5); }
body.sys-tour .ed-span-l {
  flex: none; min-width: var(--ed-span-w, 2rem);
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
}

body.sys-tour .ed-unit { position: relative; max-width: var(--w-read); }
body.sys-tour .ed-unit > .form-control { padding-right: var(--sp-11); }
body.sys-tour .ed-unit-s {
  position: absolute; right: var(--sp-8); top: 50%; transform: translateY(-50%);
  font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--text-muted);
  pointer-events: none;
}
body.sys-tour .form-row.is-plain { display: block; padding: var(--sp-0); border-top: 0; margin-bottom: var(--sp-7); }
body.sys-tour .form-row.is-plain > .form-label { margin-bottom: var(--sp-3); padding-top: var(--sp-0); }

@media (max-width: 40rem) {
  body.sys-tour .form-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); }
  body.sys-tour .form-row > .form-label { grid-column: 1; padding-top: var(--sp-0); }
  body.sys-tour .form-row > *:not(.form-label) { grid-column: 1; }
}

.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-6); }

.tp-group {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-5);
}
.tp-group:first-child { margin-top: var(--sp-0); }
.tp-group b { font-size: var(--fs-4); }
.tp-group-tag {
  font-size: var(--fs-2); font-weight: var(--fw-bold);
  color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-5);
}


.tp-card.is-other { opacity: .55; }
.tp-card.is-other:hover { opacity: .8; }
.tp-card {
  display: flex; flex-direction: column; gap: var(--sp-3); text-align: left;
  padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.tp-card:hover { border-color: var(--control-border); }
.tp-card.is-on { border-color: var(--primary); background: var(--surface-alt); }
.tp-card b { font-size: var(--fs-4); }
.tp-card-sub { font-size: var(--fs-2); color: var(--text-muted); line-height: var(--lh-normal); }
.tp-card-warn { font-size: var(--fs-1); color: var(--error); }

.tp-card-art { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-sm); padding: var(--sp-4); }
.tp-card-box { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
               border-radius: var(--r-sm); padding: var(--sp-4); }
.tp-card-line { display: block; height: var(--sp-2); border-radius: var(--r-pill); opacity: .8; }
.tp-card-line.is-half { width: 60%; opacity: .45; }
.tp-card-chip { display: block; margin-top: auto; height: var(--sp-6); border-radius: var(--r-pill); }


.tp-pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--sp-6); }


.tp-asset-row { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.tp-asset-row:last-child { border-bottom: 0; }
.tp-asset-row .meta { margin: var(--sp-1) 0 0; }
.tp-asset-thumb {
  display: block; margin: var(--sp-3) 0; max-width: 12rem; max-height: 4rem;
  width: auto; height: auto; object-fit: contain;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.tp-asset-btns { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }












.tp-asset-row { position: relative; padding-left: calc(var(--sp-12) + var(--sp-8)); min-height: calc(var(--sp-12) * 1.6); }
.tp-asset-sk {
  position: absolute; left: 0; top: var(--sp-4);
  width: var(--sp-12); height: calc(var(--sp-12) * 1.6);
  padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-alt);
  overflow: hidden; cursor: zoom-in;
}
.tp-asset-sk:hover { border-color: var(--primary); }
.tp-asset-sk:focus-visible { outline: var(--sp-1) solid var(--primary); outline-offset: 2px; }

.tp-spot-big { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }





.tp-asset-sk.is-big {
  position: relative; width: calc(var(--w-phone, 22rem) / 2); height: calc(var(--w-phone, 22rem) / 2 * 1.6);
  cursor: default;
}
.tp-asset-sk.is-big::before { height: var(--sp-7); }

.tp-asset-sk::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: var(--sp-3); background: var(--border);
}

.tp-asset-sk::after {
  content: ''; position: absolute; background: var(--primary); border-radius: 1px;
}
.tp-ask-logo::after      { left: 3px; top: 3px; width: 40%; height: var(--sp-2); }
.tp-ask-hero::after      { left: 22%; top: 26%; width: 56%; height: 22%; border-radius: var(--r-sm); }
.tp-ask-watermark::after { left: 0; right: 0; top: var(--sp-3); bottom: 0; width: auto; height: auto; opacity: .25; }
.tp-ask-finish::after    { left: 28%; top: 40%; width: 44%; height: 26%; border-radius: var(--r-circle); }
.tp-ask-guide::after     { left: 8%; top: 24%; width: 84%; height: 34%; }
.tp-ask-board::after     { right: 8%; top: 24%; left: auto; width: 26%; height: 16%; }
.tp-ask-checkin::after   { left: 30%; top: 46%; width: 40%; height: 22%; border-radius: var(--r-circle); }
.tp-ask-card::after      { right: 8%; top: 56%; left: auto; width: 26%; height: 16%; }
.tp-brand-row { display: flex; align-items: center; gap: var(--sp-6); }
.tp-brand-row input[type="color"] { width: var(--sp-11); height: var(--sp-10); padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.tp-pal {
  padding: 0; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; overflow: hidden;
}
.tp-pal:hover { border-color: var(--control-border); }
.tp-pal.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.tp-pal-bars { display: flex; height: var(--sp-11); }
.tp-pal-bar { flex: 1; }
.tp-pal-name { display: block; padding: var(--sp-4); font-size: var(--fs-2); color: var(--text-muted); }









.tp-sk {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface-alt);
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
}
.tp-sk i { display: block; background: var(--border); border-radius: var(--r-sm); aspect-ratio: 1; }

.tp-sk-passport i:nth-child(-n+2) { background: var(--text-muted); }

.tp-sk-album { grid-template-columns: repeat(2, 1fr); }
.tp-sk-album i { aspect-ratio: 16 / 9; }
.tp-sk-album i:nth-child(n+5) { display: none; }
.tp-sk-album i:nth-child(-n+2) { background: var(--text-muted); }

.tp-sk-map { grid-template-columns: 1fr 1fr; }
.tp-sk-map i:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 16 / 7; background: var(--text-muted); }
.tp-sk-map i:nth-child(2) { grid-column: 1 / -1; aspect-ratio: 16 / 4; }
.tp-sk-map i:nth-child(n+3) { display: none; }

.tp-sk-play { grid-template-columns: 1fr; justify-items: center; }
.tp-sk-play i:nth-child(1) { width: 46%; border-radius: var(--r-circle); background: var(--text-muted); }
.tp-sk-play i:nth-child(2) { width: 82%; aspect-ratio: 16 / 5; border-radius: var(--r-pill); }
.tp-sk-play i:nth-child(n+3) { display: none; }

.tp-sk-plain { grid-template-columns: 1fr; }
.tp-sk-plain i { aspect-ratio: 16 / 3; border-radius: var(--r-sm); }
.tp-sk-plain i:nth-child(1) { background: var(--text-muted); }
.tp-sk-plain i:nth-child(n+4) { display: none; }

.tp-fixed {
  margin: 0; padding: var(--sp-6) var(--sp-7);
  border: 1px dashed var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text-muted); font-size: var(--fs-2);
}

.tp-more { margin-top: var(--sp-7); border-top: 1px solid var(--border); padding-top: var(--sp-5); }
.tp-more summary { cursor: pointer; font-size: var(--fs-3); font-weight: var(--fw-bold); }
.tp-slots { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.tp-slot { display: flex; align-items: center; gap: var(--sp-5); }
.tp-slot-l { display: flex; flex-direction: column; }
.tp-slot-l .meta { font-size: var(--fs-1); }
.tp-slot-hex { margin-left: auto; font-size: var(--fs-2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tp-slot-i { width: var(--sp-12); height: var(--tap-min); border: 1px solid var(--control-border);
             border-radius: var(--r-sm); background: none; padding: var(--sp-1); cursor: pointer; }









.tp-phone { border: var(--sp-2) solid var(--text); border-radius: var(--r-lg); overflow: hidden;
            isolation: isolate; background: var(--surface-alt); }
.tp-frame { display: block; width: 100%; height: 100%; border: 0; }




.cg-pmore {
  display: none;                       
  width: var(--tap-min); height: var(--tap-min);
  border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-5); line-height: var(--lh-none);
}
.cg-esheet-back {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--scrim-strong);
  display: flex; align-items: flex-end;
}






.cg-esheet {
  width: 100%; background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-4) 0 var(--safe-bottom);
  max-height: 80dvh; overflow-y: auto;
}
.cg-esheet-grab {
  width: var(--sp-11); height: var(--sp-2); border-radius: var(--r-pill);
  background: var(--control-border); margin: 0 auto var(--sp-6);
}
.cg-esheet-h {
  font-size: var(--fs-3); font-weight: var(--fw-bold);
  padding: 0 var(--sp-8) var(--sp-5); color: var(--text-muted);
}
.cg-esheet-item {
  display: block; width: 100%; text-align: left;
  min-height: var(--tap-min); padding: var(--sp-5) var(--sp-8);
  border: 0; border-top: 1px solid var(--border);
  background: none; color: var(--text);
  font-size: var(--fs-4); font-family: inherit; cursor: pointer;
}
.cg-esheet-item:hover { background: var(--surface-alt); }
.cg-esheet-item.is-danger { color: var(--error); }
.cg-esheet-item:disabled { color: var(--control-border); cursor: default; }

@media (max-width: 800px) {

  .cg-pops .icon-btn { display: none; }
  .cg-pops .cg-pmore { display: block; }
}





.md-body { max-width: var(--w-read); line-height: var(--lh-relaxed); }
.md-body .md-h { margin-top: var(--sp-8); margin-bottom: var(--sp-5); }
.md-body p { margin: var(--sp-5) var(--sp-0); }
.md-list { margin: var(--sp-5) var(--sp-0); padding-left: var(--sp-8); }
.md-list li { margin-bottom: var(--sp-4); }
.md-check { list-style: none; margin-left: calc(var(--sp-8) * -1); }
.md-quote {
  margin: var(--sp-6) var(--sp-0); padding: var(--sp-5) var(--sp-7);
  border-left: 3px solid var(--border); color: var(--ink-soft);
}
.md-code {
  margin: var(--sp-6) var(--sp-0); padding: var(--sp-6);
  background: var(--surface-alt); border-radius: var(--r-md);
  overflow-x: auto; font-size: var(--fs-3);
}
.md-tablewrap { overflow-x: auto; margin: var(--sp-6) var(--sp-0); }
.md-table { border-collapse: collapse; width: 100%; font-size: var(--fs-3); }
.md-table th, .md-table td {
  border: 1px solid var(--border); padding: var(--sp-4) var(--sp-5);
  text-align: left; vertical-align: top;
}
.md-table th { background: var(--surface-alt); font-weight: var(--fw-bold); }