/* ═══ 껍데기 — 상단 가로 띠를 «왼쪽 세로 기둥»으로 (J.J 2026-08-21) ══════════
   목업 : ~/Downloads/제품선택-최종목업.html · ~/Downloads/포털-앱스위처-시안.html
   색   : tokens.css 가 든다. 여기엔 색 «값»이 0개다 — 이름만 쓴다.

   ── 왜 새 파일인가 ──────────────────────────────────────────────────────
   `styles.css` 는 화면 일곱이 같이 쓰고 지금도 다른 레인이 만지는 중이다.
   기둥은 «덮어쓰기»로 끝나므로 그 파일을 안 건드리고 여기서 덮는다(styles.css «뒤»에 실린다).

   ── ⛔ app.js 는 한 줄도 안 고쳤다 ──────────────────────────────────────
   배선이 `.tab` · `data-tab` 으로만 걸려 있다(app.js:157·184) — 마크업이 기둥이 돼도
   그 두 낱말만 그대로면 탭 전환·`.active` 칠하기가 그대로 돈다.
   ⚠️ 그래서 기둥의 메뉴 단추는 여전히 `class="tab" data-tab="…"` 이다. 낱말을 바꾸지 마라.

   ── 지키는 것 ──────────────────────────────────────────────────────────
   ⛔ 안 되는 것을 그리지 않는다 — 앱이 하나뿐이라 스위처에 ▾ 를 안 단다.
      스토어도 마찬가지다(한 계정 = 스토어 하나 · portal/tenant.js 의 maybeSingle).
      눌러도 안 열리는 ▾ 는 손님이 「고장났다」로 읽는다.
   ⛔ 낱말을 지어내지 않는다 — 메뉴 넷은 index.html 에 있던 글자 그대로다.
      새로 든 낱말은 「G·ROAD 포털」·「소싱」·「OS」 뿐이고, 그건 J.J 가 준 글자다.
   ⚠️ 2026-08-21 두 번째 — 「다른 G·ROAD 앱」 묶음은 걷었다. 앱을 기둥에 나란히 두는 대신
      «홈에서 고르고 기둥은 고른 앱 것만» 보이는 층 구조로 갔다(J.J 지시).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 글자체 — 공식 홈 g-road.io 와 같은 것 (J.J 2026-08-21) ────────────────
   그 사이트가 자기 CSS 주석에 규칙을 적어 뒀다. 그대로 옮긴다:
     본문   Pretendard
     헤드만 Wanted Sans — 「개성이 있는 글씨라 본문까지 쓰면 피로해진다」(그 사이트 주석 그대로)
   ⛔ 크기·굵기는 0줄 건드렸다. styles.css 의 `font: 15px/1.5 …` 중 «글꼴 이름»만 덮는다
      (font-family 만 쓰므로 15px·1.5 는 그대로 산다).
   ⛔ 헤드는 «내 것 둘»에만 준다 — 홈 제목과 기둥 브랜드. 카드 h2 는 본문 글꼴 그대로다.
   ⚠️ mono 는 카드 eyebrow «한 곳»뿐이다 (J.J 가 2026-08-21 에 그 자리를 열어 줬다). */
:root {
  --gr-sans: Pretendard, 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --gr-head: 'Wanted Sans', var(--gr-sans);
  --gr-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* ── 위저드 그라데이션 (청회 → 보라) · J.J 2026-08-21 ─────────────────────
     🔴 정본은 처음 셋팅 위저드의 `--action-ramp` — `first-steps.css:9` 다.
        그쪽 주석이 그 색을 「청회 → 보라」라고 적어 뒀다 (값은 그 파일이 정본이다).
     ⛔ 그래서 이 값은 «두 곳»에 있다. 그 파일은 남의 레인이고 index.html 이 안 싣는다.
        사전(tokens.css)에 이 이름이 생기면 아래 두 줄을 지우고 그 이름을 읽어라.
        📢 색 담당에게 물을 것 한 줄 — 「위저드 액션 그라데이션을 토큰으로 받을 수 있나」 */
  --gr-ramp: linear-gradient(100deg, #cdf3ef 0%, #e3e6fb 52%, #e2d7fb 100%);
  --gr-ramp-a: #cdf3ef; /* 그 램프의 «첫 끝». 획(stroke)엔 그라데이션을 못 발라서 이 한 색을 쓴다 */
}
body { font-family: var(--gr-sans); -webkit-font-smoothing: antialiased; }

/* 기둥 + 본문. ⚠️ `.app-shell` 은 styles.css 에서 block 이라 여기서 grid 로 덮는다.
   ⚠️ 줄이 둘이 됐다(맨 위 띠 · 본문). 전엔 «자동 흐름»에 맡겼는데 — 화면(pane)이 하나만 보이니
      우연히 맞았던 것이다. 띠가 끼면 그 우연이 깨진다 → 셋 다 «자리를 손으로 박는다». */
.app-shell[data-screen="app"] { display: grid; grid-template-columns: 222px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.app-shell[data-screen="app"] > .side { grid-column: 1; grid-row: 1 / -1; }
.app-shell[data-screen="app"] > .gr-top  { grid-column: 2; grid-row: 1; }
/* 🔴 화면(pane)이 «내용만큼»으로 줄어들던 자리.
   `.pane` 은 styles.css 에서 `margin:0 auto` 인데, 상단 띠 시절엔 블록 자식이라 폭이 100% 였다.
   기둥을 넣어 grid 자식이 되자 그 `auto` 여백이 stretch 를 끄고 **내용 폭으로 오그라들었다**
   (실측: 내용 한 줄 넣었더니 칸 1058 인데 화면이 167px). width:100% 로 되돌린다 — 그래야
   styles.css 의 max-width:960 이 다시 «상한»으로 일한다. */
.app-shell[data-screen="app"] > .pane { grid-column: 2; grid-row: 2; width: 100%; }

/* ── 껍데기는 «영원히 다크» (J.J 2026-08-21) ────────────────────────────────
   🔴 `data-theme="dark"` 만으로는 «변수»만 갈린다 — 뒷면을 칠하는 것은 `body` 하나뿐이라
      바탕은 여전히 OS 를 따라간다(색 레인이 적어 둔 [🟡] 그대로).
      OS 가 라이트면 «밝은 바탕 위에 다크용 글자»가 되어 실측 대비 1.11 이 나왔다 — 못 읽는다.
      그래서 이 둘은 «자기 바탕»을 직접 든다.
   ⚠️ 홈에선 바탕이 `--홈바탕`(검정)이라 기둥·띠도 그걸 따라가야 층이 안 어긋난다. */
/* 🔴 이름을 «어디서나 있는 것»으로 골라야 한다.
   `--bg` 는 styles.css 이름인데 깊은 화면(`/first/*` · `/setup`)은 그 파일을 «안 싣는다» —
   정의 안 된 var 가 되어 바탕이 통째로 안 칠해졌다(실측: 기둥 대비 1.04. 라이트 OS 에서 흰 바탕에 흰 글자).
   `--page` 는 tokens.css 이름이라 그 화면들도 들고 있다. 되돌릴 값은 «뒤»에 둔다(§2③). */
.side, .gr-top { background: var(--page, var(--bg)); color-scheme: dark; }
.app-shell.홈 .side { background: var(--홈바탕); }
/* 라이트 판일 때 껍데기를 «아주 조금» 올리는 규칙은 맨 위 띠 규칙 «뒤»에 있다 — 아래를 보라 */

.side {
  /* ⚠️ `position: relative` — 기둥 «안»의 접기 단추(.gr-side-fold)와 폰의 [닫기] X 가
     절대자리로 오른쪽 위에 앉는다. 이게 없으면 둘이 «저 멀리 조상»에 붙는다. */
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 11px; border-right: 1px solid var(--line-c, var(--border));
}

/* ── ① 포털 정체성 — 늘 기둥 맨 위. 누르면 홈 ─────────────────────────── */
.side-brand {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 10px 13px; border: 0; background: none; cursor: pointer;
  color: var(--tx, var(--text)); font-size: 16.5px; font-weight: 800; letter-spacing: -.015em;
}
/* 로고는 «크롬 은색»이다 — 라임이 아니다. 브랜드와 «누르는 것»의 색을 섞지 않는다 */
.side-brand .mk { flex: none; object-fit: contain; filter: saturate(0) brightness(1.06); }
.side-brand .bd-s { color: var(--tx3, var(--muted)); font-weight: 500; font-size: 13.5px; }
.side-brand .bd-t { font-family: var(--gr-head); }
.side-brand:hover .bd-t { text-decoration: underline; text-underline-offset: 3px; }

/* ── G·ROAD 공용 메뉴 — 앱과 «무관한» 것만. 그래서 홈에서도 안 빈다 ────────
   ⛔ 여기에 소싱·OS 를 넣지 마라 — 앱 고르기는 가운데 카드가 한다(J.J 2026-08-21). */
.side-gr { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.side-sep { height: 1px; margin: 11px 4px 10px; background: var(--line-s, var(--border)); }
.side-sep[hidden] { display: none; }

/* ── ② 현재 앱 — 격자 타일만 «채운다» (사전 규칙 셋: 채워지는 것은 «지금» 하나뿐) ── */
.side-app {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 1px solid var(--line-c, var(--border)); border-radius: 10px;
  background: color-mix(in srgb, var(--tx, var(--text)) 3%, transparent);
  color: var(--tx, var(--text)); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
}
.side-app:hover { background: color-mix(in srgb, var(--tx, var(--text)) 7%, transparent); }
.side-app .cv { margin-left: auto; color: var(--tx3, var(--muted)); font-size: 12px; }
.side-app .tile {
  width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: var(--now-solid, var(--accent-fill)); color: var(--now-ink, var(--accent-ink));
}
/* ── 메뉴 — 알약. ⚠️ `.tab` 은 상단 띠 시절 규칙이 남아 있어 여기서 통째로 덮는다 ──
   ── 색 위계 (J.J 2026-08-21) ────────────────────────────────────────────────
   ⛔ 「큰 밝은 회색 덩어리」를 걷었다. 활성은 «아주 약한 연두 바탕 + 연두 왼쪽 선 + 연두 아이콘».
      글자는 색으로 말하지 않는다 — 읽히는 밝기(--tx)를 그대로 준다(색약 · 사전 규칙 ④).
   ⛔ 색 «값»은 0개다. 연두는 사전의 «지금»(--now) 이다 — 라이트에서는 그 사전이 알아서 내려온다.
      (--now-bg 는 그 색의 «아주 옅은 면»이다 — 형광 면적을 안 늘리는 자리. 값은 tokens.css 가 든다.) */
.side .tab, .side-go {
  position: static; display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; background: none;
  font-size: 13.5px; font-weight: 500; color: var(--tx2, var(--muted));
}
/* 🆕 2026-08-30 — 기둥의 [도움말] 은 «단추»가 아니라 <a> 다(/help/faq 로 나가는 진짜 링크).
   결은 위 `.side-go` 를 그대로 타니 새로 줄 것은 밑줄을 걷는 것 하나뿐이다.
   ⛔ 새 색·새 크기를 주지 마라 — 옆 줄들과 «같은 물건»으로 보여야 한다. */
a.side-go { text-decoration: none; }
.side .tab > .gr-ico, .side-go > .gr-ico { flex: none; display: grid; place-items: center; width: 16px; color: var(--tx3, var(--muted)); }
.side .tab > .nm, .side-go > .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 기둥 「설정」 줄의 점 — 셋팅 할 일이 남았을 때만 켠다 (시안-소싱셋팅흐름 01~03·05 · 04엔 없다).
   켜고 끄는 자는 app.js(enterApp — /api/first/state 를 읽는 그 자리)다. 색은 이름만 쓴다. */
.side .tab > .bell { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--now); flex: none; }
.side .tab > .bell[hidden] { display: none; }
.side .tab:hover, .side-go:not([disabled]):hover {
  color: var(--tx, var(--text)); cursor: pointer;
  background: color-mix(in srgb, var(--tx, var(--text)) 5%, transparent);
}
.side .tab:hover > .gr-ico, .side-go:not([disabled]):hover > .gr-ico { color: var(--tx2, var(--text)); }
/* ── 활성 — «지금 이 화면» (J.J 2026-08-22: 형광 라임 → 실버 그라데이션) ─────
   ⚠️ 모양은 그대로다 — 왼쪽 띠 + 아주 옅은 면. 갈린 것은 «색»뿐이다.
   ⛔ 새 색 값을 적지 않는다 — `--빛-센`·`--빛-여린`(styles.css)은 공식 홈 g-road.io 의
      «크롬 빛» 그대로이고, 그 이름은 이미 라이트/다크 넷을 탄다(라이트에선 어두운 은색으로 내려간다).
   ⚠️ 라임은 «앱 정체색»과 «판 고르개»에만 남는다 — 활성 표시에서는 빠졌다. */
.side .tab.active, .side-go.active {
  position: relative;
  color: var(--tx, var(--text)); font-weight: 600;
  background: color-mix(in srgb, var(--빛-여린, var(--tx)) 16%, transparent);
  border-color: transparent;
}
/* 「여기」를 집는 막대 — 위에서 아래로 «은색이 흐른다». ⚠️ `::after` 는 상단 띠 시절 자리라 `::before` */
.side .tab.active::before, .side-go.active::before {
  content: ""; position: absolute; left: -1px; top: 5px; bottom: 5px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--빛-센, var(--tx)), var(--빛-여린, var(--tx3)));
}
.side .tab.active > .gr-ico, .side-go.active > .gr-ico { color: var(--빛-센, var(--tx)); }
/* 상단 띠 시절의 «켜진 자리 밑줄»을 걷는다 — 기둥에선 판이 그 일을 한다 */
.side .tab.active::after { display: none; }
/* 앱 «내부» 메뉴는 아이콘이 없다 — 그 자리에 들여쓰기를 줘서 층이 보이게 한다 */
.side-app-blk nav[data-앱메뉴] .tab { padding-left: 20px; }

/* G-Coin — 아이콘의 그린만 살린다. ⛔ 글자까지 형광으로 칠하지 않는다 (J.J 2026-08-21) */
.side-coin > .gr-ico { color: var(--now, var(--accent-fill)); opacity: .92; }
/* 한 자리 두 얼굴 — 홈이면 집 그림, 앱 안이면 ← (글자는 JS 가 간다) */
.side-go [data-홈아이콘] .ic-back, .side-go.뒤로 [data-홈아이콘] .ic-home { display: none; }
.side-go.뒤로 [data-홈아이콘] .ic-back { display: block; }
.side-coin:hover > .gr-ico { opacity: 1; }

/* ── 지금 앱 묶음 — 앱 «이름»은 메뉴가 아니라 «머리»다. 그래서 안 눌린다 ──── */
.side-app-blk { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.side-app-blk[hidden] { display: none; }
/* ── 앱 바꾸기 (J.J 2026-08-22 확정) ────────────────────────────────────────
   닫힘 = 아이콘 타일 + 이름 + ⇅ · 열림 = «같은 박스»가 아래로 늘어난다.
   🔴 전엔 트리거 박스와 목록 박스가 «둘»이라 「두 개의 독립된 섹션」으로 보였다(J.J).
      이제 박스가 하나다 — 열리면 그 안에 머리글과 항목이 들어온다.
   ⚠️ 기호가 ▾ 가 아니라 ⇅ 인 까닭 — ▾ 는 「열린다」까지만 말하고 메뉴·선택칸 어디에나 쓰인다.
      ⇅ 는 「바꾼다」는 뜻이라 이 자리에서만 쓰인다(Linear·Vercel 팀 전환 기호). */
.side-app-box {
  border: 1px solid var(--line-c, var(--border)); border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--tx, var(--text)) 5%, transparent); transition: .16s;
}
.side-app-box.열림 {
  border-color: color-mix(in srgb, var(--tx, var(--text)) 26%, transparent);
  background: var(--card, var(--page)); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9);
}
.side-app-nm {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border: 0; background: none;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--tx, var(--text)); cursor: pointer; transition: .16s;
}
.side-app-nm:hover { background: color-mix(in srgb, var(--tx, var(--text)) 7%, transparent); }
.side-app-nm .cv { margin-left: auto; display: grid; place-items: center; color: var(--tx3, var(--muted)); }
.side-app-nm:hover .cv { color: var(--tx2, var(--text)); }
/* 앱 아이콘 타일 — 홈 카드와 «같은 그림·같은 색».
   ⛔ 그림을 여기 다시 그리지 않는다 — shell-nav.js 가 그 카드에서 떠 온다(두 벌이면 갈린다). */
.앱타일 {
  width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center;
  color: var(--앱색, var(--tx3, var(--muted)));
  background: color-mix(in srgb, var(--앱색, transparent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--앱색, transparent) 32%, transparent);
}
.앱타일 svg { display: block; }
/* 열린 판 — «같은 박스 안»이라 테두리도 그림자도 없다 */
.side-app-pop { display: flex; flex-direction: column; }
.side-app-pop[hidden] { display: none; }
.side-app-pop .머리 {
  padding: 8px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3, var(--muted));
  background: color-mix(in srgb, var(--tx, var(--text)) 4%, transparent);
}
.side-app-pop button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border: 0; background: none; cursor: pointer;
  color: var(--tx2, var(--muted)); font-size: 13px; font-weight: 500;
}
.side-app-pop button:hover { color: var(--tx, var(--text)); background: color-mix(in srgb, var(--tx, var(--text)) 6%, transparent); }
.side-app-pop button.now { color: var(--tx, var(--text)); font-weight: 600; }
.side-app-pop .지금칩 {
  margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
  color: var(--앱색, var(--tx3, var(--muted)));
  background: color-mix(in srgb, var(--앱색, transparent) 15%, transparent);
}
.side-app-pop .가름 { height: 1px; background: var(--line-s, var(--border)); }
/* 아래 메뉴와 «층»을 벌린다 — 붙어 있으면 다시 한 무리로 읽힌다 */
.side-app-blk nav[data-앱메뉴] { margin-top: 5px; }
/* 앱 정체색 — «두 줄»뿐이다. 기둥 · 타일 · 고를 판이 같은 줄을 읽는다 */
.side.앱-sourcing, [data-앱="sourcing"] { --앱색: #c6f24e; }
.side.앱-os,       [data-앱="os"]       { --앱색: #8fc7f0; }

.side-sep { height: 1px; margin: 11px 6px 10px; background: var(--line-s, var(--border)); }
.side-sep[hidden] { display: none; }
.side-gr { display: flex; flex-direction: column; gap: 2px; }

.side-mid { flex: 1; }
.side-foot { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line-s, var(--border));
  display: flex; flex-direction: column; gap: 2px; }
/* 🔴 갈 곳이 없는 줄 — 흐리게 «그리고» 안 눌리게. 둘 다 해야 한다.
   흐리기만 하면 손님이 눌러 보고 「고장났다」로 읽는다. */
/* ── 맨 아래 둘 — «최종 모습»으로 (J.J 2026-08-21: 「너무 죽어 있어」) ────────
   흐리게(.42 → .62) 두던 것을 걷었다. 다른 메뉴 줄과 «똑같이» 보이고 hover 도 똑같다.
   🔴 다만 갈 곳은 아직 «없다» — 눌러도 아무 일이 안 난다. J.J 판단(손님이 아직 없다)이다.
      화면이 생기면 `data-tab` 한 줄이면 붙는다. 그때까지 이 자리를 «없는 것처럼» 두지 않는다. */
/* 누구로 들어와 있나 — «메뉴 줄»이 아니라 말이다. 맨 아래에 작게 깔고 선을 두지 않는다
   (선을 두면 로그아웃 줄이 다시 «따로 노는 물건»으로 보인다 — J.J 가 걷으라 한 그 느낌이다) */
/* ── ☀ / ☾ — 본문 판을 고르는 «한 자리» · 맨 위 띠 (J.J 고름 A · 2026-08-21) ──
   ⚠️ 사이드바 하단에서 옮겨왔다. 까닭은 모바일 — 기둥은 서랍으로 접혀 «열어야만» 나오는데
      띠는 항상 남는다. 그리고 그 줄엔 이미 «내 것»(스토어 · 계정)이 모여 있다.
   ⛔ 두 곳에 두지 않는다 — 같은 스위치가 둘이면 손님이 둘을 대조하게 된다. */
.gr-theme {
  display: inline-flex; align-self: center; flex: none; padding: 3px; gap: 1px;
  border-radius: 10px; border: 0;
  background: color-mix(in srgb, var(--tx, var(--text)) 6%, transparent);
}
/* ⚠️ 스토어 알약과 «같은 무게»로 서면 둘이 경쟁한다 (J.J: 「레이아웃이 별로」).
   그래서 여기엔 테두리를 «안» 준다 — 알약은 «고르는 것», 이건 «작은 설정»이다. */
/* 🔴 `<button>` 에 `display:grid; place-items:center` 를 쓰지 마라 —
   실측에서 그림이 «칸 한가운데»가 아니라 «한가운데를 왼쪽 위 모서리로» 앉았다(가로·세로 7px 씩 어긋남).
   단추는 내부 상자가 특수해서 격자 정렬이 엔진마다 다르게 논다. flex 는 그런 자리가 없다.
   ⚠️ `padding:0` 도 같이 준다 — 안 주면 브라우저 기본 안여백이 붙어 폭이 26 대신 28 이 된다(실측). */
.gr-theme button {
  width: 26px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  color: var(--tx3, var(--muted)); transition: .16s;
}
.gr-theme button svg { display: block; } /* 글리프가 아니라 그림이라 «자리»가 어긋나지 않는다 */
.gr-theme button:hover { color: var(--tx2, var(--text)); }
/* 고른 쪽만 «판 위로» 뜬다 — 옅은 라임 면 + 라임 그림. ⛔ 테두리 링은 걷었다(칸이 좁아 보였다) */
.gr-theme button.on {
  color: var(--now, var(--accent-fill));
  background: color-mix(in srgb, var(--now, var(--accent-fill)) 15%, transparent);
}

.side-foot .who-mail {
  display: block; margin-top: 6px; padding: 7px 11px 2px; color: var(--tx3, var(--muted)); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 맨 위 띠 — 왼쪽 «지금 위치» · 오른쪽 «스토어»와 «계정» (J.J 2026-08-21) ───
   ⚠️ 제목을 크게 되풀이하는 자리가 아니다 — 위치 확인용이라 글자를 작게 둔다.
   ⛔ 스토어와 계정은 «다른 일»이라 붙여 놓지 않는다 — 사이를 벌리고, 테두리는 스토어에만 준다. */
.gr-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 50px; padding: 0 18px; border-bottom: 1px solid var(--line-s, var(--border));
  background: var(--page, var(--bg)); transition: background .22s;
}
.app-shell.홈 .gr-top { background: var(--홈바탕); }

/* ── 라이트 판일 때만 껍데기를 «아주 조금» 올린다 (J.J 2026-08-21) ──────────
   흰 본문 옆에서 완전 검정은 «구멍»처럼 보인다. 아주 조금만 회색으로 띄운다.
   ⛔ 새 색 값을 적지 않는다 — 다크 사전의 «판»(--card)과 «바탕»(--page)을 반씩 섞는다.
      껍데기는 자기 요소에 다크가 박혀 있어 그 둘은 언제나 다크 값이다(≈ #141518).
   ⚠️ 글자는 그대로 흰색이다 — 사전은 안 건드리고 «바탕»만 올린다.
   🔴 자리가 여기인 까닭 — 위 두 줄(`.app-shell.홈 …`)과 특정도가 «같아서»(0,3,0) 순서로 갈린다.
      전엔 기둥 규칙 뒤·띠 규칙 앞에 있어서 «기둥만 회색, 띠는 검정»으로 갈렸다(실측).
   ⛔ 홈은 예외다 — 홈은 판과 무관하게 검정이라 아래에서 되돌린다. */
:root[data-theme="light"] .side,
:root[data-theme="light"] .gr-top { background: color-mix(in srgb, var(--card) 50%, var(--page)); }
:root[data-theme="light"] .app-shell.홈 .side,
:root[data-theme="light"] .app-shell.홈 .gr-top { background: var(--홈바탕); }

/* 지금 위치 — 마지막 조각만 «진하게». 앞 조각은 눌러서 돌아가는 길이다 */
/* 🔴 `margin-right: auto` 가 «있어야 한다» — 띠는 `justify-content: space-between` 인데
   2026-08-22 에 ☰ 가 맨 앞에 붙어 아이가 «셋»이 됐다. 셋이면 space-between 이 가운데 아이를
   한가운데로 밀어낸다(실측: 빵부스러기가 왼쪽 300 이 아니라 719 에 있었다 — 화면에선
   「띠가 텅 비어 보인다」로 나타난다). 남는 자리를 빵부스러기 «오른쪽»으로 몰아 왼쪽에 붙인다. */
.gr-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; margin-right: auto; font-size: 12.5px; }
.gr-crumb .cb { color: var(--tx3, var(--muted)); background: none; border: 0; padding: 2px 3px;
  font: inherit; border-radius: 5px; white-space: nowrap; }
.gr-crumb button.cb { cursor: pointer; }
.gr-crumb button.cb:hover { color: var(--tx, var(--text)); background: color-mix(in srgb, var(--tx, var(--text)) 6%, transparent); }
.gr-crumb .cb.now { color: var(--tx, var(--text)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.gr-crumb .sp { color: var(--tx3, var(--muted)); opacity: .5; flex: none; }

.gr-top-right { position: relative; display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
/* ⚠️ G-Coin 칩 규칙은 «걷었다» (J.J 2026-08-21) — 띠에서 그 줄을 뺐다.
   기둥 메뉴에 같은 줄이 있고, 띠는 «내 것»(판 · 스토어 · 계정)만 든다. */
/* 알약 — 존재감을 한 급 올렸다 (J.J 2026-08-21: 「연결된 Shopify 스토어라는 의미가 더 명확하게」).
   키운 것은 «면»이 아니라 자리와 테두리다 — 밝은 덩어리를 만들지 않는다. */
/* 🔴 `display:flex` 가 UA 의 `[hidden]` 을 이긴다 — 이 줄이 없으면 «빈 알약»(아이콘만, 이름 없음)이
   값이 오기 전·못 읽었을 때 그대로 보인다 (J.J 2026-08-26 실측: 「케이푸페 이름이 뜨다 안 뜨다」의 반쪽).
   shell-embed 는 이름이 오기 전 `알약.hidden = true` 로 두는데, 이 규칙이 없어서 그 뜻이 죽어 있었다. */
.store-pill[hidden] { display: none; }
.store-pill {
  display: flex; align-items: center; gap: 7px; padding: 6px 11px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--tx, var(--text)) 18%, transparent); border-radius: 9px;
  background: color-mix(in srgb, var(--tx, var(--text)) 5%, transparent);
  color: var(--tx2, var(--text)); font: 600 13px/1 inherit; cursor: pointer; transition: .16s;
  max-width: 240px; min-width: 0;
}
.store-pill b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* 연결 상태점 — «이 계정에 붙은 스토어가 있나»만 말한다. 살아 있나를 재는 문은 아직 없다 */
.store-pill .sp-live { width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--done, var(--gr-ramp-a));
  box-shadow: 0 0 6px -1px color-mix(in srgb, var(--done, transparent) 80%, transparent); }
.store-pill .sp-live[hidden] { display: none; }
/* ── 색은 «아이콘과 글자»에만 (J.J 고름 ㉢ · 2026-08-21) ────────────────────
   ⛔ 면을 칠하지 않는다 — 밝은 파스텔이라 면에 바르면 다크 화면 오른쪽 위에 «흰 덩어리»가 앉는다.
      획·글자에만 얹으면 눈에는 띄되 차분함이 안 깨진다(J.J: 과한 네온 금지). */
.store-pill svg { flex: none; color: var(--gr-ramp-a); transition: opacity .16s; opacity: .88; }
.store-pill .cv { color: var(--tx3, var(--muted)); font-size: 10px; margin-left: 1px; }
/* 🔴 «되돌릴 값을 먼저» 둔다 (§2③). background-clip 을 못 받는 화면에서 color:transparent 만
   남으면 스토어 이름이 «통째로 사라진다» — 그건 안 보이는 것보다 나쁘다. */
.store-pill b { color: var(--tx, var(--text)); font-weight: 700; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .store-pill b {
    background: var(--gr-ramp); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.store-pill:hover, .store-pill[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--tx, var(--text)) 26%, transparent);
  background: color-mix(in srgb, var(--gr-ramp-a) 7%, transparent);
}
.store-pill:hover svg, .store-pill[aria-expanded="true"] svg { opacity: 1; }

.store-pop {
  position: absolute; top: calc(100% + 7px); right: 42px; z-index: 40; min-width: 208px;
  padding: 9px; border: 1px solid var(--line-c, var(--border)); border-radius: 11px;
  background: var(--card, var(--page)); box-shadow: 0 18px 38px -20px rgba(0,0,0,.9);
}
.store-pop[hidden] { display: none; }
.store-pop .sp-h { padding: 2px 6px 7px; font-size: 10.5px; letter-spacing: .06em;
  color: var(--tx3, var(--muted)); text-transform: uppercase; }
.store-pop .sp-row { display: flex; align-items: center; gap: 8px; padding: 7px 7px;
  border-radius: 7px; background: color-mix(in srgb, var(--gr-ramp-a) 7%, transparent); font-size: 13px; color: var(--tx, var(--text)); }
.store-pop .sp-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--gr-ramp); }
.store-pop .sp-now { margin-left: auto; font-size: 10.5px; color: var(--tx3, var(--muted)); }

/* 계정 — «표시»다. 단추가 아니다(계정 화면이 아직 없다 · 안 되는 것을 그리지 않는다) */
.gr-top-me .av {
  display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--line-c, var(--border)); background: color-mix(in srgb, var(--tx, var(--text)) 9%, transparent);
  color: var(--tx2, var(--text)); font-size: 11.5px; font-weight: 700;
}

/* ═══ 모바일 — 기둥을 «눕히지 않고» 위로 연다 (J.J 2026-08-21) ═══════════════
   ⚠️ 2026-08-21 뒤집혔다. 전에는 기둥을 가로로 눕혀 맨 위에 붙였는데, J.J 가 못박았다 —
      「PC용 사이드패널을 좁혀서 억지로 모바일에 남기지 않습니다 … 본문을 옆으로 밀어내는
       방식이 아니라 overlay 방식」. 그래서 «서랍»이다.
   ⛔ 메뉴를 두 벌로 만들지 않는다 — 서랍에 들어가는 것은 «그 기둥 그 자체»다.
      배선은 `shell-drawer.js` 한 곳이고 화면 셋(포털·처음 셋팅·자동적용)이 같이 쓴다.

   ── [닫기]와 어둠막과 ☰ 는 PC 에선 «없는 것»이다 ─────────────────────────
   ⚠️ 2026-08-22 두 번 뒤집혔다 (J.J).
      ㉠ 「모든 페이지에서 사이드패널 닫기·열기가 되어야」 → 맨 위 띠의 ☰ 를 PC 에도 켰다
      ㉡ 「햄버거는 모바일에서만 보여야지」 · 「보통 사이드패널 닫기는 사이드패널 «위»에 있지 않아?」
         → 되돌렸다. PC 의 접기 단추는 **기둥 안 오른쪽 위**(.gr-side-fold)다.
      남는 문제 하나: 접고 나면 기둥이 사라져서 그 단추도 사라진다 →
      «펴는» 길만 맨 위 띠에 남긴다. **접혔을 때만 보이고, 그림도 ☰ 가 아니라 «판»이다.** */
.gr-drawer-x, .gr-backdrop, .gr-burger, .gr-side-fold { display: none; }
/* ☰ · 판 — 한 단추 안에 그림이 둘이다. 어느 것을 보일지는 아래 두 media 가 고른다 */
.gr-burger, .gr-side-fold {
  place-items: center; flex: none; width: 34px; height: 34px;
  border: 0; border-radius: 8px; background: none; color: var(--tx2, var(--muted)); cursor: pointer;
}
.gr-burger { margin-left: -6px; }
.gr-burger:hover, .gr-side-fold:hover { color: var(--tx, var(--text));
  background: color-mix(in srgb, var(--tx, var(--text)) 7%, transparent); }
.gr-burger .ic-panel, .gr-burger .ic-ham { display: none; }

/* ── PC — 접기 단추는 «기둥 위», 펴기 단추는 «접혔을 때만» 띠에 ────────────── */
@media (min-width: 981px) {
  /* 기둥 안 오른쪽 위. 브랜드 줄과 안 겹치게 그 줄의 오른쪽 안여백을 넓힌다 */
  html:not(.기둥-접힘) .gr-side-fold { display: grid; position: absolute; top: 10px; right: 9px; z-index: 2;
    width: 30px; height: 30px; }
  html:not(.기둥-접힘) .side-brand { padding-right: 34px; }
  /* 접히면 기둥이 통째로 없어진다 → 그때만 띠에 «판» 단추가 선다 (☰ 그림은 안 쓴다) */
  html.기둥-접힘 .gr-burger { display: grid; }
  html.기둥-접힘 .gr-burger .ic-panel { display: block; }
}

/* ── 기둥 접기 — PC 에서만. 폰은 «서랍»이라 접을 것이 없다 ────────────────────
   ⛔ 기둥을 «좁히지» 않는다 — 아이콘만 남은 얇은 기둥은 J.J 가 모바일에서 이미 물린 짜임이다
      (「좁혀서 억지로 남기지 않습니다」). 접으면 «없어지고», 본문이 그 폭을 그대로 받는다.
   🔴 깊은 화면에선 `first-shell.css` 가 내 규칙 «뒤»에 실린다(§2④) → 순서로 이기려 하지 말고
      `html` 을 하나 더 얹어 «무게»로 이겨 둔다. 순서는 언제든 또 바뀐다. */
@media (min-width: 981px) {
  html.기둥-접힘 .app-shell[data-screen="app"] { grid-template-columns: 0 1fr; }
  html.기둥-접힘 .app-shell[data-screen="app"] > .side { display: none; }
  /* 깊은 화면 둘 — 트랙이 `auto` 라 기둥이 빠지면 0 이 된다. 본문 줄은 그대로 둔다 */
  html.기둥-접힘 .c-app.gr-껍데기 > .c-side,
  html.기둥-접힘 .gr-setup > .c-side { display: none; }
  /* ⛔ 같은 일을 하는 손잡이가 «둘»이면 상태가 갈린다 — 그쪽 접기 손잡이(.c-side-toggle)는 끈다.
     내 ☰ 가 그 자리를 그대로 대신하고, 그쪽 파일은 0줄이다. */
  html .c-app .c-side-toggle { display: none; }
}

/* ⚠️ 경계가 «980» 인 까닭 — 깊은 화면 쪽(`first-shell.css:224`)이 980 아래에서 기둥을 감춘다.
   내 서랍을 720 에 두면 721~980 구간엔 «메뉴가 아예 없는» 구멍이 생긴다. 그쪽에 맞춘다. */
@media (max-width: 980px) {
  /* 한 칸 — 기둥은 격자에서 «빠진다». 본문이 옆으로 밀리지 않는다 */
  .app-shell[data-screen="app"] { display: block; }
  .app-shell[data-screen="app"] > .pane { width: 100%; }

  /* 기둥 = 서랍. 화면 «위»로 열린다(본문을 안 민다) */
  .side {
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(84vw, 288px);
    overflow: auto; overscroll-behavior: contain;
    border-right: 1px solid var(--line-c, var(--border));
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.3,0,.2,1);
    box-shadow: 0 0 60px -10px rgba(0,0,0,.85);
  }
  .서랍-열림 .side { transform: translateX(0); }
  .gr-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,.58); opacity: 0; pointer-events: none; transition: opacity .24s;
  }
  .서랍-열림 .gr-backdrop { opacity: 1; pointer-events: auto; }
  /* 서랍이 열린 동안 뒤가 안 굴러가게 */
  .서랍-열림 body { overflow: hidden; }

  /* ⚠️ ☰ 의 «모양»은 위 한 벌 규칙에 있다 — 여기선 «보인다»와 «어느 그림인가»만 정한다 */
  .gr-burger { display: grid; }
  .gr-burger .ic-ham { display: block; }
  .gr-burger .ic-panel { display: none; }
  /* ⛔ PC 의 접기 단추는 폰에 «없는 것»이다 — 폰엔 이미 [닫기] X 가 그 자리에 있다 */
  .gr-side-fold { display: none; }
  .gr-drawer-x {
    display: grid; place-items: center; position: absolute; top: 11px; right: 11px; z-index: 2;
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: none;
    color: var(--tx3, var(--muted)); cursor: pointer;
  }
  .gr-drawer-x:hover { color: var(--tx, var(--text)); }
  .side-brand { padding-right: 40px; } /* [닫기]와 안 겹치게 */

  /* ── 맨 위 띠 — `☰  지금 화면명            스토어 · 프로필` ──────────────
     ⛔ 두 줄로 깨지지 않게 «싸매지 않는다». 줄어드는 것은 가운데(화면명)와 스토어 이름뿐이다. */
  .gr-top { height: 52px; padding: 0 12px; gap: 8px; flex-wrap: nowrap; }
  .gr-crumb { flex: 1; min-width: 0; }
  /* 긴 빵부스러기를 억지로 다 안 보여준다 — «지금 화면»만 남긴다 (J.J) */
  .gr-crumb .cb:not(.now), .gr-crumb .sp { display: none; }
  .gr-crumb .cb.now { font-size: 14px; }
  .gr-top-right { gap: 8px; }
  /* ⚠️ 폰에선 자리가 좁다 — 스토어 이름을 더 줄이고 판 컨트롤은 그대로 둔다
     (판은 «서랍 안»에 없다. 여기서 빼면 폰에서 바꿀 길이 아예 사라진다). */
  .store-pill { max-width: 34vw; padding: 5px 8px; font-size: 12px; }
  .gr-theme button { width: 24px; height: 21px; }
  .store-pill .cv { display: none; }
  .gr-top-me .av { width: 25px; height: 25px; }
  .store-pop { right: 12px; min-width: 0; max-width: calc(100vw - 24px); }

  /* 홈 본문 — PC 여백(44px)을 폰에 그대로 쓰면 카드가 «가운데 좁은 기둥»이 된다 */
  .pane-home { padding: 26px 16px 56px; }
  .home-cards { margin-top: 22px; gap: 12px; }
  .home-card { padding: 18px 40px 18px 18px; }
  .home-t { font-size: 19px; }

  /* ── 깊은 화면 셋도 «같은 서랍»을 쓴다 ──────────────────────────────────
     ⛔ 그쪽 `.c-side` 를 «감춘 채로» 두면 그 안의 기둥이 통째로 죽는다(부모가 display:none 이면
        자식의 position:fixed 도 안 산다). 그래서 «껍데기만» 되살리고 기둥은 서랍이 맡는다. */
  .c-app.gr-껍데기 > .c-side, .gr-setup > .c-side {
    display: block; position: static; width: auto; height: auto;
    border-right: 0; overflow: visible;
  }
  /* 그쪽 «접기» 손잡이 — 서랍에선 뜻이 없고, 화면 밖으로 삐져나가 가로 스크롤을 만든다(실측 11px).
     🔴 무게를 «한 급 올려서» 끈다 — 깊은 화면에선 `first-shell.css` 가 내 `shell.css` «뒤»에 실려서
        같은 무게면 그쪽이 이긴다(실측 · 앞 회차에 반대로 알고 있었다). 순서는 언제든 또 바뀔 수 있으니
        순서가 아니라 «무게»로 이겨 둔다. */
  .c-app .c-side-toggle, .gr-setup .c-side-toggle { display: none; }
}

/* ── ③ 앱 메뉴 묶음 — 고른 앱 것만 보인다 (shell-nav.js 가 켠다) ────────────
   ⛔ 「현재 앱이 소싱인데 본문이 OS 온보딩」을 막는 자리는 JS 쪽이다.
      여기선 «안 고른 앱의 메뉴는 아예 없다»만 지킨다. */
.side nav[data-앱메뉴] { display: flex; flex-direction: column; gap: 2px; }
.side nav[data-앱메뉴][hidden] { display: none; }

/* ── G·ROAD 홈 ────────────────────────────────────────────────────────────
   시안: ~/Downloads/포털홈-판떼기밝게.html (J.J 확정 2026-08-21)
   ⛔ 「넓은 본문에 작은 카드 하나」로 만들지 않는다 — 카드가 «칸을 채우는 격자»다.

   ── 바탕은 검정 · 판은 «밝은 쪽» ──────────────────────────────────────────
   홈에서만 바탕이 #0A0A0A 다(앱 안은 --page = 지금 #15171a). 기둥까지 같이 내린다 —
   홈에서 기둥만 밝으면 층이 어긋나 보인다. 그 토글은 shell-nav.js 가 한다(.app-shell.홈).
   ⛔ 앱 전체 바탕(styles.css·tokens.css)은 0줄 — 화면 일곱 공용이고 남의 레인이다.

   ── 판이 검정 위에서도 보이는 «겹 넷» (이게 이 디자인의 전부다) ────────────
     ① 세로 그라데이션  흰색 5.0% → 1.4%   검정 위에 겹치면 #161616 → #0d0d0d
     ② 헤어라인 테두리  흰색 10%           #222222
     ③ 안쪽 윗선        흰색 7%            #1b1b1b — «빛이 위에서 온다»는 신호
     ④ 바닥 그림자      검정 90% · 34px
   ⚠️ ①만 있으면 «면»이고, ③이 있어야 «물건»이 된다. 단색 하나로는 안 나오는 그림이다.

   ── 앱 정체색 ─────────────────────────────────────────────────────────────
   ⚠️ 아래 두 값은 «앱 정체색»이고 상태 사전(--now·--done·--wait·--danger)과 다른 갈래다.
      지금은 사전 값을 «빌려» 쓴다 — 색 담당이 「앱 색을 상태 밖에서 준다」고 답하면 여기 두 줄만 갈면 끝난다.
   ⛔ 그때까지 이 값을 다른 자리에 퍼뜨리지 마라. */
/* ⚠️ 홈 바탕 값은 «이 한 줄»에만 있다 — 맨 위 띠도 이 이름을 읽는다(값을 두 벌로 두지 않는다) */
.app-shell.홈 { --홈바탕: #0A0A0A; background: var(--홈바탕); transition: background .22s; }
/* 🔴 `.pane` 은 styles.css 에서 grid 다. 트랙을 안 묶으면 «max-content»로 잡혀서
   폭 390 짜리 화면에서도 트랙이 576px 이 되고 카드 2열이 억지로 들어간다
   (실측: 폰에서 가로 스크롤 210px). `minmax(0,1fr)` 이 그 자리를 막는다.
   ⛔ `.pane` 통째가 아니라 «내 홈 판»에만 건다 — 남의 본문 트랙을 안 건드린다. */
.pane-home { max-width: 100%; grid-template-columns: minmax(0, 1fr);
  align-content: start; margin: -20px; padding: 46px 44px 70px; }
.home-top { margin: 0 0 6px; }
.home-mk { flex: none; object-fit: contain; filter: saturate(0) brightness(1.06); }
.home-t { margin: 0; font-family: var(--gr-head); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.home-s { margin: 2px 0 0; font-size: 14px; color: rgba(255,255,255,.62); }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
  max-width: 900px; margin-top: 30px; }

.home-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px 46px 22px 22px; border-radius: 16px; cursor: pointer; transition: .22s;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -24px rgba(0,0,0,.9);
}
.home-card[data-앱열기="sourcing"] { --앱색: #c6f24e; }
.home-card[data-앱열기="os"]       { --앱색: #8fc7f0; }
/* hover — 테두리와 «아주 옅은 면»만 그 앱 색으로. ⛔ 큰 형광 면적을 만들지 않는다 (J.J 2026-08-21) */
.home-card:hover, .home-card:focus-visible {
  transform: translateY(-2px); outline: none;
  border-color: color-mix(in srgb, var(--앱색) 52%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--앱색) 7%, transparent), rgba(255,255,255,.014));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 26px 46px -26px rgba(0,0,0,1); }
/* 오른쪽 작은 › — 「여기 들어간다」는 신호. 단추를 걷은 자리를 대신한다 */
.hc-arrow { position: absolute; z-index: 2; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 21px; line-height: 1; color: rgba(255,255,255,.34); transition: .22s; }
.home-card:hover .hc-arrow, .home-card:focus-visible .hc-arrow {
  color: var(--앱색); transform: translateY(-50%) translateX(3px); }
/* ⚠️ 이 줄은 «도는 빛» 위로 내용을 올리는 자리다. 그런데 특정도가 (0,2,0) 이라
   나중에 온 `.hc-arrow { position: absolute }` (0,1,0) 을 «이겨서» 화살표가 글 밑으로 흘렀다
   (실측: 카드 오른쪽 688 인데 화살표가 249 에 있었다 — 눈으로는 「좀 이상한 여백」으로만 보인다).
   → 절대자리를 쓰는 것은 빼고, 그건 자기 규칙에서 z-index 를 직접 든다. */
.home-card > *:not(.cwR):not(.hc-arrow) { position: relative; z-index: 2; }

/* 아이콘 — 색을 «면으로 채우지 않고» 빛으로 낸다. 광량은 J.J 지시로 25% 내린 값이다
   (안쪽 30% · 테두리 46% · 바깥 12px/52% · 글리프 4px/38%). 굵기 2.1 은 마크업에 있다.
   ⚠️ 타일 바탕은 판이 밝아진 만큼 같이 올렸다(#131418) — 안 올리면 타일만 구멍처럼 파인다. */
.home-card .hc-ic {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 13px; margin-bottom: 16px; color: var(--앱색);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--앱색) 30%, transparent) 0%,
    color-mix(in srgb, var(--앱색) 9%, transparent) 44%, transparent 68%), #131418;
  border: 1px solid color-mix(in srgb, var(--앱색) 46%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--앱색) 30%, transparent),
              0 0 12px -7px color-mix(in srgb, var(--앱색) 52%, transparent);
}
.home-card .hc-ic svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--앱색) 38%, transparent)); }
.home-card:hover .hc-ic { border-color: color-mix(in srgb, var(--앱색) 64%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--앱색) 40%, transparent),
              0 0 16px -7px color-mix(in srgb, var(--앱색) 66%, transparent); }

.hc-eyebrow { font: 500 11px/1 var(--gr-mono); letter-spacing: .18em;
  color: rgba(255,255,255,.62); opacity: .8; margin-bottom: 9px; }
.home-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.home-card p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.62); }

/* ── 도는 빛 — g-road.io 의 회전 테두리를 «그대로» 옮겼다 (2026-08-21 실측) ────
   회전 conic 그라데이션을 «테두리에만» 마스크한다(mask-composite:exclude).
   ⛔ 이 광량은 안 건드린다 — 줄인 것은 아이콘뿐이다(J.J). 카드 .5/1/.25. */
.cwR { position: absolute; inset: 0; z-index: 1; border-radius: 16px; padding: 1px; pointer-events: none;
  opacity: .5; transition: .22s;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: content-box, border-box; mask-composite: exclude; }
.home-card:hover .cwR { opacity: 1; }
.cwR::before { content: ""; position: absolute; top: 50%; left: 50%; width: 130%; aspect-ratio: 1/1;
  background: conic-gradient(var(--앱색) 0deg, rgba(255,255,255,.25) 46deg, transparent 96deg,
    transparent 264deg, rgba(255,255,255,.25) 314deg, var(--앱색) 360deg);
  animation: gwTurn 7s linear infinite; }
/* ⚠️ 단추의 «도는 빛»(.gw/.gwR/.hc-go)은 걷었다 — [열기] 단추가 없어졌다(J.J 2026-08-21).
   카드 테두리를 도는 빛(.cwR)은 «그대로»다. 그건 카드 것이지 단추 것이 아니었다. */
@keyframes gwTurn { 0% { transform: translate(-50%,-50%) rotate(0) } 100% { transform: translate(-50%,-50%) rotate(360deg) } }
/* ⚠️ 빛이 도는 게 불편한 손님을 존중한다 — 그 설정이면 빛도 뜨는 것도 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  .cwR::before { animation: none }
  .home-card:hover { transform: none }
}


/* ── 설정 화면 — «두 덩어리 + 판넬 카드» (J.J 2026-08-22 · 노션 「제품 목록」 ⑧⑨) ──
   J.J: 「아이콘도 첫홈처럼 판넬로」. 홈 카드의 짜임(아이콘 타일 · 이름 · 오른쪽 ›)을 그대로
   쓰되 «작은 벌»이다 — 홈은 앱 두 개를 고르는 자리라 크고, 여기는 네 줄짜리 목록이다.
   🔴 홈 카드와 «다른 점»: 홈은 판이 다크로 못박혀 있어 흰색을 박아 써도 됐지만
      이 화면은 본문이라 손님이 고른 판을 따라간다 → 색은 «이름»으로만 쓴다.
      (라이트로 한 바퀴 더 돌 것: 대비가 4.5 밑이면 다크에서만 멀쩡한 화면이 된다 — §2⑧) */
/* 「빛」은 색이 아니다 — 위에서 떨어지는 «흰 빛» 하나다. 값이 여기 «한 곳»에만 있다 */
.gr-cfg { --gr-빛: #ffffff;
  display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
/* 덩어리 머리 — 시안6 ㉢ (J.J 가 골랐다 2026-08-22): 「글자가 작아서 구분이 잘 안 되고 덩그러니 같다」
   ⚠️ 전엔 12px 회색이었다. 이름을 14.5px «흰색»으로 올리고, 오른쪽으로 가는 선 하나로 구역을 긋는다.
      선이 «칸을 가르는 일»을 하니 카드는 한 줄도 안 바꿔도 두 덩어리가 갈린다.
   ⚠️ 카드 이름(15px)보다 «작다» — 머리가 더 크면 머리가 주인공이 된다. 굵기로만 앞선다. */
.gr-cfg-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.gr-cfg-h b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  color: var(--text); }
.gr-cfg-h i { flex: 1; height: 1px; background: color-mix(in srgb, var(--border) 75%, transparent); }
/* 개수 — 「이 구역에 몇 개」. 흐리고 작다. 숫자가 줄맞춤되게 tabular */
.gr-cfg-h em { font-style: normal; color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums; }
/* ⚠️ `auto-fit` 이 아니라 `auto-fill` 이다 — 덩어리 하나에 카드가 «한 장»뿐인 자리가 있는데
   auto-fit 은 그 한 장을 900px 통짜로 늘려서, 아래 세 장과 폭이 어긋나 보였다(실측).
   auto-fill 은 빈 칸을 남겨 두어 카드 폭이 두 덩어리에서 같다. */
.gr-cfg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
/* ⚠️ `.pane` 은 grid 다 — 폭 좁은 화면에서 트랙이 max-content 로 부푸는 자리다(§2⑦).
   여기선 카드 격자가 제 안에서 접히므로 트랙을 안 묶어도 되지만, 최소폭을 250 으로 둬
   390 폰에서도 «한 열»로 접히게 했다. */
.gr-cfg-card { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 34px 14px 14px; border-radius: 14px; text-decoration: none; transition: .18s;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent); }
.gr-cfg-card:hover, .gr-cfg-card:focus-visible { outline: none; transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--now) 45%, transparent);
  background: color-mix(in srgb, var(--now) 7%, transparent); }
/* 아이콘 타일 — «무채색»이다 (J.J 2026-08-22 · 포털 홈 깊이시안의 그 타일).
   🔴 전엔 세 겹이 다 라임이었다. 걷은 까닭 셋:
     ① 사전 규칙이 「화면에서 «채워지는» 것은 지금 단계 하나뿐」이라고 못박았다. 이 화면엔 «지금»이 없다 —
        넷이 다 라임이면 넷 다 으뜸이고, 결국 아무것도 으뜸이 아니다.
     ② 라임은 이 앱에서 «소싱»이라는 이름표다(기둥의 앱 타일이 그 색). 설정 항목까지 입으면 그 표가 흐려진다.
     ③ 제품 목록은 이미 같은 까닭으로 「면에 라임을 안 칠한다」를 지킨다 — 이 화면만 예외였다.
   ⚠️ 라임이 사라진 게 아니라 «자리를 옮겼다» — 올렸을 때 카드 테두리·면·화살표가 라임이 된다.
   ⛔ 값을 박지 않는다. `--text` 를 섞어 쓰므로 라이트에선 저절로 뒤집힌다(글리프가 검정이 된다). */
/* 🔴 타일은 «볼록한 유리»다 (J.J 2026-08-22 · 시안9 ㉤ + 그 자리에서 한 번 더 고름).
   보내주신 그림에서 온 것 셋 — ① 테두리가 «왼쪽 위»에서 빛을 받는다 ② 안은 위가 밝고 아래로 어두워진다
   ③ 둘레에 아주 옅은 빛 번짐. 그리고 J.J 지시로 **오른쪽 아래 테두리는 «투명»**이다 —
   네 변이 다 보이면 「포레스트(꽉 닫힌 상자)」처럼 보인다. 빛이 도는 쪽만 남기니 유리처럼 읽힌다.
   ⛔ 이건 사전의 «색»이 아니라 «빛»이다(--gr-빛). 상태색 넷과 섞지 마라.
   ⚠️ 라이트에선 흰 빛이 «안 보인다» → 아래에서 따로 받는다(판보다 희게 + 바닥 그림자). */
.gr-cfg-ic { position: relative; overflow: hidden;
  flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  width: 38px; height: 38px; border-radius: 11px; color: var(--text);
  border: 1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--text) 6%, transparent),
      color-mix(in srgb, var(--text) 6%, transparent)) padding-box,
    linear-gradient(150deg,
      color-mix(in srgb, var(--gr-빛) 55%, transparent) 0%,
      color-mix(in srgb, var(--gr-빛) 16%, transparent) 30%,
      color-mix(in srgb, var(--gr-빛) 4%, transparent) 58%,
      transparent 86%) border-box;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .9),
              0 0 14px -6px color-mix(in srgb, var(--gr-빛) 16%, transparent); }
/* 위에 «비친 빛» 하나 — 볼록해 보이게 하는 것은 이 타원이다 */
.gr-cfg-ic::before { content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 12%; right: 12%; top: -42%; height: 74%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--gr-빛) 22%, transparent) 0%, transparent 70%); }
.gr-cfg-ic svg { position: relative; z-index: 2; }
.gr-cfg-card:hover .gr-cfg-ic {
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .95),
              0 0 18px -5px color-mix(in srgb, var(--gr-빛) 26%, transparent); }

/* ── 올렸을 때만 «판 테두리를 도는 빛» (J.J 2026-08-22 · 포털홈-깊이시안의 그 재료) ──────
   ⛔ 마크업은 0줄이다. 홈 카드는 `<i class="cwR">` 를 두고 그 안에서 돌리지만, 이 화면의
      index.html 은 «지금 다른 레인이 열어 두고» 있다 — 그 파일에 손대면 남의 미완성이 같이 실린다.
      그래서 여기선 등록 속성(@property)으로 «각도»를 애니메이션해 한 겹으로 돌린다.
   ⚠️ 등록 속성을 모르는 옛 브라우저에선 «안 돈다» — 빛띠가 멈춰 있을 뿐, 깨지지는 않는다.
   ⛔ 다크에서만 켠다 — 흰 빛은 흰 바탕에서 «안 보인다»(§2⑧). 라이트는 라임 테두리가 그 몫을 한다. */
@property --gr-각 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gr돌기 { to { --gr-각: 360deg; } }
:root[data-theme="dark"] .gr-cfg-card::after {
  /* ⚠️ 굵기는 «padding» 이 정한다 — 1px 은 두꺼웠다(J.J 2026-08-22). 0.6px 은 화면에선 머리카락이다 */
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; padding: .6px;
  pointer-events: none; opacity: 0; transition: opacity .22s;
  background: conic-gradient(from var(--gr-각),
    color-mix(in srgb, var(--gr-빛) 82%, transparent) 0deg,
    color-mix(in srgb, var(--gr-빛) 22%, transparent) 34deg,
    transparent 88deg, transparent 272deg,
    color-mix(in srgb, var(--gr-빛) 22%, transparent) 326deg,
    color-mix(in srgb, var(--gr-빛) 82%, transparent) 360deg);
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: content-box, border-box; mask-composite: exclude; }
:root[data-theme="dark"] .gr-cfg-card:hover::after {
  opacity: 1; animation: gr돌기 6s linear infinite; }
/* 🔴 다크에서 올렸을 때 테두리는 «흰 빛»이다 (J.J 2026-08-22: 「도는 빛이 라임 말고 흰색으로」).
   도는 빛 «밑»에 라임 테두리가 깔려 있어서, 도는 빛까지 라임으로 보였다. 그 밑선을 흰 빛으로 바꾼다.
   ⛔ 라임을 걷은 게 아니다 — 면(아주 옅은 워시)과 화살표는 그대로 라임이다. 갈린 것은 «선»뿐이다. */
:root[data-theme="dark"] .gr-cfg-card:hover {
  border-color: color-mix(in srgb, var(--gr-빛) 14%, transparent); }
/* 빛띠 «위»로 내용을 올린다 — 안 올리면 1px 테두리가 글자 위를 지난다 */
.gr-cfg-ic, .gr-cfg-card b { position: relative; z-index: 2; }
.gr-cfg-go { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .gr-cfg-card:hover::after { animation: none; }
}

/* 라이트 — 흰 빛은 안 보인다. 타일을 «판보다 희게» 하고 바닥으로 띄운다 */
:root[data-theme="light"] .gr-cfg-ic {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 5px 12px -8px rgba(0, 0, 0, .35); }
:root[data-theme="light"] .gr-cfg-ic::before { display: none; }
:root[data-theme="light"] .gr-cfg-card:hover .gr-cfg-ic {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 7px 16px -8px rgba(0, 0, 0, .42); }
.gr-cfg-card b { min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); }
.gr-cfg-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 19px; line-height: 1; color: var(--muted); transition: .18s; }
.gr-cfg-card:hover .gr-cfg-go { color: var(--now); transform: translateY(-50%) translateX(3px); }
@media (prefers-reduced-motion: reduce) { .gr-cfg-card:hover { transform: none } }

/* ── 깊은 화면(처음 셋팅 세 장)에 껍데기를 얹는 자리 — `shell-embed.js` 가 쓴다 ────
   ⛔ 남의 파일(`first-shell.css`)은 0줄이다. 그쪽 `.c-app` 은 `grid-template-columns: auto 1fr` 이고
      자식이 둘(.c-side · main.wrap)이다. 거기에 «줄»을 하나 얹어 맨 위 띠를 넣는다.
   ⚠️ 그쪽이 980px 아래에서 기둥을 감추고 한 칸으로 바꾼다 — 그 자리는 아래 media 가 따로 받는다. */
.c-app.gr-껍데기 { grid-template-rows: auto minmax(0, 1fr); }
.c-app.gr-껍데기 > .c-side { grid-column: 1; grid-row: 1 / -1; }
.c-app.gr-껍데기 > .gr-top { grid-column: 2; grid-row: 1; padding: 0 22px; }
.c-app.gr-껍데기 > main.wrap, .c-app.gr-껍데기 > .wrap { grid-column: 2; grid-row: 2; }
/* 여기선 스토어가 «읽는 것»이다 — 고를 판을 띄울 자가 없어서 테두리만 두고 손가락을 안 준다 */
/* 깊은 화면의 알약은 «읽는 것»이다 — 색은 같고 «누르는 신호»만 뺀다 */
.store-pill-읽기 { cursor: default; }
.store-pill-읽기:hover { border-color: var(--line-c, var(--border)); background: rgba(255,255,255,.03); }
.store-pill-읽기:hover svg { opacity: .88; }
@media (max-width: 980px) {
  .c-app.gr-껍데기 { grid-template-columns: 1fr; }
  .c-app.gr-껍데기 > .gr-top, .c-app.gr-껍데기 > main.wrap, .c-app.gr-껍데기 > .wrap { grid-column: 1; }
}

/* ── 자동적용(`/setup`) — 기둥을 붙여 주는 자가 없어서 얹기가 «직접» 떠 온다 ────
   ⚠️ 그쪽 짜임은 `body > .gs-top(자기 띠) + .gs-frame(iframe 8장)` 이다.
      `.gs-top` 은 «단계 고르기»라 지우지 않는다 — 내 띠 아래에 그대로 둔다.
   🔴 둘 다 `position: sticky; top: 0` 이라 겹친다 → 그쪽을 내 띠 높이(50px)만큼 내린다.
      ⛔ 그쪽 파일은 0줄이다. 여기서 «내 껍데기 안일 때만» 덮는다. */
.gr-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  align-items: start; min-height: 100vh; }
.gr-setup > .c-side { grid-column: 1; grid-row: 1 / -1;
  position: sticky; top: 0; align-self: start; height: 100vh;
  border-right: 1px solid var(--line-c, var(--border)); overflow: auto; }
/* ⚠️ 폭을 «여기서» 준다. 포털 기둥의 222px 는 `.app-shell` 격자가 들고 있어서 여기까진 안 온다 —
   안 주면 «글자 길이만큼»으로 오그라든다(실측 177px). 처음 셋팅 쪽은 `first-shell.css` 가 준다. */
/* 🔴 `box-sizing: border-box` 가 «있어야 한다» (J.J 2026-08-22: 「자동적용에만 이런 선이 있어」).
   `.side` 는 styles.css(남의 파일)에서 content-box 다. `height:100%`(=100vh)에 위아래 안여백
   13px 이 «더해져» 926px 이 되고, 900px 짜리 `.c-side`(overflow:auto) 안에서 26px 이 넘쳐
   **세로 스크롤 막대가 기둥 옆에 상시로 섰다**. 그 «선»의 정체가 이것이다.
   ⚠️ 처음 셋팅 세 장엔 이 자리가 없다 — 그쪽은 기둥에 height 를 안 준다. 그래서 여기만 그랬다. */
.gr-setup > .c-side > aside.side { box-sizing: border-box; width: 222px; height: 100%; }
/* ⚠️ `height:100%` 를 빼면 기둥이 «내용만큼»만 서고, 맨 아래 묶음(계정·도움말·로그아웃)이
   위로 딸려 올라온다 — `.side-mid{flex:1}` 이 밀 자리가 없어서다(실측: 로그아웃이 214px 에 있었다). */
.gr-setup > .gr-top { grid-column: 2; grid-row: 1; padding: 0 16px; }
.gr-setup > .gr-본문 { grid-column: 2; grid-row: 2; min-width: 0; }
.gr-setup.기둥없음 { grid-template-columns: minmax(0, 1fr); }
.gr-setup.기둥없음 > .gr-top, .gr-setup.기둥없음 > .gr-본문 { grid-column: 1; }
/* 내 띠는 50px 에 아래 선 1px = 51px 다. 50 으로 두면 스크롤할 때 1px 이 내 선 밑으로 파고든다 */
.gr-setup .gs-top { top: 51px; }
@media (max-width: 980px) {
  .gr-setup { grid-template-columns: 1fr; }
  .gr-setup > .gr-top, .gr-setup > .gr-본문 { grid-column: 1; }
  /* ⚠️ 내 띠가 52px 이 됐다 — 그쪽 단계 띠를 그 «아래»(52 + 선 1)로 정확히 내린다. 안 하면 겹친다 */
  .gr-setup .gs-top { top: 53px; }
}