/* 모든 회원 화면 공통 (views/layout/user/userLayout.ejs) */
html,
body {
  background: #fff;
}
/* 배경이 없던 화면(My Account·Contact)에도 바탕을. 화면 전체 래퍼(.index > .<bodyClass>)에만: 푸터 안의 .contact(이메일 줄)에 걸리면 안 된다.
   색은 아래 '사이트 공통 구분감'의 --nc-bg */
.index > .my-account,
.index > .contact_layout {
  min-height: 100vh;
}

/* 화면 안 사용법 (views/user/partials/howToUse.ejs) */
.howto-link {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #369afe;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.howto-overlay {
  position: fixed;
  inset: 0;
  z-index: 2030;
  background: rgba(17, 24, 45, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.howto-overlay[hidden] {
  display: none;
}
.howto-dialog {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 20px;
  padding: 26px 28px 22px;
  box-shadow: 8px 8px 32px rgba(17, 24, 45, .24);
  box-sizing: border-box;
}
.howto-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.howto-title {
  font-size: 16px;
  font-weight: 700;
  color: #242f57;
}
.howto-x {
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #97a0c3;
  cursor: pointer;
}
.howto-steps {
  margin: 16px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #3f4a73;
}
.howto-steps li::marker {
  color: #369afe;
  font-weight: 700;
}
.howto-steps b {
  color: #242f57;
}
.howto-note {
  margin: 16px 0 0;
  font-size: 12px;
  color: #97a0c3;
  line-height: 1.5;
}
.howto-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.howto-ok {
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  background: #369afe;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.howto-ok:focus-visible,
.howto-link:focus-visible {
  outline: 2px solid #0080ff;
  outline-offset: 2px;
}

/* ===== 사이트 공통 구분감 (2026-10-21~22 과장님 피드백) =====
   바탕과 흰 카드, 카드 안의 흰 요소(칩·입력칸·목록 줄·구분선)가 모니터에 따라 한 덩어리로 보여 한 단계씩 진하게.
   값은 여기 한 곳에서만 정하고, 페이지별 변수(--di-*, --nd-*)도 이 값으로 덮어쓴다. 회원 화면 전부(Lumen·Length·
   Device Information·New Devices·My Account·Contact)에 같은 규칙. 관리자 화면은 레이아웃이 달라 따로. */
:root {
  --nc-bg: #e3e9f4;                                  /* 화면 바탕 */
  --nc-card-line: #b9c6dd;                           /* 흰 카드 테두리 */
  --nc-card-shadow: 0 4px 14px rgba(28, 41, 90, .10);
  --nc-line: #c4cfe3;                                /* 카드 안 구분선·안쪽 상자·입력칸·칩 테두리 */
  --nc-chip-bg: #e8eef8;                             /* 흰 카드 위 칩·머리띠 바탕 */
  --nc-inset-bg: #ebeff7;                            /* 카드 안에 든 상자('No Device Selected'·결과표·통계 상자) 바탕 */
  --nc-pick-bg: #eaf4ff;                             /* 고른 기기 상자 바탕(파란 기운) */
  --nc-pick-line: #9cc8f7;                           /* 고른 기기 상자 테두리 */
}
/* 과장님 모니터 기준: #e8 이상의 연한 회청색은 흰색과 구분이 안 된다. 선은 #c4 이하로, 안쪽 상자에는 바탕색을 깐다 */

/* 1) 바탕 (로그인·가입 화면도 같은 바탕 — 흰 바탕에 흰 카드라 카드가 안 보였다) */
.index > .space-compatibility,
.index > .length-compatibility,
.index > .device-information,
.index > .nd-page,
.index > .my-account,
.index > .contact_layout,
.index > .login,
.index > .sign-up,
.index > .waiting-acceptance {
  background-color: var(--nc-bg);
}
/* 이 세 화면은 레이아웃 없이 따로 그려지는 페이지(views/user/login·signUp·forgotPassword·resetPassword·watingAcceptance.ejs)라
   거기에도 site.css를 넣어 두었다 */
.index > .login,
.index > .sign-up,
.index > .waiting-acceptance {
  min-height: 100vh;
}
/* deviceInfo.css·newDevices.css는 각 화면 본문에서 site.css보다 늦게 읽히므로, 변수 덮어쓰기는 우선순위를 한 단계 높여 둔다
   (.index .device-information > .device-information). 안 그러면 --di-line이 원래 #eaedf7로 돌아가 규격표·상자 선이 다시 사라진다 */
.index .device-information {
  --di-bg: var(--nc-bg);
  --di-line: var(--nc-line);
}
.index .nd-page {
  --nd-bg: var(--nc-bg);
  --nd-line: var(--nc-line);
}

/* 2) 바탕 위의 흰 카드: 테두리 + 그림자 */
.space-compatibility .inputs,
.space-compatibility .calculated-compatibility,
.space-compatibility .clinical-experiences,
.length-compatibility .inputs,
.length-compatibility .calculated-compatibility,
.visual-card,
.reco-card,
.neuroalert-recalls,
.di-card,
.di-setup-row,
.nd-card,
.nd-article,
.nd-mcard,
.contact_layout .content .right .infomation,
.contact_layout .content .right form,
.login-form,
.sign-up-form {
  border-color: var(--nc-card-line);
  box-shadow: var(--nc-card-shadow);
}
/* 2-1) 카드 안에 든 상자: 테두리만으로는 안 보여 바탕색을 깐다.
   고른 기기 상자는 파란 기운(원래 기준 기기 상자가 쓰던 색을 한 단계 진하게), 빈 자리·결과표·저장 목록은 회청색 */
.reference-device .device,
.insert-devices .device,
.attachment-devices .device,
.insert-device .device {
  background: var(--nc-pick-bg);
  border-color: var(--nc-pick-line);
  border-left: 3px solid #369afe;   /* '선택됨'을 한눈에 — 왼쪽 파란 띠 (2026-10-22 과장님이 고른 B안 요소) */
}
.empty-device,
.calculated-compatibility .exist-input .result-sheet,
.clinical-experiences .experience .information .col .result-card,
.ca-saved-item,
.uc-result,
.di-similar-item,
.di-specs,
.di-catalogue,
.contact_layout .content .right .infomation .box {
  background: var(--nc-inset-bg);
}

/* 3) 카드 안 구분선·안쪽 상자·입력칸 */
.empty-device,
.calculated-compatibility .exist-input .result-sheet,
.clinical-experiences .experience .information .col .result-card,
.reco-type-row select,
.select .el-input__inner,
.specification-dialog .el-dialog .spec-sheet,
.compat-visual,
.ca-field input,
.ca-saved-item,
.ca-del,
.contact_layout .content .right .infomation .box,
.dp-search,
.dp-list,
.dp-list li,
.uc-field input,
.uc-result,
.desktop .right .my-account-menu,
.el-input__inner,
.el-textarea__inner,
.di-field input,
.di-field select,
.di-field textarea,
.nd-field input,
.nd-field select,
.nd-field textarea,
.di-sort select,
.nd-period select {
  border-color: var(--nc-line);
}
.calculated-compatibility .exist-input .result-sheet .remaining-length,
.calculated-compatibility .exist-input .result-sheet .remaining-space,
.neuroalert-recalls .na-foot,
.neuroalert-recalls .na-item + .na-item,
.reco-more {
  border-top-color: var(--nc-line);
}
/* 헤더 밑선도 같은 선 색 */
.header .desktop,
.header .mobile {
  border-color: var(--nc-line);
}

/* 4) 흰 카드 위의 흰 칩·테두리 버튼: 연한 바탕 + 진한 테두리 + 진한 글자 (선택된 파란 칩은 그대로) */
.device-information .di-chip:not(.is-active),
.dp-chip:not(.is-on),
.di-btn-ghost,
.nd-btn-ghost,
.ca-open,
.di-link-btn {
  background: var(--nc-chip-bg);
  border-color: var(--nc-card-line);
  color: #3f4a73;
}
/* 테두리 버튼(My requests·Manage my pages·Custom valve)은 옆의 파란 채움 버튼과 짝으로 보이게
   글자를 진하게, 테두리를 조금 두껍게, 옅은 그림자로 '버튼' 느낌 (B안 요소). 파란 채움 버튼도 같은 깊이의 그림자 */
.di-btn-ghost,
.nd-btn-ghost,
.ca-open {
  color: #242f57;
  border-width: 1.5px;
  box-shadow: 0 1px 3px rgba(28, 41, 90, .14);
}
.di-btn,
.nd-btn,
.inputs .row .button,
.clinical-experiences .top .row .button {
  box-shadow: 0 2px 5px rgba(54, 154, 254, .30);
}
.device-information .di-chip:not(.is-active) .n,
.dp-chip:not(.is-on) .dp-chip-n {
  color: #7d88ad;
}
.device-information .di-chip:not(.is-active):hover,
.dp-chip:not(.is-on):hover,
.di-btn-ghost:hover,
.nd-btn-ghost:hover {
  background: #eaf4ff;
  border-color: #369afe;
  color: #0080ff;
}

/* 5) Device Information: 카드 안 내용이 많아 색만으로는 부족 → 두 카드 위에 연한 머리띠(Search / Information).
   ::before라 deviceInfo.js가 카드 내용을 갈아 끼워도 남는다 */
.di-list-card::before,
.di-detail-card::before {
  display: block;
  flex: none;
  padding: 11px 16px;
  background: #27417a;
  border-bottom: 3px solid #369afe;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
/* 6번(2026-10-22 미팅): 머리띠를 진한 남색 띠 + 파란 밑선으로 — 바탕 밝기와 무관하게 두 상자의 경계가 보이게 */
.di-list-card::before {
  content: 'Search';
}
.di-detail-card::before {
  content: 'Information';
  margin: -28px -28px 20px;
  padding-left: 28px;
}
.di-list-card .di-search {
  margin-top: 14px;
  border-color: var(--nc-card-line);
}
@media (max-width: 767px) {
  .di-detail-card::before {
    margin: -20px -16px 16px;
    padding-left: 16px;
  }
}

/* 6) 바탕색만으로 구분하던 요소 — 원칙: 바탕색만으로 구분하는 요소는 두지 않는다 (2026-10-22, 회원 화면 CSS 81규칙 전수 조사)
   6-1) 상자류: 지금 선 색으로 테두리 하나 더 */
.nd-stat,
.nd-specs,
.nd-hero-preview,
.nd-page .is-empty,
.reco-tabs,
.uc-units,
.mv-body,
.compat-pending,
.di-catalogue th,
.company-badge-label {
  border: 1px solid var(--nc-line);
}
.nd-stat,
.nd-specs,
.nd-hero-preview,
.nd-page .is-empty,
.compat-pending {
  background: var(--nc-inset-bg);
}
/* 6-2) 선택된 항목: 고른 기기 상자와 같은 '왼쪽 파란 띠' (Device Information 목록, 장바구니에 담긴 줄, 고정된 사용 경험, 지금 구성 칩) */
.di-item.is-active,
.dp.is-multi .dp-list li.is-added .dp-item,
.clinical-experiences .experience.is-pinned {
  background: var(--nc-pick-bg);
  box-shadow: inset 3px 0 0 #369afe;
}
.di-setup-chip {
  background: var(--nc-pick-bg);
  border: 1px solid var(--nc-pick-line);
}
/* 6-3) 상태 배지(Live·Featured·Pending·Approved·Rejected…): 작은 알약이라 선 대신 바탕색을 한 단계 진하게 — 흰 위에서도 알약이 보인다 */
.nd-state.is-live,
.di-media-status.is-live,
.di-req-state.is-approved {
  background: #c9ecdc;
}
.nd-state.is-wait,
.nd-draft.is-wait,
.di-media-status.is-pending,
.di-req-state.is-pending,
.mv-kind--pdf,
.nd-pdf {
  background: #fbe2b4;
}
.nd-badge.is-featured,
.di-item-flag {
  background: #f8dfa6;
}
.nd-state.is-off,
.nd-draft.is-off,
.di-media-status.is-rejected,
.di-req-state.is-rejected,
.mv-kind--video,
.mv-open {
  background: #f6cdd6;
}
.nd-badge,
.mv-kind--image {
  background: #d3e5fb;
}

/* 헤더: 단위 변환 메뉴 (views/layout/user/header.ejs → unitConverter.js) — 다른 메뉴의 png 아이콘 대신 선 아이콘 */
.uc-menu .icon {
  fill: none;
  stroke: #97a0c3;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.uc-menu .icon path {
  stroke-width: 2.6;
}
.uc-menu:hover .text,
.uc-menu.is-open .text {
  color: #0080ff;
}
.uc-menu:hover .icon,
.uc-menu.is-open .icon {
  stroke: #0080ff;
}

/* 헤더: 업체 계정 표시 (views/layout/user/header.ejs) */
.company-badge .text {
  font-weight: 700;
  color: #242f57;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.company-badge-label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 6px;
  background: #eaf4ff;
  color: #369afe;
  vertical-align: 1px;
  margin-right: 2px;
}
/* 1199px 이하(태블릿 가로)에서는 헤더가 빠듯해 업체 이름은 숨기고 COMPANY 칩만 */
@media (max-width: 1199px) {
  .company-badge-name {
    display: none;
  }
}

/* Length 화면 기기 이름 뒤의 고른 길이 (lengthCompatibility.ejs setNameWithLength) */
.len-tag { font-size: 0.85em; font-weight: 400; color: #5d6b8e; white-space: nowrap; }

/* Inputs 제목 줄: 제목 + 'Clear all'(선택한 기기가 있을 때만, 과장님 요청 3 2026-10-27). style.css의 .inputs > .title 모양을 그대로 */
.inputs > .inputs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inputs > .inputs-head > .title { font-family: Noto Sans CJK KR; font-weight: 700; font-size: 16px; line-height: 24px; color: #242f57; }
.in-clear { height: 26px; padding: 0 10px; border: 1px solid var(--nc-card-line); border-radius: 13px; background: #fff; color: #5d6b8e; font: inherit; font-size: 12px; cursor: pointer; }
.in-clear:hover { border-color: #e24b4a; color: #a32d2d; background: #fff5f5; }
.in-clear[hidden] { display: none; }
/* 머리 로고 → Lumen Compatibility 링크 (과장님 요청 3) */
.header .left a.brand { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; }
.header .left a.brand:hover { opacity: .85; }

/* 즐겨찾는 기기(My favorites) — Inputs 제목 아래 (public/javascripts/common/deviceFavorites.js, 과장님 요청 1 2026-10-27) */
.inputs > .fv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.fv-btn { height: 30px; padding: 0 12px; border: 1.5px solid var(--nc-card-line); border-radius: 15px; background: var(--nc-chip-bg); color: #242f57; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 3px rgba(28, 41, 90, .14); display: inline-flex; align-items: center; gap: 6px; }
.fv-btn:hover { background: #fff8e6; border-color: #e5a400; color: #5c4200; }
.fv-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5a400; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.fv-count:empty { display: none; }
.fv-panel { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--nc-line); border-radius: 8px; background: var(--nc-inset-bg); }
.fv-panel[hidden] { display: none; }
.fv-hint { font-size: 11px; color: #7d88ad; margin-bottom: 6px; }
.fv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
/* Inputs 칸이 좁아 항목은 두 줄: 이름(+×) / 자리 버튼. 이름은 잘리지 않고 줄바꿈 */
.fv-item { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border: 1px solid var(--nc-line); border-radius: 8px; background: #fff; }
.fv-item-head { display: flex; align-items: flex-start; gap: 6px; }
.fv-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fv-item-name { font-size: 13px; font-weight: 500; color: #242f57; line-height: 1.3; word-break: break-word; }
.fv-item-sub { font-size: 11px; color: #5d6b8e; line-height: 1.3; word-break: break-word; }
.fv-item-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fv-put { height: 24px; padding: 0 8px; border: 1px solid #cfe6ff; border-radius: 12px; background: #fff; color: #0080ff; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fv-put:hover { background: #369afe; border-color: #369afe; color: #fff; }
.fv-na { font-size: 11px; color: #97a0c3; }
.fv-del { flex: none; width: 22px; height: 22px; border: 1px solid var(--nc-line); border-radius: 50%; background: #fff; color: #5d6b8e; font-size: 14px; line-height: 1; cursor: pointer; }
.fv-del:hover { border-color: #e24b4a; color: #a32d2d; }
.fv-empty { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #5d6b8e; }
.fv-empty b { color: #242f57; }

/* 아이콘 버튼 (기기 칩의 규격·제거) — 2026-10-23 a11y: img 대신 button, 키보드로도 누른다 */
.icon-btn { background: none; border: 0; padding: 0; margin: 0; display: inline-block; width: 26px; height: 26px; cursor: pointer; vertical-align: middle; line-height: 0; }
.icon-btn img { width: 100%; height: 100%; display: block; }
.icon-btn:focus-visible { outline: 2px solid #0080ff; outline-offset: 2px; border-radius: 6px; }
/* 서버가 내려주는 팝업(실전 경험·규격)의 어두운 배경은 항상 보이고 클릭을 막는다 */
#popup-container .dialog-overlay { display: block; }

/* MC-Stent 호환 차트 (2026-10-27) — Inputs·Suggestions의 "Limited" 표, 결과 칸의 안내 (spaceCompatibility.ejs showChartCheck) */
.chart-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid #d9ccff; border-radius: 4px; background: #f3efff; color: #5b3cc4; font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: 1px; }
.insert-devices .type .chart-tag { margin: 0 0 0 6px; }
.compat-chart:empty { display: none; }
.compat-chart .cc-box { margin-top: 16px; padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 20px; }
.compat-chart .cc-box.is-bad { border: 1px solid #f3b8c2; background: #fff1f4; color: #8e1b33; }
.compat-chart .cc-title { font-weight: 700; }
.compat-chart .cc-box.is-bad .cc-title::before { content: "⚠ "; }
.compat-chart ul { margin: 4px 0; padding-left: 18px; }