/* DR LIFE 공통 스타일 (보상플랜 대시보드 및 조직도) */

:root {
  --dl-navy: #14213d;
  --dl-gold: #c9a227;
  --dl-ink: #1f2733;
}

body { background: #f6f7fb; color: var(--dl-ink); }
.bg-dark-navy { background: var(--dl-navy) !important; }
.brand-mark {
  display: inline-block; background: var(--dl-gold); color: #14213d;
  border-radius: .3rem; padding: 0 .35rem; font-weight: 800;
}
/* 「마이페이지」 — 사용자명 우측(데스크톱) / 사용자명 아래(모바일) */
.navbar .btn-plan {
  display: inline-block;              /* 모바일에서 폭이 전체로 늘어나지 않도록 */
  background: var(--dl-gold); color: #14213d !important;
  border-radius: .4rem; font-weight: 700; padding: .35rem .8rem !important;
}
.navbar .btn-plan:hover { background: #dbb63a; }
@media (max-width: 991.98px) {
  .navbar .btn-plan { margin: .35rem 0; }
}

.hero {
  background: linear-gradient(135deg, #14213d 0%, #22345c 60%, #3a4a75 100%);
  color: #fff; border-radius: 1rem; padding: 3rem 2rem;
}
.hero .lead { color: #cadcfc; }

.stat-card { border: 0; border-radius: .9rem; box-shadow: 0 2px 10px rgba(20,33,61,.08); }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.stat-card .stat-label { font-size: .8rem; color: #6b7280; }

.rank-badge { font-weight: 700; letter-spacing: -.01em; }
.pkg-card { border-radius: .9rem; border: 1px solid #e5e7eb; transition: .15s; height: 100%; }
.pkg-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(20,33,61,.12); }
.pkg-card.is-top { border: 2px solid var(--dl-gold); }
.pkg-price { font-size: 1.5rem; font-weight: 800; }

table.table-plan th { background: var(--dl-navy); color: #fff; font-weight: 600; white-space: nowrap; }
table.table-plan td, table.table-plan th { vertical-align: middle; text-align: center; }
.table-wrap { overflow-x: auto; }

/* 바이너리 조직도 */
.tree { overflow-x: auto; padding: 1rem 0; }
.tree ul { position: relative; padding-top: 22px; display: flex; justify-content: center; margin: 0; list-style: none; }
.tree li {
  position: relative; padding: 22px 6px 0 6px; text-align: center; list-style: none;
}
.tree li::before, .tree li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  border-top: 2px solid #c3ccdb; width: 50%; height: 22px;
}
.tree li::after { right: auto; left: 50%; border-left: 2px solid #c3ccdb; }
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid #c3ccdb; border-radius: 0 6px 0 0; }
.tree li:first-child::after { border-radius: 6px 0 0 0; }
.tree ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  border-left: 2px solid #c3ccdb; width: 0; height: 22px;
}
.tree > ul { padding-top: 0; }
.tree > ul > li::before, .tree > ul > li::after { display: none; }

.node {
  display: inline-block; min-width: 132px; padding: .5rem .6rem;
  border: 1px solid #d7dde8; border-radius: .6rem; background: #fff;
  font-size: .78rem; line-height: 1.35; text-decoration: none; color: var(--dl-ink);
}
.node:hover { border-color: var(--dl-gold); color: var(--dl-ink); }
.node.is-active { border-left: 4px solid #198754; }
.node.is-empty { border-style: dashed; color: #9aa4b2; background: #fbfcfe; }
.node.is-me { background: #fff8e1; border-color: var(--dl-gold); }
.node .n-id { font-weight: 700; }
.node .n-rank { color: #6b7280; font-size: .72rem; }
.node .n-leg { font-size: .68rem; color: #94a3b8; }

/* 마이페이지 서브 탭 */
.mypage-head { border-bottom: 1px solid #e2e6ee; padding-bottom: .75rem; }
.mypage-tabs { gap: .25rem; }
.mypage-tabs .nav-link {
  color: var(--dl-ink); border-radius: .5rem; padding: .4rem .9rem;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.mypage-tabs .nav-link:hover { background: #e9edf4; }
.mypage-tabs .nav-link.active { background: var(--dl-navy); color: #fff; }
.mypage-tabs::-webkit-scrollbar { height: 4px; }
.mypage-tabs::-webkit-scrollbar-thumb { background: #c3ccdb; border-radius: 2px; }

/* 왼쪽·오른쪽 실적 막대 */
.legs { display: flex; flex-direction: column; gap: .5rem; }
.leg-row { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .6rem; }
.leg-name { font-size: .85rem; font-weight: 600; color: #4b5563; }
.leg-num { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 평문 설명 블록 */
.explain {
  background: #fff8e1; border: 1px solid #ecd9a0; border-radius: .6rem;
  padding: .7rem .85rem; font-size: .88rem; line-height: 1.6;
}
.explain-line + .explain-line { margin-top: .35rem; }
.explain-line.muted { color: #6b7280; }

/* 용어 설명 (접이식) */
.glossary {
  background: #fff; border: 1px solid #e2e6ee; border-radius: .8rem;
  box-shadow: 0 2px 10px rgba(20,33,61,.06);
}
.glossary > summary {
  cursor: pointer; padding: .95rem 1.15rem; font-weight: 700; font-size: .95rem;
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
.glossary > summary::-webkit-details-marker { display: none; }
.glossary > summary::before { content: '?'; font-weight: 800; color: var(--dl-gold); }
.glossary > summary::after { content: '▾'; margin-left: auto; color: #9aa4b2; }
.glossary[open] > summary::after { content: '▴'; }
.glossary[open] > summary { border-bottom: 1px solid #eef1f6; }
.glossary-body { padding: .35rem 1.15rem 1.15rem; }
.g-item { padding: .85rem 0; border-bottom: 1px dashed #e7ebf2; }
.g-item:last-child { border-bottom: 0; padding-bottom: 0; }
.g-item h6 { font-weight: 700; margin: 0 0 .35rem; font-size: .92rem; }
.g-item p { margin: 0; font-size: .88rem; line-height: 1.7; color: #4b5563; }

.leg-bar { height: 8px; border-radius: 4px; background: #e9edf4; overflow: hidden; }
.leg-bar > span { display: block; height: 100%; background: var(--dl-gold); }

.admin-area { background: #eef1f6; }
.admin-area .navbar-brand .badge { vertical-align: middle; }

.flow-step {
  border-radius: .7rem; background: #fff; border: 1px solid #e5e7eb;
  padding: 1rem; height: 100%;
}
.flow-step .step-no {
  width: 28px; height: 28px; border-radius: 50%; background: var(--dl-navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.small-muted { font-size: .8rem; color: #6b7280; }

/* ===============================================================
   모바일 최적화 (≤767.98px)
   원칙 — 페이지 전체는 절대 가로로 스크롤되지 않는다.
          넓은 표는 카드로 쌓고, 탭은 줄바꿈하고, 조직도는 세로 목록이 된다.
   =============================================================== */

/* 어떤 요소도 화면 폭을 넘지 못하게 한다 */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, table { max-width: 100%; }
.text-break-all { word-break: break-all; }

/* --- 표를 카드로 전환 --------------------------------------------
   <table class="table table-cards"> 로 쓰고 각 td 에 data-label 을 준다. --- */
@media (max-width: 767.98px) {
  table.table-cards, table.table-cards tbody, table.table-cards tr, table.table-cards td {
    display: block; width: 100%;
  }
  table.table-cards thead { display: none; }
  table.table-cards tr {
    border: 1px solid #e2e6ee; border-radius: .7rem; background: #fff;
    margin-bottom: .6rem; padding: .3rem 0;
  }
  table.table-cards tr:last-child { margin-bottom: 0; }
  table.table-cards td {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    border: 0 !important; padding: .32rem .85rem !important;
    text-align: right !important; font-size: .88rem;
  }
  table.table-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left; font-weight: 600; color: #6b7280; font-size: .8rem;
  }
  table.table-cards td[data-label=""]::before { content: none; }
  /* 카드 안에서 줄바꿈이 필요한 긴 값 */
  table.table-cards td > div, table.table-cards td > span { text-align: right; }
  table.table-cards tfoot { display: block; }
  table.table-cards tfoot tr { background: #fff8e1; border-color: var(--dl-gold); }
  table.table-cards td.is-empty-row { justify-content: center; }
  table.table-cards td.is-empty-row::before { content: none; }
  /* 카드 모드에서는 감싼 래퍼의 가로 스크롤이 필요 없다 */
  .table-responsive:has(table.table-cards) { overflow-x: visible; }
}

/* --- 비교 매트릭스: 데스크톱은 표, 모바일은 등급별 카드 --- */
.matrix-cards { display: none; }
@media (max-width: 767.98px) {
  .matrix-wrap { display: none; }
  .matrix-cards { display: block; }
}
.matrix-card {
  border: 1px solid #e2e6ee; border-radius: .7rem; background: #fff;
  padding: .85rem 1rem; margin-bottom: .6rem;
}
.matrix-card.is-top { border: 2px solid var(--dl-gold); }
.matrix-card h6 { margin: 0 0 .5rem; font-weight: 700; }
.matrix-card dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: 0; font-size: .87rem; }
.matrix-card dt { color: #6b7280; font-weight: 600; }
.matrix-card dd { margin: 0; text-align: right; font-weight: 600; }

/* --- 마이페이지 탭: 모바일에서 줄바꿈 (가로 스크롤 제거) --- */
@media (max-width: 767.98px) {
  .mypage-tabs { flex-wrap: wrap !important; overflow: visible !important; }
  .mypage-tabs .nav-link { padding: .38rem .7rem; font-size: .84rem; }
  .mypage-head h3 { font-size: 1.35rem; }
}

/* --- 조직도: 모바일에서는 들여쓰기 세로 목록 --- */
@media (max-width: 767.98px) {
  .tree { overflow-x: visible; padding: .25rem 0; }
  .tree ul { display: block; padding-top: 0; padding-left: 0; }
  .tree ul ul { padding-left: 1.15rem; }
  .tree li {
    display: block; text-align: left; padding: .3rem 0 0 .85rem;
    border-left: 2px solid #d7dde8; position: relative;
  }
  .tree li::before, .tree li::after { display: none !important; border: 0 !important; }
  .tree ul ul::before { display: none; }
  .tree > ul > li { border-left: 0; padding-left: 0; }
  .tree li > .node::before {
    content: ''; position: absolute; left: 0; top: 1.15rem;
    width: .8rem; height: 2px; background: #d7dde8;
  }
  .tree > ul > li > .node::before { display: none; }
  .node {
    display: block; min-width: 0; width: 100%; font-size: .8rem;
    padding: .45rem .6rem;
  }
  .node.is-empty { padding: .3rem .6rem; font-size: .75rem; }
}

/* --- GoJS 조직도 캔버스 --- */
#treeDiv { touch-action: none; }          /* 모바일에서 판/줌 제스처가 페이지 스크롤과 충돌하지 않게 */
#treeDiv.tree-big { height: 85vh !important; }   /* [크게 보기] 토글 */
@media (max-width: 767.98px) {
  #treeDiv { height: 440px !important; }
  #treeDiv.tree-big { height: 80vh !important; }
}

/* --- 기타 모바일 가독성 --- */
@media (max-width: 767.98px) {
  body { font-size: .95rem; }
  .container { padding-left: .85rem; padding-right: .85rem; }
  main.container { padding-top: 1rem !important; padding-bottom: 1.5rem !important; }
  .hero { padding: 1.75rem 1.15rem; border-radius: .8rem; }
  .hero h1 { font-size: 1.5rem; }
  .hero .lead { font-size: .92rem; }
  .hero .btn-lg { font-size: .95rem; padding: .5rem 1rem; }
  h3 { font-size: 1.35rem; }
  h4 { font-size: 1.2rem; }
  h5 { font-size: 1.05rem; }
  .stat-card .stat-value { font-size: 1.25rem; }
  .stat-card .card-body { padding: .8rem .9rem; }
  .card-body { padding: .9rem; }
  .pkg-price { font-size: 1.25rem; }
  .nav-pills .nav-link { font-size: .85rem; }
  /* 검색·필터 폼이 가로로 밀리지 않도록 */
  form.row.g-2 > .col-auto { flex: 1 1 100%; max-width: 100%; }
  form.row.g-2 > .col-auto .form-select,
  form.row.g-2 > .col-auto .form-control,
  form.row.g-2 > .col-auto .btn { width: 100%; }
  /* 페이지네이션 줄바꿈 */
  .pagination { flex-wrap: wrap; gap: .15rem; }
  /* 긴 문자열(지갑주소·해시) 강제 줄바꿈 */
  .text-break, .small-muted { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------
   운영 결정 대장 (admin/decisions.php)
   문서형 화면이라 카드 대신 괘선 중심으로 짠다.
   --------------------------------------------------------------- */
.dec { max-width: 62rem; }
.dec-head { border-bottom: 3px solid var(--dl-navy); padding-bottom: 1.1rem; margin-bottom: 1.5rem; }
.dec-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dl-gold); margin-bottom: .35rem;
}
.dec-title { font-size: 1.9rem; font-weight: 800; color: var(--dl-navy); margin: 0 0 .6rem; }
.dec-lead { color: #4c5666; font-size: .95rem; line-height: 1.75; max-width: 46rem; margin-bottom: .9rem; }
.dec-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: #7a8496; }
.dec-meta b { color: #3a4353; font-weight: 600; }

.dec-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1.1rem; }
.dec-tally > div {
  background: #fff; border: 1px solid #e3e7ee; border-radius: .6rem;
  padding: .8rem .7rem; text-align: center;
}
.dec-tally .n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dec-tally .k { font-size: .74rem; color: #7a8496; margin-top: .2rem; }
.n.t-urgent { color: #a12b2b; }
.n.t-soon   { color: #a8620a; }
.n.t-later  { color: #4c5666; }
.n.t-done   { color: #1f6f4a; }

.dec-legend {
  background: #fff; border: 1px solid #e3e7ee; border-left: 3px solid var(--dl-gold);
  border-radius: .5rem; padding: .75rem .9rem; font-size: .82rem;
  color: #5b6474; line-height: 2.1; margin-bottom: 1.2rem;
}
.dec-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: .1rem .55rem; white-space: nowrap;
}
.dec-tag.t-urgent { background: #fbeaea; color: #a12b2b; }
.dec-tag.t-soon   { background: #fbf1e2; color: #8a5008; }
.dec-tag.t-later  { background: #eef1f5; color: #55606f; }

.dec-jump { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.6rem; }
.dec-jump a {
  font-size: .78rem; text-decoration: none; color: #47526a;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 999px; padding: .25rem .7rem;
}
.dec-jump a:hover { border-color: var(--dl-navy); color: var(--dl-navy); }

.dec-sec { margin-bottom: 2.2rem; scroll-margin-top: 4.5rem; }
.dec-sec-head {
  display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid #d9dee7; padding-bottom: .45rem; margin-bottom: .9rem;
}
.dec-sec-id {
  background: var(--dl-navy); color: #fff; font-weight: 800; font-size: .8rem;
  width: 1.7rem; height: 1.7rem; border-radius: .35rem;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.dec-sec-head h2 { font-size: 1.12rem; font-weight: 700; color: var(--dl-navy); margin: 0; flex: 1 1 auto; }
.dec-sec-count { font-size: .75rem; color: #8a94a5; white-space: nowrap; }

.dec-item {
  background: #fff; border: 1px solid #e3e7ee; border-radius: .6rem;
  padding: .9rem 1rem; margin-bottom: .7rem;
}
.dec-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.dec-item-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem; font-weight: 700; color: #fff; background: #64708a;
  border-radius: .25rem; padding: .1rem .4rem;
}
.dec-item-title { font-weight: 700; color: var(--dl-ink); flex: 1 1 auto; }

.dec-rows { display: grid; grid-template-columns: 3.6rem 1fr; gap: .35rem .8rem; margin: 0; font-size: .89rem; }
.dec-rows dt {
  font-size: .74rem; font-weight: 700; color: #8a94a5; text-align: right;
  padding-top: .12rem; white-space: nowrap;
}
.dec-rows dd { margin: 0; color: #454f60; line-height: 1.7; overflow-wrap: anywhere; }
.dec-rows dd.risk {
  background: #fbeaea; border-left: 3px solid #c05252; color: #7d2727;
  border-radius: .3rem; padding: .35rem .55rem;
}
.dec-rows code {
  background: #eef1f5; color: #37415a; border-radius: .25rem;
  padding: .05rem .3rem; font-size: .85em;
}

.dec-table thead th { font-size: .78rem; color: #8a94a5; font-weight: 600; }
.dec-ok { color: #1f6f4a; font-weight: 700; font-size: .84rem; }

.dec-closing {
  background: var(--dl-navy); color: #dbe2f0; border-radius: .7rem;
  padding: 1.3rem 1.4rem; margin-bottom: 1rem;
}
.dec-closing h3 { font-size: 1.05rem; font-weight: 700; color: var(--dl-gold); margin: 0 0 .6rem; }
.dec-closing p { font-size: .9rem; line-height: 1.75; margin-bottom: .7rem; }
.dec-closing b { color: #fff; }
.dec-steps { padding-left: 1.2rem; margin: 0; }
.dec-steps li { font-size: .9rem; line-height: 1.75; margin-bottom: .4rem; }
.dec-foot { font-size: .78rem; color: #8a94a5; text-align: center; padding-bottom: .5rem; }
.dec-foot code { background: #eef1f5; border-radius: .25rem; padding: .05rem .3rem; }

@media (max-width: 575.98px) {
  .dec-title { font-size: 1.4rem; }
  .dec-lead { font-size: .89rem; }
  .dec-tally { grid-template-columns: repeat(2, 1fr); }
  .dec-tally .n { font-size: 1.4rem; }
  /* 라벨을 위로 올려 좁은 화면에서 본문 폭을 확보한다 */
  .dec-rows { grid-template-columns: 1fr; gap: .1rem; }
  .dec-rows dt { text-align: left; margin-top: .5rem; }
  .dec-rows dt:first-child { margin-top: 0; }
  .dec-item { padding: .8rem .85rem; }
  .dec-closing { padding: 1.05rem 1rem; }
}

/* 관리자 메뉴가 9개라 데스크톱 좁은 폭에서 가로로 밀린다. 줄바꿈 허용. */
@media (min-width: 992px) {
  .admin-area .navbar-nav.me-auto { flex-wrap: wrap; row-gap: .1rem; }
  .admin-area .navbar-nav .nav-link { padding-left: .55rem; padding-right: .55rem; }
}

/* 운영 결정 대장 — 문항별 결정 기입란 */
.dec-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem;
}
.dec-toolbar .dec-jump { margin-bottom: 0; flex: 1 1 auto; }
.dec-filter {
  font-size: .8rem; color: #55606f; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
}

.dec-state {
  font-size: .68rem; font-weight: 700; border-radius: .25rem;
  padding: .1rem .45rem; white-space: nowrap;
}
.dec-state.s-open    { background: #eef1f5; color: #8a94a5; }
.dec-state.s-decided { background: #e6f2ec; color: #1f6f4a; }
.dec-state.s-hold    { background: #fbf1e2; color: #8a5008; }
/* 결정이 끝난 문항은 한 눈에 구분되게 왼쪽에 표시를 준다 */
.dec-item[data-status="decided"] { border-left: 3px solid #1f6f4a; }
.dec-item[data-status="hold"]    { border-left: 3px solid #d8a54a; }

.dec-form {
  border-top: 1px dashed #dfe4ec; margin-top: .8rem; padding-top: .7rem;
}
.dec-form-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-bottom: .35rem;
}
.dec-form-label { font-size: .74rem; font-weight: 700; color: var(--dl-navy); letter-spacing: .02em; }
.dec-stamp { font-size: .72rem; color: #9aa3b2; }
.dec-text { font-size: .88rem; line-height: 1.65; resize: vertical; }
.dec-text:focus { border-color: var(--dl-navy); box-shadow: 0 0 0 .2rem rgba(20, 33, 61, .12); }
.dec-form-foot { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .4rem; }
.dec-form-foot .dec-status { width: auto; font-size: .8rem; }

@media (max-width: 575.98px) {
  .dec-toolbar { flex-direction: column; align-items: stretch; }
  .dec-form-foot .dec-status { flex: 1 1 auto; }
  .dec-form-foot .btn { flex: 0 0 auto; }
}