/* accounts.bdrive.com v4 테마. 디자인 원본: bdweb-www netdrive_www/static/netdrive_www_v4/css/landing.css
   (라이트 값만 :root 에 둔다. 다크 값은 아래 주석 블록).
   로드 순서: v4/vendor/bootstrap-3.4.1 -> accounts/css/style.css 등 기존 부가 CSS -> Google Fonts
              -> accounts-v4.css -> auth.css
   pdf 컨텍스트에서는 이 파일을 로드하지 않는다(기존 Spacelab 세트 유지). */

/* ── 토큰 ─────────────────────────────────────────────── */
:root {
  --ac: #38bdf8; --ac2: #818cf8; --seal: #fbbf24; --seal2: #f97316;
  --bg: #f4f7fb;
  --t1: #0b1324; --t2: #24324a; --t3: #4a5a75; --t4: #5f6e88; --t5: #8592a8;
  --acInk: color-mix(in oklab, var(--ac) 58%, #0b1324);
  --sealInk: color-mix(in oklab, var(--seal) 55%, #2a1400);
  --g1: rgba(255, 255, 255, .65); --g2: rgba(255, 255, 255, .8);
  --b1: rgba(20, 45, 95, .08); --b2: rgba(20, 45, 95, .12); --b3: rgba(20, 45, 95, .2);
  --panel: #fff; --panel2: rgba(255, 255, 255, .85);
  --navBg: rgba(244, 247, 251, .82); --footBg: #e9eff6; --gridLine: rgba(30, 80, 160, .07);
  --shadow: rgba(20, 40, 80, .12);
  /* 번역(ko/ja/zh)이 들어오면 라틴 폰트에 없는 글리프를 시스템 CJK 폰트로 */
  --font-cjk: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Hiragino Sans', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-display: 'Space Grotesk', var(--font-cjk);
  --font-body: 'Plus Jakarta Sans', var(--font-cjk);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* accounts 의미 색 (Bootstrap success/danger/warning/info 대응) */
  --ok: #047857;   --okSoft: color-mix(in oklab, #10b981 14%, #fff);
  --bad: #be123c;  --badSoft: color-mix(in oklab, #f43f5e 12%, #fff);
  --warnInk: var(--sealInk); --warnSoft: color-mix(in oklab, var(--seal) 18%, #fff);
  --infoSoft: color-mix(in oklab, var(--ac) 14%, #fff);
  --grad: linear-gradient(135deg, var(--ac), var(--ac2));
}

/* color-mix() 를 모르는 브라우저(Chrome/Edge 110 이하)는 위 custom property 를 계산 시점에 통째로 무효 처리한다.
   (링크 색·포커스 고리 소실) 같은 이름에 미리 계산한 sRGB 값을 다시 준다. 값은 위 식을 브라우저로 계산한 것 */
@supports not (color: color-mix(in oklab, red, red)) {
  :root {
    --acInk: #286f97;
    --sealInk: #966b0e;
    --okSoft: #e5f6ed;
    --badSoft: #ffeaeb;
    --warnSoft: #fff4df;
    --infoSoft: #e7f6ff;
  }
}

/* 다크 값 (사용하지 않음, landing.css 5–17행 참고용)
:root {
  --bg: #0B0F19; --t1: #f2f7ff; --t2: #d3e0f5; --t3: #94a3c4; --t4: #7387ab; --t5: #4d5c7c;
  --acInk: var(--ac); --sealInk: var(--seal);
  --g1: rgba(255,255,255,0.02); --g2: rgba(255,255,255,0.032);
  --b1: rgba(148,183,255,0.1); --b2: rgba(148,183,255,0.16); --b3: rgba(148,183,255,0.26);
  --panel: rgba(17,23,38,0.72); --panel2: rgba(13,19,32,0.6);
  --navBg: rgba(11,15,25,0.72); --footBg: rgba(7,10,18,0.6); --gridLine: rgba(99,155,255,0.045);
  --shadow: rgba(2,6,18,0.6);
}
*/

/* ── 기본 ─────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--t2);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--t1);
}
a { color: var(--acInk); }
a:hover, a:focus { color: var(--t1); }
code, kbd, pre { font-family: var(--font-mono); }
::selection { background: rgba(56, 189, 248, .35); color: var(--t1); }

:focus-visible { outline: 2px solid var(--acInk); outline-offset: 2px; }

/* ── Bootstrap 컴포넌트 ───────────────────────────────── */
/* spec §6.6. 마크업은 그대로 두고 Bootstrap 3.4.1 셀렉터와 같은(또는 한 단계 높은) 특이도로 덮어쓴다.
   - JS 상태 클래스(.collapse .collapsing .fade .in .modal .tab-pane .modal-backdrop)에는
     display·height·opacity·transition·visibility 를 쓰지 않는다. .dropdown-menu 에는 display 를 쓰지 않는다.
     (accounts/tests_v4_theme.py BootstrapStateCssTest 가 검사)
   - .navbar 모양은 셸 절(.acc-*)에서 다룬다.
   - :is() 는 안쪽 인자 중 가장 높은 특이도를 갖는다 — Bootstrap 의 상태 셀렉터 목록과 특이도를 맞추려고 쓴다. */

/* 포커스: Bootstrap 의 a:focus·.btn:focus 고리(5px auto)는 마우스 클릭에도 남는다 → 끄고 키보드 포커스만 v4 고리 */
a:focus,
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus,
input[type="file"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 0; }
a:focus-visible,
.btn:focus-visible, .btn:active:focus-visible, .btn.active:focus-visible,
input[type="file"]:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--acInk);
  outline-offset: 2px;
}

/* 글자: 제목 속 small, .page-header (제목 글꼴은 기본 절의 h1–h6) */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: var(--t4); }
.page-header {
  border-bottom-color: var(--b1);
  font-family: var(--font-display);
  color: var(--t1);
}
.page-header h1, .page-header h2, .page-header h3, .page-header h4 { font-weight: 600; letter-spacing: -.01em; }

/* 버튼: 패딩·글자 크기는 Bootstrap 그대로(lg/sm/xs 비율 유지), radius 만 v4 */
.btn {
  border-radius: 10px;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-lg, .btn-group-lg > .btn { border-radius: 12px; }
.btn-sm, .btn-group-sm > .btn { border-radius: 8px; }
.btn-xs, .btn-group-xs > .btn { border-radius: 6px; }

/* .btn-primary — v4 .btn--primary: --grad, 글자 #071018, hover 시 accent 글로우 */
.btn-primary {
  color: #071018;
  background-color: var(--ac);
  background-image: var(--grad);
  border-color: transparent;
}
.btn-primary:is(:focus, .focus) { color: #071018; background-color: var(--ac); border-color: transparent; }
.btn-primary:hover {
  color: #071018;
  background-color: var(--ac);
  border-color: transparent;
  box-shadow: 0 0 22px color-mix(in oklab, var(--ac) 55%, transparent);
}
.btn-primary:is(:active, .active),
.btn-primary:is(:active, .active):is(:hover, :focus, .focus),
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:is(:hover, :focus, .focus) {
  color: #071018;
  background-color: var(--ac);
  background-image: linear-gradient(rgba(7, 16, 24, .12), rgba(7, 16, 24, .12)), var(--grad);
  border-color: transparent;
  box-shadow: inset 0 2px 5px rgba(7, 16, 24, .2);
}
.btn-primary:is(.disabled, [disabled]),
.btn-primary:is(.disabled, [disabled]):is(:hover, :focus, .focus),
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:is(:hover, :focus, .focus) {
  background-color: var(--ac);
  background-image: var(--grad);
  border-color: transparent;
  box-shadow: none;
}

/* .btn-default — v4 .btn--ghost: 흰 바탕, --b3 테두리, --t1 글자 */
.btn-default { color: var(--t1); background-color: var(--panel); border-color: var(--b3); }
.btn-default:is(:focus, .focus) { color: var(--t1); background-color: var(--panel); border-color: var(--b3); }
.btn-default:hover {
  color: var(--t1);
  background-color: color-mix(in oklab, var(--ac) 7%, #fff);
  border-color: var(--acInk);
}
.btn-default:is(:active, .active),
.btn-default:is(:active, .active):is(:hover, :focus, .focus),
.open > .dropdown-toggle.btn-default,
.open > .dropdown-toggle.btn-default:is(:hover, :focus, .focus) {
  color: var(--t1);
  background-color: var(--infoSoft);
  border-color: var(--acInk);
  box-shadow: inset 0 2px 4px var(--b2);
}
.btn-default:is(.disabled, [disabled]),
.btn-default:is(.disabled, [disabled]):is(:hover, :focus, .focus),
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default:is(:hover, :focus, .focus) { background-color: var(--panel); border-color: var(--b3); }

/* .btn-success / .btn-danger — 단색 --ok / --bad, 흰 글자 */
.btn-success { color: #fff; background-color: var(--ok); border-color: var(--ok); }
.btn-success:is(:focus, .focus) { color: #fff; background-color: var(--ok); border-color: var(--ok); }
.btn-success:hover {
  color: #fff;
  background-color: color-mix(in oklab, var(--ok) 86%, #000);
  border-color: color-mix(in oklab, var(--ok) 86%, #000);
}
.btn-success:is(:active, .active),
.btn-success:is(:active, .active):is(:hover, :focus, .focus),
.open > .dropdown-toggle.btn-success,
.open > .dropdown-toggle.btn-success:is(:hover, :focus, .focus) {
  color: #fff;
  background-color: color-mix(in oklab, var(--ok) 74%, #000);
  border-color: color-mix(in oklab, var(--ok) 74%, #000);
}
.btn-success:is(.disabled, [disabled]),
.btn-success:is(.disabled, [disabled]):is(:hover, :focus, .focus),
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success:is(:hover, :focus, .focus) { background-color: var(--ok); border-color: var(--ok); }

.btn-danger { color: #fff; background-color: var(--bad); border-color: var(--bad); }
.btn-danger:is(:focus, .focus) { color: #fff; background-color: var(--bad); border-color: var(--bad); }
.btn-danger:hover {
  color: #fff;
  background-color: color-mix(in oklab, var(--bad) 86%, #000);
  border-color: color-mix(in oklab, var(--bad) 86%, #000);
}
.btn-danger:is(:active, .active),
.btn-danger:is(:active, .active):is(:hover, :focus, .focus),
.open > .dropdown-toggle.btn-danger,
.open > .dropdown-toggle.btn-danger:is(:hover, :focus, .focus) {
  color: #fff;
  background-color: color-mix(in oklab, var(--bad) 74%, #000);
  border-color: color-mix(in oklab, var(--bad) 74%, #000);
}
.btn-danger:is(.disabled, [disabled]),
.btn-danger:is(.disabled, [disabled]):is(:hover, :focus, .focus),
fieldset[disabled] .btn-danger,
fieldset[disabled] .btn-danger:is(:hover, :focus, .focus) { background-color: var(--bad); border-color: var(--bad); }

/* .btn-warning — seal 그라디언트(--seal → --seal2), 글자 #2a1400 */
.btn-warning {
  color: #2a1400;
  background-color: var(--seal);
  background-image: linear-gradient(135deg, var(--seal), var(--seal2));
  border-color: transparent;
}
.btn-warning:is(:focus, .focus) { color: #2a1400; background-color: var(--seal); border-color: transparent; }
.btn-warning:hover {
  color: #2a1400;
  background-color: var(--seal);
  border-color: transparent;
  box-shadow: 0 0 22px color-mix(in oklab, var(--seal2) 45%, transparent);
}
.btn-warning:is(:active, .active),
.btn-warning:is(:active, .active):is(:hover, :focus, .focus),
.open > .dropdown-toggle.btn-warning,
.open > .dropdown-toggle.btn-warning:is(:hover, :focus, .focus) {
  color: #2a1400;
  background-color: var(--seal);
  background-image: linear-gradient(rgba(42, 20, 0, .12), rgba(42, 20, 0, .12)), linear-gradient(135deg, var(--seal), var(--seal2));
  border-color: transparent;
  box-shadow: inset 0 2px 5px rgba(42, 20, 0, .2);
}
.btn-warning:is(.disabled, [disabled]),
.btn-warning:is(.disabled, [disabled]):is(:hover, :focus, .focus),
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:is(:hover, :focus, .focus) {
  background-color: var(--seal);
  background-image: linear-gradient(135deg, var(--seal), var(--seal2));
  border-color: transparent;
  box-shadow: none;
}

/* .btn-info — --infoSoft 바탕, --acInk 글자 */
.btn-info {
  color: var(--acInk);
  background-color: var(--infoSoft);
  border-color: color-mix(in oklab, var(--ac) 35%, transparent);
}
.btn-info:is(:focus, .focus) {
  color: var(--acInk);
  background-color: var(--infoSoft);
  border-color: color-mix(in oklab, var(--ac) 35%, transparent);
}
.btn-info:hover {
  color: var(--acInk);
  background-color: color-mix(in oklab, var(--ac) 24%, #fff);
  border-color: color-mix(in oklab, var(--ac) 60%, transparent);
}
.btn-info:is(:active, .active),
.btn-info:is(:active, .active):is(:hover, :focus, .focus),
.open > .dropdown-toggle.btn-info,
.open > .dropdown-toggle.btn-info:is(:hover, :focus, .focus) {
  color: var(--acInk);
  background-color: color-mix(in oklab, var(--ac) 32%, #fff);
  border-color: color-mix(in oklab, var(--ac) 60%, transparent);
  box-shadow: inset 0 2px 4px var(--b2);
}
.btn-info:is(.disabled, [disabled]),
.btn-info:is(.disabled, [disabled]):is(:hover, :focus, .focus),
fieldset[disabled] .btn-info,
fieldset[disabled] .btn-info:is(:hover, :focus, .focus) {
  background-color: var(--infoSoft);
  border-color: color-mix(in oklab, var(--ac) 35%, transparent);
}

/* .btn-link — --acInk */
.btn-link { color: var(--acInk); }
.btn-link:is(:hover, :focus) { color: var(--t1); }
.btn-link[disabled]:is(:hover, :focus),
fieldset[disabled] .btn-link:is(:hover, :focus) { color: var(--t5); }

/* .label .badge — 999px pill, 12px 600, 의미별 *Soft 바탕 + 진한 글자 */
.label {
  padding: .3em .75em;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.label-default { color: var(--t2); background-color: color-mix(in oklab, var(--t4) 14%, #fff); }
.label-primary, .label-info { color: var(--acInk); background-color: var(--infoSoft); }
.label-success { color: var(--ok); background-color: var(--okSoft); }
.label-warning { color: var(--warnInk); background-color: var(--warnSoft); }
.label-danger { color: var(--bad); background-color: var(--badSoft); }
/* 링크 label hover: Bootstrap 의 a.label:hover(흰 글자)·.label-*[href]:hover(옛 색) 대신 같은 v4 색을 조금 진하게 */
a.label-default:is(:hover, :focus), .label-default[href]:is(:hover, :focus) {
  color: var(--t1);
  background-color: color-mix(in oklab, var(--t4) 22%, #fff);
}
a.label-primary:is(:hover, :focus), .label-primary[href]:is(:hover, :focus),
a.label-info:is(:hover, :focus), .label-info[href]:is(:hover, :focus) {
  color: var(--acInk);
  background-color: color-mix(in oklab, var(--infoSoft) 88%, var(--ac));
}
a.label-success:is(:hover, :focus), .label-success[href]:is(:hover, :focus) {
  color: var(--ok);
  background-color: color-mix(in oklab, var(--okSoft) 92%, var(--ok));
}
a.label-warning:is(:hover, :focus), .label-warning[href]:is(:hover, :focus) {
  color: var(--warnInk);
  background-color: color-mix(in oklab, var(--warnSoft) 88%, var(--seal));
}
a.label-danger:is(:hover, :focus), .label-danger[href]:is(:hover, :focus) {
  color: var(--bad);
  background-color: color-mix(in oklab, var(--badSoft) 92%, var(--bad));
}
.badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--acInk);
  background-color: var(--infoSoft);
}
.list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: var(--acInk); background-color: #fff; }

/* .bg-* 는 *Soft 틴트, .text-* 는 의미 색 (Bootstrap 3 의 이 헬퍼들은 important 표시가 없어 같은 특이도로 덮인다) */
.bg-primary { color: var(--t1); background-color: var(--infoSoft); }
.bg-success { background-color: var(--okSoft); }
.bg-info { background-color: var(--infoSoft); }
.bg-warning { background-color: var(--warnSoft); }
.bg-danger { background-color: var(--badSoft); }
.text-primary, .text-info { color: var(--acInk); }
.text-success { color: var(--ok); }
.text-warning { color: var(--warnInk); }
.text-danger { color: var(--bad); }
.text-muted { color: var(--t4); }
/* 링크로 쓴 헬퍼의 hover: Bootstrap 의 a.text-*:hover·a.bg-*:hover(옛 색) 대신 같은 v4 색을 조금 진하게 */
a.bg-primary:is(:hover, :focus), a.bg-info:is(:hover, :focus) { background-color: color-mix(in oklab, var(--infoSoft) 88%, var(--ac)); }
a.bg-success:is(:hover, :focus) { background-color: color-mix(in oklab, var(--okSoft) 92%, var(--ok)); }
a.bg-warning:is(:hover, :focus) { background-color: color-mix(in oklab, var(--warnSoft) 88%, var(--seal)); }
a.bg-danger:is(:hover, :focus) { background-color: color-mix(in oklab, var(--badSoft) 92%, var(--bad)); }
a.text-primary:is(:hover, :focus), a.text-info:is(:hover, :focus) { color: color-mix(in oklab, var(--acInk) 78%, #000); }
a.text-success:is(:hover, :focus) { color: color-mix(in oklab, var(--ok) 78%, #000); }
a.text-warning:is(:hover, :focus) { color: color-mix(in oklab, var(--warnInk) 78%, #000); }
a.text-danger:is(:hover, :focus) { color: color-mix(in oklab, var(--bad) 78%, #000); }

/* .panel — 흰 바탕, --b1 테두리, 16px radius, 옅은 그림자. 의미 색은 위쪽 3px 선으로만 */
.panel {
  background-color: var(--panel);
  border: 1px solid var(--b1);
  border-radius: 16px;
  box-shadow: 0 1px 2px var(--b1), 0 10px 28px -20px var(--shadow);
}
.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger { border-color: var(--b1); }
.panel-primary { border-top: 3px solid var(--ac); }
.panel-success { border-top: 3px solid var(--ok); }
.panel-info { border-top: 3px solid var(--acInk); }
.panel-warning { border-top: 3px solid var(--seal2); }
.panel-danger { border-top: 3px solid var(--bad); }
.panel-group .panel { border-radius: 16px; }
.panel-heading { padding: 12px 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.panel-group .panel-heading { border-radius: 15px; }  /* 접힌 아코디언에서 heading 모서리가 panel 곡선 밖으로 나오지 않게 */
/* heading·footer 띠: spec 의 --g2(흰색 80%)는 흰 panel 위에서 보이지 않아 --bg 60% 로 (controller Ruling 7) */
.panel > .panel-heading {
  color: var(--t1);
  background-color: color-mix(in oklab, var(--bg) 60%, #fff);
  border-color: var(--b1);
}
.panel > .panel-heading + .panel-collapse > .panel-body { border-top-color: var(--b1); }
.panel-title { font-family: var(--font-display); font-weight: 600; color: var(--t1); }
.panel-footer {
  background-color: color-mix(in oklab, var(--bg) 60%, #fff);
  border-top-color: var(--b1);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* .table — 헤더 12px 600 대문자 --t3, 행 구분선 --b1.
   관리자 표 대부분이 thead 없이 첫 tr 에 th 를 두므로(tbody 안 th) th 전체를 헤더 모양으로.
   style.css 가 지운 행 구분선(border-top: 0)을 --b1 으로 되살린다.
   표 바탕은 흰색(--panel). spec 의 hover --g2·줄무늬 --bg 는 --bg 페이지와 흰 panel 양쪽에서 보이지 않아
   hover 는 --bg, 줄무늬는 --bg 60% 로 둔다(controller Ruling 5). 의미 색은 칸(td/th)에 칠하므로
   행(tr)에 칠하는 줄무늬·hover 위에 보인다. */
.table { background-color: var(--panel); }
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t3);
}
.table > thead > tr > th, .table > thead > tr > td,
.table > tbody > tr > th, .table > tbody > tr > td,
.table > tfoot > tr > th, .table > tfoot > tr > td { border-top: 1px solid var(--b1); }
.table > thead > tr > th { border-bottom: 1px solid var(--b2); }
.table > tbody + tbody { border-top: 1px solid var(--b2); }
.table:not(.table-bordered) > tbody:first-child > tr:first-child > th,
.table:not(.table-bordered) > tbody:first-child > tr:first-child > td { border-top: 0; }
.table-bordered { border-color: var(--b2); }
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td { border-color: var(--b2); }
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 1px; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: color-mix(in oklab, var(--bg) 60%, #fff); }
.table-hover > tbody > tr:hover { background-color: var(--bg); }
/* 행·칸 의미 색(tr.active·tr.info·tr.warning 이 쓰인다) */
.table > :is(thead, tbody, tfoot) > tr.active > :is(td, th),
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).active { background-color: var(--bg); }
.table > :is(thead, tbody, tfoot) > tr.success > :is(td, th),
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).success { background-color: var(--okSoft); }
.table > :is(thead, tbody, tfoot) > tr.info > :is(td, th),
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).info { background-color: var(--infoSoft); }
.table > :is(thead, tbody, tfoot) > tr.warning > :is(td, th),
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).warning { background-color: var(--warnSoft); }
.table > :is(thead, tbody, tfoot) > tr.danger > :is(td, th),
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).danger { background-color: var(--badSoft); }
/* .table-hover 의 의미 색 행·칸 hover: Bootstrap 의 옛 색(#e8e8e8·#d0e9c6 등) 대신 같은 *Soft 를 조금 진하게 */
.table-hover > tbody > tr.active:hover > :is(td, th),
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr > :is(td, th).active:hover { background-color: color-mix(in oklab, var(--bg), #0b1324 4%); }
.table-hover > tbody > tr.success:hover > :is(td, th),
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr > :is(td, th).success:hover { background-color: color-mix(in oklab, var(--okSoft) 92%, var(--ok)); }
.table-hover > tbody > tr.info:hover > :is(td, th),
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr > :is(td, th).info:hover { background-color: color-mix(in oklab, var(--infoSoft) 88%, var(--ac)); }
.table-hover > tbody > tr.warning:hover > :is(td, th),
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr > :is(td, th).warning:hover { background-color: color-mix(in oklab, var(--warnSoft) 88%, var(--seal)); }
.table-hover > tbody > tr.danger:hover > :is(td, th),
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr > :is(td, th).danger:hover { background-color: color-mix(in oklab, var(--badSoft) 92%, var(--bad)); }

/* 폼 — .form-control 높이 44px, 10px radius, --b2 테두리, 흰 바탕. focus 는 --ac 테두리 + 3px 고리 */
.form-control {
  height: 44px;
  color: var(--t1);
  background-color: var(--panel);
  border: 1px solid var(--b2);
  border-radius: 10px;
  box-shadow: none;
}
.form-control::placeholder { color: var(--t5); }
.form-control:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac) 25%, transparent);
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--bg); }
/* 위 .form-control 높이·radius 가 같은 특이도의 Bootstrap .input-sm/.input-lg 를 이기므로 되돌린다 */
.input-sm { height: 30px; border-radius: 8px; }
.input-lg { height: 46px; border-radius: 12px; }
.has-error .form-control { border-color: var(--bad); box-shadow: none; }
.has-error .form-control:focus {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad) 22%, transparent);
}
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox,
.has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label,
.has-error.radio-inline label, .has-error.checkbox-inline label, .has-error .form-control-feedback { color: var(--bad); }
.has-error .input-group-addon { color: var(--bad); background-color: var(--badSoft); border-color: var(--bad); }
.has-success .form-control { border-color: var(--ok); box-shadow: none; }
.has-success .form-control:focus {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 22%, transparent);
}
.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox,
.has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label,
.has-success.radio-inline label, .has-success.checkbox-inline label, .has-success .form-control-feedback { color: var(--ok); }
.has-success .input-group-addon { color: var(--ok); background-color: var(--okSoft); border-color: var(--ok); }
.input-group-addon {
  color: var(--t3);
  background-color: var(--g2);
  border-color: var(--b2);
  border-radius: 10px;
}
/* input-group 안 버튼을 44px 입력칸 높이에 맞춘다: 11 + 20(line-height) + 11 + 2(border) */
.input-group-btn > .btn { padding-top: 11px; padding-bottom: 11px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ac); }

/* .nav-tabs — 테두리 없는 탭, 활성은 2px --ac 밑줄 + --t1 */
.nav-tabs { border-bottom-color: var(--b1); }
.nav-tabs > li > a {
  margin-right: 4px;
  color: var(--t3);
  font-weight: 600;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.nav-tabs > li > a:is(:hover, :focus) { color: var(--t1); background-color: transparent; border-bottom-color: var(--b3); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:is(:hover, :focus) {
  color: var(--t1);
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--ac);
}

/* .nav-pills — v4 plan-switch 같은 segmented: 바깥 --b2 테두리 999px, 활성 --grad.
   style.css 가 li 를 inline-block + 가운데 정렬로 두므로 ul 을 내용 폭으로 줄여 가운데 둔다. */
.nav-pills:not(.nav-stacked) {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  background-color: var(--g2);
  border: 1px solid var(--b2);
  border-radius: 999px;
}
.nav-pills > li > a { padding: 7px 18px; color: var(--t3); font-weight: 600; border-radius: 999px; }
.nav-pills > li > a:is(:hover, :focus) { color: var(--t1); background-color: var(--b1); }
.nav-pills > li.active > a,
.nav-pills > li.active > a:is(:hover, :focus) {
  color: #071018;
  background-color: var(--ac);
  background-image: var(--grad);
}

/* .dropdown-menu — 흰 panel, --b2 테두리, 12px radius, 그림자.
   항목 hover 는 --bg: spec 의 --g2(흰색 80%)는 흰 panel 위에서 보이지 않는다. */
.dropdown-menu {
  padding: 6px;
  background-color: var(--panel);
  border: 1px solid var(--b2);
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px var(--shadow), 0 2px 6px var(--b1);
}
.dropdown-menu > li > a { padding: 7px 12px; color: var(--t2); border-radius: 8px; }
.dropdown-menu > li > a:is(:hover, :focus) { color: var(--t1); background-color: var(--bg); }
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:is(:hover, :focus) { color: var(--acInk); background-color: var(--infoSoft); }
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:is(:hover, :focus) { color: var(--t5); background-color: transparent; }
.dropdown-menu .divider { margin: 6px 0; background-color: var(--b1); }
.dropdown-header { padding: 6px 12px; color: var(--t4); font-size: 12px; }

/* .list-group — 바깥 14px radius, 항목 구분선 --b1, active --infoSoft.
   .list-group-item 에는 글자색을 주지 않는다: `list-group-item lead text-danger` 처럼 .text-* 를 같이 쓴다. */
.list-group-item { background-color: var(--panel); border-color: var(--b1); }
.list-group-item:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.list-group-item:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.list-group-item-heading { color: var(--t1); }
a.list-group-item, button.list-group-item { color: var(--t2); }
a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading { color: var(--t1); }
a.list-group-item:is(:hover, :focus), button.list-group-item:is(:hover, :focus) { color: var(--t1); background-color: var(--bg); }
.list-group-item.active,
.list-group-item.active:is(:hover, :focus) {
  color: var(--t1);
  background-color: var(--infoSoft);
  border-color: color-mix(in oklab, var(--ac) 35%, transparent);
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:is(:hover, :focus) .list-group-item-text,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:is(:hover, :focus) .list-group-item-heading > small { color: var(--t3); }
.list-group-item.disabled,
.list-group-item.disabled:is(:hover, :focus) { color: var(--t5); background-color: var(--bg); }
.list-group-item-success { color: var(--ok); background-color: var(--okSoft); }
.list-group-item-info { color: var(--acInk); background-color: var(--infoSoft); }
.list-group-item-warning { color: var(--warnInk); background-color: var(--warnSoft); }
.list-group-item-danger { color: var(--bad); background-color: var(--badSoft); }

/* .well — --g2 바탕, --b1 테두리, 12px radius */
.well { background-color: var(--g2); border: 1px solid var(--b1); border-radius: 12px; box-shadow: none; }

/* .pagination — 8px radius 로 떨어진 칸, 활성 --grad */
.pagination > li > a, .pagination > li > span {
  margin-left: 4px;
  color: var(--t2);
  background-color: var(--panel);
  border-color: var(--b2);
  border-radius: 8px;
}
.pagination > li:first-child > a, .pagination > li:first-child > span,
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 8px; }
.pagination > li > a:is(:hover, :focus), .pagination > li > span:is(:hover, :focus) {
  color: var(--t1);
  background-color: var(--bg);
  border-color: var(--b3);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:is(:hover, :focus), .pagination > .active > span:is(:hover, :focus) {
  color: #071018;
  background-color: var(--ac);
  background-image: var(--grad);
  border-color: transparent;
}
.pagination > .disabled > a, .pagination > .disabled > span,
.pagination > .disabled > a:is(:hover, :focus), .pagination > .disabled > span:is(:hover, :focus) {
  color: var(--t5);
  background-color: var(--panel);
  border-color: var(--b1);
}

/* .progress — 트랙 --b1, 막대 --grad (#pleaseWaitDialog 의 줄무늬 막대 포함).
   줄무늬는 --grad 위에 겹친다. Bootstrap 애니메이션은 background-position 하나를 모든 층에 주므로
   --grad 층까지 밀려 이음매가 생긴다 → 줄무늬 층만 움직이는 keyframes 로 바꾼다. */
.progress { background-color: var(--b1); border-radius: 999px; box-shadow: none; }
.progress-bar {
  color: #071018;
  font-weight: 600;
  background-color: var(--ac);
  background-image: var(--grad);
  box-shadow: none;
}
.progress-striped .progress-bar, .progress-bar-striped {
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%,
                    rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent),
    var(--grad);
  background-size: 40px 40px, 100% 100%;
}
.progress.active .progress-bar, .progress-bar.active { animation-name: acc-progress-stripes; }
@keyframes acc-progress-stripes {
  from { background-position: 40px 0, 0 0; }
  to { background-position: 0 0, 0 0; }
}
.progress-bar-success { color: #fff; background-color: var(--ok); background-image: none; }
.progress-bar-info { color: #fff; background-color: var(--acInk); background-image: none; }
.progress-bar-warning { color: #2a1400; background-color: var(--seal2); background-image: none; }
.progress-bar-danger { color: #fff; background-color: var(--bad); background-image: none; }
.progress-striped :is(.progress-bar-success, .progress-bar-info, .progress-bar-warning, .progress-bar-danger),
.progress-bar-striped:is(.progress-bar-success, .progress-bar-info, .progress-bar-warning, .progress-bar-danger) {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%,
                                    rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

/* .popover — 흰 panel 12px radius (bootstrap-confirmation 도 이 모양) / .tooltip — --t1 바탕 흰 글자 */
.popover {
  font-family: var(--font-body);
  color: var(--t2);
  background-color: var(--panel);
  border: 1px solid var(--b2);
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px var(--shadow), 0 2px 6px var(--b1);
}
.popover-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--t1);
  background-color: var(--g2);
  border-bottom-color: var(--b1);
  border-radius: 11px 11px 0 0;
}
.popover.top > .arrow { border-top-color: var(--b3); }
.popover.right > .arrow { border-right-color: var(--b3); }
.popover.bottom > .arrow { border-bottom-color: var(--b3); }
.popover.left > .arrow { border-left-color: var(--b3); }
.tooltip { font-family: var(--font-body); }
.tooltip-inner { padding: 5px 10px; color: #fff; background-color: var(--t1); border-radius: 8px; }
.tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow { border-top-color: var(--t1); }
.tooltip.right .tooltip-arrow { border-right-color: var(--t1); }
.tooltip.left .tooltip-arrow { border-left-color: var(--t1); }
.tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--t1); }

/* .alert — v4 info-notice (spec §6.4): 흰 바탕, --b2 테두리, 왼쪽 3px 막대, 10px radius.
   막대 색: success --ok, info --acInk, warning --seal2, danger --bad. 닫기(.close)는 Bootstrap 그대로. */
.alert {
  padding: 12px 16px;
  color: var(--t2);
  background-color: var(--panel);
  border: 1px solid var(--b2);
  border-left: 3px solid var(--acInk);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.alert-success { border-left-color: var(--ok); }
.alert-info { border-left-color: var(--acInk); }
.alert-warning { border-left-color: var(--seal2); }
.alert-danger { border-left-color: var(--bad); }
.alert-dismissable, .alert-dismissible { padding-right: 36px; }  /* 위 padding 이 Bootstrap 값을 덮으므로 닫기 자리 되살림 */
.alert h4 { color: var(--t1); }
.alert .alert-link { color: var(--acInk); }
.alert hr { border-top-color: var(--b1); }

/* .modal-content (#pleaseWaitDialog 포함, spec §6.4) — 흰 panel, --b2 테두리, 16px radius, 큰 그림자 */
.modal-content {
  background-color: var(--panel);
  border: 1px solid var(--b2);
  border-radius: 16px;
  box-shadow: 0 24px 70px var(--shadow);
}
.modal-header { padding: 16px 20px; border-bottom-color: var(--b1); }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top-color: var(--b1); }
.modal-title, .modal-header h4 { font-family: var(--font-display); font-weight: 600; color: var(--t1); }

/* ── 셸 ───────────────────────────────────────────────── */
/* spec §6.3–6.5: 헤더(.acc-nav)·본문(#my-page-wrapper)·푸터(.acc-footer). 디자인 원본 landing.css 의 nav·footer.
   - 헤더는 Bootstrap navbar 클래스(navbar-fixed-top 등)를 그대로 두고 flex 로 한 줄에 놓는다.
     z-index 는 선언하지 않는다 — Bootstrap 값(navbar-static-top 과 함께 쓰여 1000, 상한 1030)이
     backdrop(1040)·modal(1050) 아래에 머문다.
   - staff 메뉴·검색 폼·대리 로그인 li 에는 새 클래스를 붙이지 않는다(마크업 그대로) → .acc-nav 아래 구조 셀렉터로 칠한다.
   - 옛 인라인 style(nav margin-bottom, ul text-align, 검색 폼 margin-top, 오른쪽 ul margin-right)은
     이 절로 옮겼다. 세로 가운데는 margin-top 대신 flex 정렬이 맡는다. */

/* style.css 의 html { background: #fff } 가 짧은 화면 아래에 흰 띠를 남긴다 → 같은 특이도, 뒤 순서로 덮는다.
   bgcolor 를 지정한 화면은 html 을 비워 body 의 지정 색이 화면 전체로 번지게 한다(CSS 배경 전파). */
html { background: var(--bg); }
html:has(> body.acc-bgcolor) { background: none; }

/* 헤더 — 64px(min-height: 넘치면 늘어난다), --navBg + blur, 아래 --b1 선.
   항목 높이는 36px(검색칸·사용자 토글) 이하라 위아래 12px 를 더해도 min-height 안에 든다 */
.acc-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  margin-bottom: 0;
  padding: 12px 32px;
  background-color: var(--navBg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--b1);
}
/* Bootstrap clearfix 가상 요소가 flex 항목이 되어 gap 을 차지하지 않게 */
.acc-nav::before, .acc-nav::after,
.acc-nav .nav::before, .acc-nav .nav::after { content: none; }
.acc-nav .navbar-header { flex: none; }

/* 브랜드 — Bdrive <span>Accounts</span>, Space Grotesk 600 */
.acc-nav .acc-brand {
  float: none;
  display: block;
  height: auto;
  padding: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--t1);
}
.acc-nav .acc-brand:is(:hover, :focus) { color: var(--t1); }
.acc-brand span { color: var(--acInk); }

/* 왼쪽 ul — staff 메뉴·대리 로그인. 작은 pill 링크 */
.acc-nav .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-align: center;
}
.acc-nav .navbar-nav > li > a {
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  color: var(--t3);
  border-radius: 999px;
}
.acc-nav .navbar-nav > li > a:is(:hover, :focus) { color: var(--t1); background-color: var(--b1); }
/* 대리 로그인: Stop 은 --bad 틴트, 배경ON/OFF 는 --infoSoft */
.acc-nav .navbar-nav > li > a.bg-danger { color: var(--bad); background-color: var(--badSoft); }
.acc-nav .navbar-nav > li > a.bg-danger:is(:hover, :focus) { color: var(--bad); background-color: color-mix(in oklab, var(--badSoft) 88%, var(--bad)); }
.acc-nav .navbar-nav > li > a.bg-info { color: var(--acInk); background-color: var(--infoSoft); }
.acc-nav .navbar-nav > li > a.bg-info:is(:hover, :focus) { color: var(--acInk); background-color: color-mix(in oklab, var(--infoSoft) 88%, var(--ac)); }

/* 사용자 검색 폼 — 64px 헤더에 맞춰 입력칸·Go 를 36px 로 (컴포넌트 절의 .form-control 44px 를 헤더에서만 줄인다) */
.acc-nav .navbar-nav .form-inline { margin: 0 6px; }
.acc-nav .navbar-nav .form-control {
  width: 200px;
  height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}
.acc-nav .navbar-nav .input-group-btn > .btn {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

/* 오른쪽 ul — 사용자 드롭다운 */
.acc-nav .navbar-top-links { flex: none; margin: 0 0 0 auto; }
.acc-nav .navbar-top-links .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--t2);
  border-radius: 999px;
}
.acc-nav .navbar-top-links .dropdown-toggle:is(:hover, :focus),
.acc-nav .navbar-top-links .open > .dropdown-toggle,
.acc-nav .navbar-top-links .open > .dropdown-toggle:is(:hover, :focus) { color: var(--t1); background-color: var(--b1); }
.acc-nav .navbar-top-links .fa-caret-down { color: var(--t4); }
/* 메뉴는 오른쪽 끝에 맞춰 연다(Bootstrap 은 768px 이상에서만 그렇게 한다). 위 모서리도 둥글게 */
.acc-nav .dropdown-user { right: 0; left: auto; }
.acc-nav .dropdown > .dropdown-menu { margin-top: 8px; border-radius: 12px; }

/* 이니셜 아바타 — 28px 원, --grad */
.acc-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad);
  color: #071018;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
/* 긴 이름·이메일은 말줄임 — 좁은 화면에서 헤더가 두 줄이 되어 본문을 가리지 않게 (Review Focus 4) */
.acc-user__name {
  display: inline-block;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* 본문 — 배경은 투명(--bg 가 비친다). 위 여백은 64px 헤더 + 24px (style.css 의 padding 65px 15px 를 덮는다) */
#my-page-wrapper { padding: 88px 32px 32px; background-color: transparent; }

/* 푸터 — --footBg, 위 --b1 선, 13px --t3. 왼쪽 저작권, 오른쪽 NetDrive·CloudSync 두 줄.
   #my-page-wrapper 의 직계 자식일 때만 그 좌우·아래 padding 을 음수 margin 으로 되돌려 화면 폭 띠로 깐다.
   본문 div 짝이 안 맞는 화면(privacy.html 은 </div> 가 하나 많다)에서는 푸터가 wrapper 밖으로 나가는데,
   그때 음수 margin 이 붙으면 가로 스크롤이 생긴다 → 기본은 margin 0 (wrapper 밖이면 원래 화면 폭이다) */
.acc-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 48px;
  padding: 24px 32px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--t3);
  background-color: var(--footBg);
  border-top: 1px solid var(--b1);
}
#my-page-wrapper > .acc-footer { margin: 48px -32px -32px; }
.acc-footer p { margin: 0; }
.acc-footer a { color: var(--t3); font-weight: 600; }
.acc-footer a:is(:hover, :focus) { color: var(--t1); }
.acc-footer__links { text-align: right; }
.acc-footer__product { color: var(--t1); font-weight: 600; }

/* staff 메뉴(사용자·검색 폼·팀·FS·FS 구독·BS·BS 구독·PP·구독·ND2)는 아이콘까지 한 줄에 약 1,300px 이 든다.
   그보다 좁으면 메뉴 아이콘을 숨기고 검색칸·여백을 줄여 1024px 까지 한 줄을 지킨다.
   더 좁으면(768–1023px, staff 만) 메뉴가 줄을 바꾸고 헤더가 그만큼(약 97px) 늘어난다. */
@media (max-width: 1365px) {
  .acc-nav { column-gap: 12px; padding-left: 20px; padding-right: 20px; }
  .acc-nav .navbar-nav > li > a { padding-left: 8px; padding-right: 8px; }
  .acc-nav .navbar-nav > li > a:has(> .fa) { padding-left: 5px; }  /* 숨긴 아이콘 뒤 &nbsp; 만큼 */
  .acc-nav .navbar-nav > li > a > .fa { display: none; }
  .acc-nav .navbar-nav .form-control { width: 150px; }
}

@media (max-width: 768px) {
  .acc-nav { padding-left: 20px; padding-right: 20px; column-gap: 12px; }
  .acc-user__name { max-width: 10ch; }
  #my-page-wrapper { padding: 80px 20px 24px; }
  .acc-footer { flex-direction: column; margin-top: 40px; padding: 20px; }
  #my-page-wrapper > .acc-footer { margin: 40px -20px -24px; }
  .acc-footer__links { text-align: left; }
}

/* xs(Bootstrap hidden-xs 경계): 왼쪽 ul 에 남는 것은 대리 로그인 pill(Stop·배경ON·배경OFF)뿐이다.
   브랜드·사용자 토글과 한 줄에 들어가지 않으므로 둘째 줄로 내린다. 대리 로그인이 아니면 ul 이 비어 높이 0 이라
   헤더는 64px 그대로다(그래서 row-gap 대신 li 의 margin-top 으로 띄운다). */
@media (max-width: 767px) {
  .acc-nav { flex-wrap: wrap; row-gap: 0; }
  .acc-nav .navbar-nav { order: 1; flex: 1 0 100%; }
  .acc-nav .navbar-nav > li { margin-top: 8px; }
  /* 헤더가 두 줄(약 100px)이 되는 대리 로그인 화면은 본문 위 여백도 늘린다 */
  #wrapper:has(> .acc-nav .navbar-nav > li > a.bg-danger) > #my-page-wrapper { padding-top: 120px; }
}