/* ==================================================================
   공통 테마 · 레이아웃 · 컴포넌트

   원본 db-backup/html/journeys.css 를 그대로 반영한 부분
     .journey-container      max-width 1200 / padding 20 / gap 10 / 세로 중앙정렬
     .search-box-wrapper     max-width 700
     .tabs / .tab-button     radius 8 / padding 8 16 / 700 / active = banner-active
     .legends                radius 8 / shadow 0 4px 6px rgba(0,0,0,.1)
     .legend .box            20x20 / radius 4
       success rgba(60,150,110,.35) · fail rgba(180,90,90,.24)/.32
     .journey-info-wrapper   grid auto-fill minmax(300px,1fr) gap 10
     @media 768 / 600

   전역 테마 변수 — **다크 팔레트는 제작자가 준 실제 값**이다.
   라이트 팔레트는 아직 못 받아서 :root 의 값이 임시값이다.

   아직 못 받은 것 (받으면 여기서 교체)
     · 라이트 팔레트
     · journey-event-info.module.css  (html 3,195회)
     · standard-reward-row.module.css (html 4,154회)
     · 난이도 배지 색 (원본 journey-event-info_Easy/Normal/Hard) — 임시값
   ================================================================== */

/* --- 라이트(기본) ------------------------------------------------- */
:root {
  --text-color:    #24252a;
  --text-sub:      #6b6f76;
  --bg-color:      #f2f3f5;
  --card-bg:       #ffffff;
  --result-bg:     #f7f8fa;
  --border-color:  #dfe1e5;
  --banner-active: #3f6fb5;
  /* 이벤트 이름 강조색. 다크는 사이트 값(#60a5fa)이고 라이트는 그 톤을 낮춘 임시값이다. */
  --accent:        #2f6fc4;

  /* 범례 색 = 원본 journeys.css 값 */
  --success-bg:     rgba(60, 150, 110, 0.35);
  --success-border: rgba(60, 150, 110, 0.35);
  --fail-bg:        rgba(180, 90, 90, 0.24);
  --fail-border:    rgba(180, 90, 90, 0.32);

  /* 난이도 배지 — 원본 CSS 대기, 임시값 */
  --easy:   #3f8f63;
  --normal: #3f6fb5;
  --hard:   #b5573f;


  /* 등급 */
  --legendary: #c9962f;
  --unique:    #8a5fbf;
  --rare:      #3f6fb5;

  /* 아이콘 테두리. 사이트는 흰 반투명(rgba(255,255,255,0.65))을 쓰는데 그건
     어두운 배경 기준이다. 라이트 모드의 연한 초록/빨강 보상 상자 위에서는
     흰 테두리가 보이지 않아, 밝은 쪽은 어두운 선으로 뒤집는다. */
  --icon-border: rgba(0, 0, 0, 0.28);

  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* --- 다크 --------------------------------------------------------- */
/* 토큰만 다시 정의한다. 컴포넌트 규칙은 토큰만 보므로 한 곳만 고치면 된다.
   세 가지 상태를 다 덮는다 —
     시스템(스탬프 없음) : prefers-color-scheme
     명시 라이트          : [data-theme="light"] 가 시스템 다크를 이긴다
     명시 다크            : [data-theme="dark"] 가 시스템 라이트를 이긴다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* --- 아래는 제작자가 준 실제 사이트 다크 팔레트다(임시값 아님) --- */
    --primary-glow:   #3b82f6;
    --secondary-glow: #06b6d4;
    --accent:         #60a5fa;
    --bg-deep:        #0f172a;
    --header-bg:      rgba(15, 23, 42, 0.95);
    --text-main:      #f0f9ff;

    --icon-border:    rgba(255, 255, 255, 0.65);
  --banner-bg:      #2a2a2a;
    --banner-active:  #4a90e2;
    --primary-color:  #7e86f8;

    --bg-color:       #1a1a1a;
    --card-bg:        #1a1a1a;   /* 사이트는 카드와 배경이 같은 색이고 테두리로 구분한다 */
    --result-bg:      #2c2c2c;
    --border-color:   #444;
    --text-color:     rgba(255, 255, 255, 0.87);
    --text-sub:       #bae6fd;

    --input-bg:       #2a2a2a;
    --input-border:   #444;
    --btn-hover-bg:   rgba(255, 255, 255, 0.1);
    --btn-border-color: #555;
    --header-text-color: #fff;
    --header-border-color: #444;

    --header-height:  60px;
    --header-padding: 0 1rem;
    --header-max-width: 1200px;
    --btn-size:       40px;
    --btn-font-size:  1.2rem;

    --success-bg:     rgba(60, 150, 110, 0.30);
    --success-border: rgba(80, 180, 135, 0.45);
    --fail-bg:        rgba(180, 90, 90, 0.24);
    --fail-border:    rgba(210, 115, 115, 0.42);

    --easy:   #58b382;
    --normal: #5b8ed6;
    --hard:   #d9765d;

    --legendary: #e0b452;
    --unique:    #ab86d6;
    --rare:      #5b8ed6;

    --shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
    /* --- 아래는 제작자가 준 실제 사이트 다크 팔레트다(임시값 아님) --- */
  --primary-glow:   #3b82f6;
  --secondary-glow: #06b6d4;
  --accent:         #60a5fa;
  --bg-deep:        #0f172a;
  --header-bg:      rgba(15, 23, 42, 0.95);
  --text-main:      #f0f9ff;

  --icon-border:    rgba(255, 255, 255, 0.65);
  --banner-bg:      #2a2a2a;
  --banner-active:  #4a90e2;
  --primary-color:  #7e86f8;

  --bg-color:       #1a1a1a;
  --card-bg:        #1a1a1a;   /* 사이트는 카드와 배경이 같은 색이고 테두리로 구분한다 */
  --result-bg:      #2c2c2c;
  --border-color:   #444;
  --text-color:     rgba(255, 255, 255, 0.87);
  --text-sub:       #bae6fd;

  --input-bg:       #2a2a2a;
  --input-border:   #444;
  --btn-hover-bg:   rgba(255, 255, 255, 0.1);
  --btn-border-color: #555;
  --header-text-color: #fff;
  --header-border-color: #444;

  --header-height:  60px;
  --header-padding: 0 1rem;
  --header-max-width: 1200px;
  --btn-size:       40px;
  --btn-font-size:  1.2rem;

  --success-bg:     rgba(60, 150, 110, 0.30);
  --success-border: rgba(80, 180, 135, 0.45);
  --fail-bg:        rgba(180, 90, 90, 0.24);
  --fail-border:    rgba(210, 115, 115, 0.42);

  --easy:   #58b382;
  --normal: #5b8ed6;
  --hard:   #d9765d;

  --legendary: #e0b452;
  --unique:    #ab86d6;
  --rare:      #5b8ed6;

  --shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-color);
  color: var(--text-color);
  /* 웹폰트를 받지 않는다(@font-face·Google Fonts 없음). 기기에 있는 폰트를
     이름으로 요청하고, 마지막의 generic family(sans-serif)가 바닥을 받친다 —
     그건 브라우저가 항상 갖고 있으므로 "폰트가 하나도 없는" 상태는 없다.
     다만 폰트가 있어도 **글자를 못 그리는** 경우는 있다(두부 □). 이 목록은
     한글·라틴 위주라 일본어/중국어는 아래 :lang() 로 따로 지정한다. */
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 언어별 폰트 — 두부(□) 와 자형 혼동을 막는다.
   lang 은 상속되므로 <html lang="ja-JP"> 이면 body 도 :lang(ja) 에 걸린다.
   :lang(ja) 는 ja-JP 까지 잡고, :lang(zh-TW) 는 zh-CN 을 잡지 않는다 — 그래서
   JS 가 전체 태그를 넣어야 한다(zh 로 자르면 번체·간체가 갈리지 않는다).
   각 목록도 전부 기기에 있는 폰트 이름일 뿐이고 끝은 sans-serif 다. */
body:lang(ja) {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
               "Noto Sans JP", "Meiryo", sans-serif;
}
body:lang(zh-TW) {
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
               "Heiti TC", sans-serif;
}
body:lang(zh-CN) {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
               "Heiti SC", sans-serif;
}

/* ── 원본 .journey-container ─────────────────────────────────────── */
.journey-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.page-head {
  align-self: stretch;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.page-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.page-title small {
  margin-left: 8px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.page-head .spacer { flex: 1; }

/* 테마 토글 — 시스템/라이트/다크 3상태 */
.theme-toggle {
  padding: 6px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

/* ── 원본 .search-box-wrapper ───────────────────────────────────── */
.search-box-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  max-width: 700px;
}
.search-box-wrapper input[type="search"] { flex: 1; min-width: 180px; }

input[type="search"], select {
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-color);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
input[type="search"]::placeholder { color: var(--text-sub); }
:is(input, select, button):focus-visible {
  outline: 2px solid var(--banner-active);
  outline-offset: 1px;
}

/* ── 원본 .tabs / .tab-button ───────────────────────────────────── */
.tabs {
  display: flex; flex-direction: row; gap: 10px;
  max-width: 100%; overflow-x: auto;
}
.tab-button {
  padding: 8px 16px;
  background: var(--card-bg);
  border: 1px solid var(--banner-active);
  border-radius: 8px;
  font: inherit; font-size: 0.9rem; font-weight: 700;
  color: var(--text-color);
  white-space: nowrap; cursor: pointer;
  transition: all 0.2s;
}
.tab-button.active {
  background: var(--banner-active);
  border-color: var(--banner-active);
  color: white;
}

/* ── 원본 .legends / .legend ────────────────────────────────────── */
.legends {
  padding: 5px;
  display: flex; flex-direction: row; justify-content: flex-start;
  flex-wrap: wrap; gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.legend {
  display: flex; flex-direction: row; gap: 5px; align-items: center;
  font-size: 0.9rem; color: var(--text-color);
}
.legend .box {
  width: 20px; height: 20px;
  background: var(--result-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.legend.success .box { background: var(--success-bg); border-color: var(--success-border); }
.legend.fail .box    { background: var(--fail-bg);    border-color: var(--fail-border); }
.legend .or { font-weight: 700; }

/* ── 저작권 푸터 ────────────────────────────────────────────────── */
/* 모든 페이지에 같은 문구가 들어간다(저장소 README 와 동일). */
.site-footer {
  margin-top: 10px;
  padding: 14px 5px 4px;
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-sub);
  text-align: center;
}
.site-footer p { margin: 0; }
.foot-built { opacity: 0.75; font-variant-numeric: tabular-nums; }
/* 제보 창구 + 방문 수. 좁은 화면에서는 자동으로 두 줄이 된다. */
.foot-links {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  align-items: center; justify-content: center;
  margin-top: 6px !important;
}
.foot-contact code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--result-bg);
  border: 1px solid var(--border-color);
  font-size: 0.95em;
  /* 아이디를 그대로 복사할 수 있게 선택은 열어 둔다. */
  user-select: all;
}
/* 외부 배지 — 높이만 맞추고 로드 실패 시 onerror 가 제거한다. */
.foot-hits { height: 17px; vertical-align: middle; }

/* ── 표기 설명 (? 버튼 + 패널) ──────────────────────────────────── */
/* hidden 속성은 UA 스타일이라 클래스 규칙(.detail 의 display:flex)에 진다.
   이게 없으면 접혀 있어야 할 패널이 처음부터 펼쳐진 채로 나온다. */
[hidden] { display: none !important; }
.legends > .spacer { flex: 1; }
.help-toggle {
  padding: 3px 10px;
  font: inherit; font-size: 0.85rem;
  color: var(--text-color);
  background: var(--result-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
}
.help-toggle:hover,
.help-toggle[aria-expanded="true"] {
  border-color: var(--banner-active);
  color: var(--banner-active);
}
/* .detail 과 같은 상자를 쓴다 — 잠재력 상세와 같은 것으로 읽히게. */
.help-panel { margin: 0; cursor: pointer; gap: 5px; }
.help-row { display: flex; gap: 8px; align-items: baseline; }
.help-row .or,
.help-key {
  flex: none; min-width: 4.5em;
  font-weight: 700; font-size: 0.75rem;
  color: var(--text-sub);
  text-align: right;
}
.help-key.underline { border-bottom: 1px dotted var(--text-sub); }
.help-close {
  margin: 2px 0 0; padding-top: 5px;
  border-top: 1px solid var(--border-color);
  font-size: 0.7rem; color: var(--text-sub); text-align: right;
}

/* ── 원본 .journey-info-wrapper ─────────────────────────────────── */
.journey-info-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  width: 100%;
  align-items: start;
}

/* ── 이벤트 카드 ────────────────────────────────────────────────── */
.event {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
/* 카드에서 가장 먼저 읽히는 곳. 파란 강조를 준다. */
.event-name { font-size: 1rem; font-weight: 700; margin: 0; color: var(--accent); }
.event-group { font-size: 0.75rem; color: var(--text-sub); }
.event-conditions { display: flex; flex-wrap: wrap; gap: 4px; }

.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  background: var(--result-bg);
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  white-space: nowrap;
}
.badge.time { color: var(--banner-active); border-color: var(--banner-active); }
.badge.diff { font-weight: 700; }
/* 언어 무관 키(SD_*)로 건다. 라벨(이지/노말/하드)은 언어에 따라 바뀐다. */
.badge.diff[data-d="SD_EASY"]   { color: var(--easy);   border-color: var(--easy); }
.badge.diff[data-d="SD_NORMAL"] { color: var(--normal); border-color: var(--normal); }
.badge.diff[data-d="SD_HARD"]   { color: var(--hard);   border-color: var(--hard); }
.badge.cond { background: var(--card-bg); color: var(--text-color); }

/* ── 아이콘 — 규격 통일 ─────────────────────────────────────────
   원본 png 는 크기가 제각각이다(부적 512px, 아이템 128px 등). 상자를 고정하고
   contain 으로 맞춘다. 전역 규칙이라 보상 줄·조건 배지·후보 칩 어디에 놓여도
   같은 크기다. 예전에는 .reward-row .icon 으로 한정해서 조건 배지의
   "리세트의 추첨권" 아이콘만 원본 크기로 튀어나왔다. */
.icon {
  width: 20px; height: 20px;
  flex: none;
  object-fit: contain;
  vertical-align: middle;
}
.icon-lg { width: 44px; height: 44px; }

/* 흰 글리프 아이콘을 받치는 프레임. 아이템 아이콘은 원본이 풀컬러라 씌우지 않는다
   (JOURNEY_ITEM_STATUE_FLOWER.png 는 색 6,406종). */
/* 사이트 합성 방식 그대로 — 상자에 배경을 깔고 글리프를 안쪽에 얹는다.
     사이트1  .potential-icon { 17x17; border-radius:3px; overflow:hidden }
              <img src="bg_blue.webp"><img class="potential-logo" src="피의메아리.webp">
     사이트2  .h-16.w-16.rounded-lg.overflow-hidden
              배경 img object-cover / 아이콘 래퍼 inset-[15%] + object-contain
   사이트2 의 15% 인셋을 그대로 쓴다(padding 으로 같은 결과).

   배경은 **문양이 있는 webp** 다. journey_choice.json 이 경로(frame_bg)와
   폴백 색(frame)을 함께 주므로, 파일이 있으면 문양이 나오고 없으면 색만 남는다.
   색은 근사값이라 파일을 넣는 쪽이 정확하다 — web/README.md 참고. */
.icon-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;   /* 테두리가 상자를 키우지 않게 */
  /* em 이라 글자 크기가 바뀌면 같이 따라간다. 줄 높이(1.5em)에 딱 맞추면
     글자가 자기 상자를 다 채우지 않아 아이콘만 커 보인다 — 글자 높이에
     가깝게 줄인다. */
  width: 1.25em; height: 1.25em;
  border-radius: 3px;
  overflow: hidden;
  /* 사이트 규칙 그대로 —
     .desc-row img:first-child { border: 1px solid rgba(255,255,255,0.65) }
     라이트 모드에서는 안 보여서 토큰으로 뺐다. */
  border: 1px solid var(--icon-border);
  /* 배경(이미지 또는 색)은 인라인 style 로 온다 — journey_choice.json 의
     frame_bg / frame 이다. url() 을 커스텀 프로퍼티에 담으면 이 파일 기준으로
     해석되어 /assets/images/... 를 찾으므로 여기서는 받지 않는다. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
}
/* 글리프를 배경과 같은 크기로 겹친다(사이트1 방식). 투명한 부분으로 배경이 보인다.
   여기까지 두 번 틀렸다 —
     padding: 15%        백분율 패딩은 **부모 너비** 기준이라(자기 너비가 아니다)
                         카드가 넓으면 패딩이 상자를 넘어 내용이 0 으로 붕괴했다.
     absolute + inset    대체 요소(img)는 width:auto 면 inset 이 아니라 **고유 크기**
                         (168x177)를 써서 원본 크기로 커진 뒤 잘렸다.
   지금은 부모가 flex 이고 글리프에 명시적 100% 를 준다 — 백분율 width/height 는
   프레임의 고정 크기(22px)에 대해 계산되므로 부모 폭과 무관하다.
   contain 이라 168x177 비율이 찌그러지지 않고 상자 안에 들어간다. */
.icon-frame > .icon {
  width: 100%; height: 100%;
  object-fit: contain;
}
.icon-frame.lg { width: 44px; height: 44px; border-radius: 6px; }


/* ── 보상 ───────────────────────────────────────────────────────── */
/* 성공/실패가 둘 다 있으면 좌우로 놓는다. 카드가 좁으면 자동으로 위아래가 된다
   (flex-basis 140px 미만이면 줄바꿈). 하나뿐이면 폭을 다 쓴다.
   align-items 를 stretch(기본)로 두어 짧은 쪽이 긴 쪽 높이까지 늘어난다 —
   flex-start 였을 때는 한쪽만 짧아서 계단처럼 보였다. */
.rewards { display: flex; flex-wrap: wrap; gap: 5px; align-items: stretch; }
.rewards > .reward-block { flex: 1 1 140px; min-width: 0; }
.reward-block { padding: 6px 9px; border-radius: 4px; border: 1px solid; }
.reward-block.success { background: var(--success-bg); border-color: var(--success-border); }
.reward-block.failure { background: var(--fail-bg);    border-color: var(--fail-border); }
/* 조건("오래된 주화 30 사용" 등). 색은 중립 — 얻는 것이 아니라 내는 것이다.
   보상 상자와 같은 크기로 뒀더니 전폭으로 늘어나(부모가 세로 flex 라 기본이
   stretch) 선택지처럼 보였다. 글자 길이에 맞추고 세로 여백도 줄인다. */
.reward-block.cond {
  background: var(--result-bg);
  border-color: var(--border-color);
  align-self: flex-start;      /* 전폭 stretch 를 끊는다 */
  max-width: 100%;             /* 문구가 길면 카드 안에서 줄바꿈 */
  padding: 2px 8px;
  /* 간격은 .variant 의 gap 이 준다 — margin 을 더하면 이중이 된다. */
}
.reward-group + .reward-group {
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid rgba(128, 128, 128, 0.28);
}
.reward-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
  font-size: 0.85rem;
}
/* 사이트는 보상 줄의 첫 이미지에 테두리를 준다. 프레임이 없는 아이콘도 같게.
   버프·유물·부적 아이콘은 <button class="item-link"> **안에** 들어 있어서
   `.reward-row > .icon` 의 직계 자식 조건에 걸려 못 잡았다. 그래서 잠재력
   (프레임 있음)과 선택지 옵션만 테두리가 보이고 나머지는 맨 이미지였다.
   프레임이 있는 것은 .icon-frame 이 한 겹 더 감싸므로 여기 안 걸린다 —
   테두리가 두 번 그려지지 않는다. */
.reward-row > .icon,
.reward-row > .item-link > .icon,
.option > .item-link > .icon,
.variant-head > .item-link > .icon,
.badge.cond .icon {
  box-sizing: border-box;
  width: 1.25em; height: 1.25em;
  border-radius: 3px;
  border: 1px solid var(--icon-border);
}
/* 상세 패널의 큰 아이콘. 크기는 .icon-lg(44px)를 유지해야 하므로
   width/height 를 건드리지 않고 테두리만 준다. */
.detail-head > .icon {
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid var(--icon-border);
}

.or { color: var(--text-sub); }
.empty { font-size: 0.8rem; color: var(--text-sub); }

/* 클릭하면 상세가 열리는 항목 */
.item-link {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0; background: none; border: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  border-bottom: 1px dotted var(--text-sub);
}
.item-link:hover { border-bottom-style: solid; border-bottom-color: var(--banner-active); }
.item-link[aria-expanded="true"] { border-bottom-color: var(--banner-active); }

/* ── 선택지 / 변형 ──────────────────────────────────────────────── */
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.choice { display: flex; flex-direction: column; gap: 5px; }
.choice + .choice { border-top: 1px solid var(--border-color); padding-top: 8px; }
/* 카드 안에서 두 번째로 읽히는 곳 — 어떤 선택지인지가 먼저 눈에 와야 한다. */
.choice-name { font-size: 0.85rem; font-weight: 700; margin: 0; }
.choice-name .num { color: var(--text-sub); font-variant-numeric: tabular-nums; }

.variants { display: flex; flex-direction: column; gap: 4px; }
.variant { display: flex; flex-direction: column; gap: 4px; }
.variant-head { display: flex; flex-wrap: wrap; gap: 4px; }
.or-divider {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; color: var(--text-sub);
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border-color);
}
/* 경우가 많은 선택지(대마녀의 부름 67개)는 접어 둔다 */
.more-variants {
  align-self: flex-start;
  padding: 3px 10px;
  background: var(--result-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font: inherit; font-size: 0.75rem;
  color: var(--text-sub);
  cursor: pointer;
}
.more-variants:hover { color: var(--text-color); border-color: var(--banner-active); }

/* ── 부적 후보 ──────────────────────────────────────────────────── */
/* 부적 후보. <details> 가 아니라 직접 만든 토글이다 — 카드를 다시 그려도
   열림 상태가 유지되어야 해서(상태는 JS 의 closedOptions 가 갖는다). */
.options { margin: 2px 0 0; font-size: 0.8rem; }
.options-toggle {
  padding: 0; background: none; border: 0;
  font: inherit; color: var(--text-sub);
  cursor: pointer; text-align: left;
}
.options-toggle::before { content: "▾ "; }
.options-toggle[aria-expanded="false"]::before { content: "▸ "; }
.options-toggle:hover { color: var(--banner-active); }
.option-body { margin-top: 3px; }
.option-list { display: flex; flex-wrap: wrap; gap: 3px; }
.option {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px 1px 2px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  white-space: nowrap;
}

/* ── 아이템 상세 패널 ───────────────────────────────────────────── */
.detail {
  margin: 4px 0 2px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--banner-active);
  border-radius: 6px;
  font-size: 0.8rem;
  display: flex; flex-direction: column; gap: 6px;
}
/* 좁은 화면에서 상세가 보상 상자 밖으로 삐져나오던 것 —
   flex 자식은 기본 min-width:auto 라 내용보다 작아지지 못한다. 상세를 감싼
   .reward-block 이 `flex: 1 1 140px` 로 줄어들려 해도 안쪽 이름/설명이
   버티면서 밖으로 밀어냈다. 줄어들 수 있게 풀고 긴 단어는 끊는다. */
.detail { min-width: 0; overflow-wrap: anywhere; }
.detail-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.detail-head > div { min-width: 0; }
.reward-group { min-width: 0; }
.detail-name, .detail-desc { overflow-wrap: anywhere; }
.detail-name { font-weight: 700; font-size: 0.9rem; }
/* 상세의 배지는 줄바꿈을 허용한다.
   .badge 는 기본이 white-space: nowrap 이다 — "3월 초순", "이지" 처럼 짧은
   것에는 맞지만, 여기 오는 "이로운 여정 상태 획득" 은 12자라 줄일 수도 없고
   접을 수도 없어서 상자를 밀어냈다. 성공/실패가 둘 다 있을 때만 터진 이유는
   그때 .reward-block 이 `flex: 1 1 140px` 로 반폭이 되기 때문이다.
   문구에 공백이 있으니 normal 로 두면 단어 경계에서 자연히 접힌다. */
.detail-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; min-width: 0; }
.detail-meta > .badge { white-space: normal; min-width: 0; }
.badge.rarity[data-r="IG_LEGENDARY"] { color: var(--legendary); border-color: var(--legendary); }
.badge.rarity[data-r="IG_UNIQUE"]    { color: var(--unique);    border-color: var(--unique); }
.badge.rarity[data-r="IG_RARE"]      { color: var(--rare);      border-color: var(--rare); }
.detail-desc { color: var(--text-sub); }
.detail-sec { display: flex; flex-direction: column; gap: 2px; }
.detail-sec > h4 {
  margin: 0; font-size: 0.75rem; font-weight: 700;
  color: var(--text-sub); letter-spacing: 0.02em;
}
.detail-sec ul { margin: 0; padding-left: 1.1em; }
.detail-events { max-height: 8.5em; overflow-y: auto; }
.detail.loading, .detail.error { color: var(--text-sub); }
.detail.error { border-color: var(--fail-border); }

.status { padding: 60px 0; text-align: center; color: var(--text-sub); font-size: 0.9rem; }
.status.error { color: #c0392b; }
.status code {
  display: inline-block; margin-top: 10px; padding: 6px 10px;
  background: var(--result-bg); border: 1px solid var(--border-color);
  border-radius: 4px; color: var(--text-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem;
}

/* ── 원본 미디어 쿼리 ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .tabs {
    flex-wrap: nowrap; justify-content: flex-start; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .tab-button { padding: 6px 10px; flex-shrink: 0; font-size: 0.9rem; }
}
@media (max-width: 600px) {
  .journey-container { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }