/* 원정 · 생활 던전 · 제작 화면 (v6): 길이 탭 · 구역 전리품 표 · 원정 기록 · 채집 장면 · 제작 갈래 · 재료 설명 판 */

/* ── 길이 탭: 한 줄 · 작게 ── */
.lentabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; background: var(--surface-2); }
.lentabs .lt { min-width: 0; min-height: 30px; padding: 0; font-size: .72rem; letter-spacing: -.02em; font-weight: 700; border: 0; border-radius: 0; background: var(--surface-2); box-shadow: inset -1px -1px 0 var(--line); position: relative; overflow: visible; }
.lentabs .lt::before { content: ''; position: absolute; inset: -7px 0; } /* 누르는 자리 44px (보이는 높이는 30px) */
.lentabs .lt.sel { background: var(--ink-2); color: var(--surface); }
.lentabs .lt.moon::after { content: ''; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--gilt); } /* 수면 보너스 */
.zinfo .lentabs { margin-top: .45rem; }
.zinfo h3 { font-size: 1.05rem; margin: 0; min-width: 0; }
.zinfo .zi-name { margin-top: .35rem; gap: .4rem; }
.zlore { font-size: .86rem; line-height: 1.55; margin: .3rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 오른쪽 출발 카드 맨 위: 구역 그림 · 이름 · 길이 · 전투력 한 줄 (dungeon.js drawRight) — 900px 높이 화면에서 출발이 스크롤 없이 보이게 */
.startcard > .zinfo { padding-bottom: .45rem; border-bottom: 1px dashed var(--line-2); }
.pwrcmp.slim { margin: .45rem 0 0; padding: 0; border: 0; flex-direction: row; align-items: center; gap: .4rem; font-size: .78rem; color: var(--ink-3); cursor: help; }
.pwrcmp.slim .pw-k { white-space: nowrap; } .pwrcmp.slim .pw-k b { color: var(--ink); }
.pwrcmp.slim .pbar { flex: 1 1 auto; min-width: 2rem; }
.pwrcmp.slim .rdy { font-size: .72rem; }
/* 출발 아래 따로: 구역 이야기(두 줄, 누르면 펼침) + 드롭 정보 접기 */
.zmore .zlore { margin: 0; cursor: pointer; }
.zmore .zlore.open { display: block; -webkit-line-clamp: unset; }
.dropfold { margin-top: .5rem; }
.dropfold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0 .5rem; border: 1px solid var(--line); border-radius: var(--r-s); background: color-mix(in srgb, var(--surface-2) 70%, transparent); font-size: .82rem; user-select: none; }
.dropfold > summary::-webkit-details-marker { display: none; }
.dropfold > summary .faint { font-size: .72rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropfold > summary::after { content: '▾'; margin-left: auto; color: var(--ink-3); transition: transform .15s; }
.dropfold[open] > summary::after { transform: rotate(180deg); }
.dropfold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dropfold > .droptab { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.zmore .dropfold:first-child { margin-top: 0; }
/* 휴대폰 펼친 구역 카드: 출발 바로 아래 「파티 · 난이도」(아래 출발 카드로) · 소탕, 드롭 정보는 접어서 */
.zgo-sub { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
button.link.zgo-jump { display: inline-flex; align-items: center; gap: .2rem; min-height: 36px; padding: 0 .1rem; font-size: .8rem; white-space: nowrap; }
.zgo-jump .si { width: 13px; height: 13px; }
.zgo .dropfold { margin-top: 0; }
.recz.on { box-shadow: inset 0 0 0 1px var(--primary-2); }
.recz .zart.clk { cursor: pointer; }
/* 원정 목록: 추천 던전 카드에 작은 「추천!」 표 (따로 큰 추천 카드는 없앴다 · dungeon.js drawZones) */
.zart .zrecpill { position: absolute; right: 6px; bottom: 6px; z-index: 2; height: 20px; padding: 0 .5rem; display: inline-flex; align-items: center; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: .7rem; line-height: 1; letter-spacing: .02em; color: #3a2a18; background: linear-gradient(#f6e09a, #d6b46a); box-shadow: 0 0 0 1px #8a6a2a, 0 2px 4px rgba(0, 0, 0, .35); pointer-events: none; }
.zplate:has(.zrecpill) { border-color: var(--gilt) !important; }
.rl-wait { margin-bottom: .6rem; gap: .6rem; }

/* ── 구역 전리품 표 ── */
.droptab { display: grid; gap: .22rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--r-s); background: color-mix(in srgb, var(--surface-2) 70%, transparent); font-size: .76rem; cursor: default; }
.dt-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: .35rem; min-width: 0; }
.dt-k { color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.dt-v { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; min-width: 0; }
.dt-v i, .dt-p i { font-style: normal; color: var(--ink-3); }
.dt-p { display: inline-flex; gap: .2rem; white-space: nowrap; }
.dt-gs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; min-width: 0; }
.dt-g { display: flex; justify-content: center; align-items: center; gap: .15rem; padding: 0 .25rem 0 .1rem; height: 20px; border: 1px solid color-mix(in srgb, var(--gc) 70%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--gc) 10%, var(--surface)); white-space: nowrap; }
.dt-g .ic { filter: drop-shadow(0 0 1px var(--gc)); }
.dt-g b { font-size: .72rem; }
.dt-mat { display: inline-flex; align-items: center; gap: .2rem; max-width: 9rem; min-width: 0; }

/* ── 구역 카드: 휴대폰에서는 고른 카드가 그 자리에서 펼쳐진다 (길이 · 전리품 · 출발) ── */
.zgo { display: none; }
div.zplate { cursor: pointer; }
div.zplate.locked { cursor: not-allowed; }
@media (max-width: 1100px) {
  .zinfo { display: none; }
  .zgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
  .zplate { padding: .35rem .35rem .4rem; gap: .25rem; }
  .zplate .zname { font-size: .96rem; }
  .zplate:not(.exp) .zrec { display: none; }
  .zplate:not(.exp) .zmons .ic:not(.zboss .ic) { display: none; }
  .zplate.exp { grid-column: 1 / -1; }
  .zplate.exp .zgo { display: grid; gap: .45rem; margin-top: .15rem; }
  .zplate .zart canvas { max-height: 92px; object-fit: cover; }
  .zplate.exp .zart canvas { max-height: none; }
  .recz { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

/* ── 원정 기록 한 장 ── */
.modal.runsum { max-width: 560px; }
.rl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding-right: 2.6rem; }
.rl-title { margin: 0; font-family: var(--font-head); font-weight: 400; }
.rl-reason { margin: .35rem 0 .5rem; font-size: .92rem; }
.rl-nums { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.rl-n { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; }
.rl-n i { font-style: normal; color: var(--ink-3); font-size: .78rem; }
.rl-sec { margin: .75rem 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); border-bottom: 1px dashed var(--line-2); padding-bottom: .15rem; }
.rl-loots { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .9rem; max-height: 9.5rem; overflow: auto; }
.rl-loot { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.rl-opts { display: grid; gap: .4rem; }
.rl-opt { justify-content: flex-start; text-align: left; white-space: normal; font-family: var(--font-head); font-weight: 400; font-size: .98rem; line-height: 1.4; padding: .5rem .7rem; min-height: 44px; gap: .55rem; }
.rl-opt .ic { flex: none; opacity: .85; }
.rl-chose { font-family: var(--font-head); font-size: .98rem; color: var(--ink-2); }
.rl-got { margin-top: .3rem; }
.rl-story { margin: .2rem 0 .35rem; line-height: 1.7; font-size: .95rem; color: var(--ink); }
.rl-gotline { display: flex; align-items: center; gap: .4rem; font-size: .92rem; }
.rl-foot { margin-top: .8rem; gap: .4rem; }
.rl-list { max-height: 60vh; overflow: auto; }
.rl-row { width: 100%; justify-content: flex-start; text-align: left; gap: .6rem; font-weight: 400; padding: .45rem .55rem; min-height: 44px; }
.rl-top { max-width: 40%; font-size: .82rem; }
.rl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }

/* ── 생활 던전: 캐는 장면 · 모은 것 · 확률 ── */
.gs-wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: .8rem; align-items: start; }
.gs-scene { width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px var(--surface), 0 2px 5px rgba(40, 24, 10, .2); background: #1c140e; display: block; }
.gs-tlabel { font-size: var(--t-small); color: var(--ink-2, inherit); font-weight: 600; margin-top: .4rem; } /* 획득한 채집물 */
.gs-tally { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .25rem .5rem; }
.gs-t { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; min-width: 0; }
.gs-t b { font-variant-numeric: tabular-nums; }
.gs-t.rare span { color: var(--primary); font-weight: 700; }
.gs-t.pop { animation: gspop .6s ease-out; }
@keyframes gspop { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.rates { display: grid; gap: .2rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--r-s); background: color-mix(in srgb, var(--surface-2) 70%, transparent); font-size: .78rem; }
.rates-h { display: flex; justify-content: space-between; color: var(--ink-3); font-weight: 700; }
.rates-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .15rem .6rem; }
.rate { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: .3rem; min-width: 0; }
.rate .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate.rare .nm { color: var(--primary); font-weight: 700; }
.rate b { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .gs-wrap { grid-template-columns: minmax(0, 1fr); } }

/* ── 수련: 원정 › 수련 (public/js/pages/drill.js) ── */
.drill { display: grid; gap: .55rem; }
.drill-cap { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: var(--r-s); background: color-mix(in srgb, var(--surface-2) 70%, transparent); font-size: .86rem; gap: .5rem; flex-wrap: wrap; }
.drill-hours { gap: .3rem; align-items: center; flex-wrap: wrap; }
.drill-hours button { min-width: 3.4rem; }
.drill-row { gap: .55rem; align-items: center; }
.drill-row .pbar.thin { height: 4px; margin: .2rem 0 .15rem; }
.drill-row.mine b { color: var(--primary); }
.drill-mates { gap: .3rem; align-items: center; font-size: .82rem; min-width: 0; cursor: help; } .drill-mates .ic { flex: none; }
.drill-row.on { background: color-mix(in srgb, var(--st-green) 10%, transparent); }


/* ── 제작: 갈래 탭 · 제작법 카드 ── */
.cf-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.cf-tabs button { min-height: 32px; font-size: .82rem; padding: .2rem .65rem; position: relative; }
.cf-tabs button::before { content: ''; position: absolute; inset: -6px 0; }
.cf-tabs .n { font-size: .7rem; opacity: .7; margin-left: .15rem; }
.cf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-bottom: .45rem; font-size: .82rem; }
.cf-bar input[type="search"] { min-height: 32px; flex: 1 1 8rem; max-width: 14rem; }
.cf-bar .toggle { white-space: nowrap; }
.cf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .45rem; }
.rcp { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .25rem .55rem; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); min-width: 0; }
.rcp.no { opacity: .6; }
.rcp .rcp-ic { grid-row: span 2; align-self: start; }
.rcp-h { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.rcp-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp-h .tag { margin-left: auto; flex: none; }
.rcp-fx { font-size: .78rem; color: var(--ink-2); line-height: 1.45; }
.rcp-odds { display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; }
.rcp-need { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .15rem .6rem; font-size: .8rem; }
.rcp-m { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.rcp-m.lack { color: var(--rose); }
.rcp-m .num { font-variant-numeric: tabular-nums; }
.rcp-act { grid-column: 1 / -1; display: flex; align-items: center; gap: .35rem; }
.rcp-act .ev { margin-right: auto; font-size: .76rem; color: var(--ink-3); }
.rcp-act button { min-height: 32px; position: relative; }
.rcp-act button::before { content: ''; position: absolute; inset: -6px 0; }
.rcp-learn { grid-column: 1 / -1; font-size: .78rem; color: var(--ink-3); }
.rcp.no.chain { opacity: .85; }
.rcp-why { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .76rem; line-height: 1.4; color: var(--rose); }
.rcp-why span { min-width: 0; overflow-wrap: anywhere; }
.rcp-act button.blocked { color: var(--ink-3); border-style: dashed; cursor: help; white-space: nowrap; }
/* 모자란 재료부터 만들기 (public/js/craftplan_ui.js) */
.cp-top { gap: .5rem; align-items: center; }
.cp-n { gap: .35rem; align-items: center; }
.cp-n button { min-width: 34px; min-height: 32px; }
.cp-sum { font-size: .86rem; line-height: 1.5; }
.cp-steps { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .45rem; }
.cp-steps li { min-width: 0; }
.cp-steps li.bad { color: var(--rose); }
.cp-steps li.cp-final { list-style: none; margin-left: -1.3rem; padding-top: .35rem; border-top: 1px dotted var(--line-2); }
.cp-s { display: flex; align-items: center; gap: .35rem; min-width: 0; flex-wrap: wrap; }
.cp-s .tag { margin-left: auto; }
.cp-u { font-size: .78rem; overflow-wrap: anywhere; }
.cp-why { font-size: .78rem; color: var(--rose); overflow-wrap: anywhere; }
.cp-box { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--r-s); }
.cp-tags { display: flex; flex-wrap: wrap; gap: .15rem .6rem; font-size: .8rem; margin-top: .2rem; }
.cp-bad { color: var(--rose); }
@media (max-width: 860px) { .cf-list { grid-template-columns: minmax(0, 1fr); } }

/* ── 재료 설명 판 ── */
.ms { display: grid; gap: .5rem; }
.ms-sec { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); border-bottom: 1px dashed var(--line-2); padding-bottom: .1rem; }
.ms-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.ms-links button { min-height: 32px; font-size: .8rem; font-weight: 500; padding: .15rem .55rem; position: relative; }
.ms-links button::before { content: ''; position: absolute; inset: -6px 0; }
.ms-links button .ic { margin-right: .1rem; }
.ms-rcp { display: flex; flex-wrap: wrap; gap: .25rem; }
.ms-rcp button { min-height: 32px; font-size: .8rem; font-weight: 500; padding: .15rem .5rem; gap: .25rem; position: relative; }
.ms-rcp button::before { content: ''; position: absolute; inset: -6px 0; }
.ms-rcp button.unknown { opacity: .7; border-style: dashed; }
.ms-note { font-size: .8rem; color: var(--ink-3); line-height: 1.5; }

/* ── 원정 무대: 구역 도트 던전 위의 전투 · 걷는 길 · 양피지 글판과 선택지 (public/js/dunscene.js) ── */
.arena { position: relative; isolation: isolate; min-height: 270px; background: #0c0806; border: 1px solid #1e1208; box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .08); overflow: hidden; }
.arena > .dscene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; z-index: 0; pointer-events: none; }
.arena > .field { position: relative; z-index: 1; min-height: 270px; align-items: center; }
.arena .erows { border-bottom: 0; box-shadow: none; align-self: stretch; }
.arena .erow + .erow { border-top: 1px dashed rgba(255, 236, 200, .1); }
.arena .rl { color: rgba(255, 236, 200, .6); text-shadow: 0 1px 2px #000; }
.arena .turnbar { align-self: stretch; border-left: 0; background: linear-gradient(90deg, rgba(10, 6, 4, 0), rgba(10, 6, 4, .6) 35%); }
.arena .turnbar .tt { color: #ecdcbc; text-shadow: 0 1px 2px #000; }
.arena .turnbar .tc { background: rgba(28, 18, 10, .82); }
.arena .mon .n { color: #f6ead0; text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 0 6px rgba(0, 0, 0, .8); }
.arena .mon.boss .n { color: #ffd08a; }
.arena .mon .ehp { background: rgba(20, 10, 6, .8); border-color: rgba(0, 0, 0, .75); height: 6px; }
.arena .mon .ehpn { color: #ecdfc6; text-shadow: 0 1px 2px #000; }
.arena .mon .art { position: relative; }
.arena .mon .art::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); z-index: -1; }
.arena .field > * { transition: opacity .45s ease, transform .6s ease; }
.arena.travel .field > * { opacity: 0; transform: scale(1.08); pointer-events: none; }
.walktag { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: none; align-items: baseline; gap: .55rem; transform: translateX(-50%); white-space: nowrap; padding: .3rem .8rem .32rem; color: #3a2412; font-size: .8rem; background: linear-gradient(180deg, #f2e2bc, #dfc48e); border: 2px solid #3e2612; box-shadow: inset 0 0 0 1px #f8ecd0, 0 2px 0 #1e1208, 0 6px 14px rgba(0, 0, 0, .5); }
.walktag b { font-family: var(--font-head); font-weight: 400; font-size: .92rem; letter-spacing: .04em; }
.walktag span { color: #6a4c2c; font-variant-numeric: tabular-nums; }
.walktag::before { content: ''; width: 7px; height: 7px; align-self: center; background: #8a1c1c; transform: rotate(45deg); animation: walkpip 1.1s steps(2) infinite; }
@keyframes walkpip { 50% { background: #d8a040; } }
.arena.travel .walktag { display: flex; }

/* 양피지: 바랜 종이 · 그을린 가장자리 · 잉크 글씨 · 도트 테두리 */
.parch { position: relative; color: #3a2412; background-color: #e8d4a6;
  background-image: radial-gradient(ellipse at 50% 42%, rgba(255, 250, 232, .6), rgba(255, 250, 232, 0) 60%), radial-gradient(circle at 18% 22%, rgba(130, 84, 34, .16) 0 1.5px, transparent 2.5px), radial-gradient(circle at 71% 63%, rgba(130, 84, 34, .12) 0 1px, transparent 2px), radial-gradient(circle at 40% 85%, rgba(150, 100, 40, .1) 0 3px, transparent 5px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 70, 22, .42) 100%), linear-gradient(180deg, #f0dfb6, #e0c590);
  background-size: auto, 23px 29px, 31px 19px, 67px 53px, auto, auto;
  border: 2px solid #3e2612; border-radius: 2px;
  box-shadow: inset 0 0 0 2px #f6e8c6, inset 0 0 0 3px #a8803e, inset 0 0 24px rgba(110, 64, 20, .32), 0 3px 0 #1e1208, 0 12px 28px rgba(0, 0, 0, .55); }
.parch::before, .parch::after { content: ''; position: absolute; width: 6px; height: 6px; background: #c8a04a; box-shadow: inset -2px -2px 0 #6a4a1a, inset 1px 1px 0 #f8e6a0; top: 5px; left: 5px; pointer-events: none; }
.parch::after { left: auto; right: 5px; }
.parch h3, .parch h4 { color: #2a180a; font-family: var(--font-head); font-weight: 400; margin: 0; }
.parch p { color: #3a2412; margin: 0; }
.parch .faint { color: #6e5234; }
.parch .gold { color: #8a560c; } .parch .good { color: #2e5e2a; } .parch .bad { color: #962020; }
.parch .note { color: #5a3e22; background: rgba(255, 248, 228, .45); border-color: rgba(106, 70, 34, .35); }
.roomcard { grid-column: 1 / -1; justify-self: center; align-items: center; text-align: center; gap: .45rem; padding: 1.1rem 1.4rem 1.2rem; margin: 1.2rem auto; width: min(560px, calc(100% - 1.6rem)); }
.roomcard > div:first-child:not(.row):not(.ic) { font-family: var(--font-head); font-size: 1.35rem; color: #2a180a; }
.roomcard p { max-width: 58ch; line-height: 1.7; white-space: pre-line; }
.votecard { grid-column: 1 / -1; width: min(680px, calc(100% - 1.2rem)); margin: .8rem auto; padding: 1rem 1.1rem 1.1rem; gap: .6rem; }
.votecard > p { line-height: 1.8; white-space: pre-line; }
.votecard .forkchart { margin: 0 auto; max-width: 300px; }
.pchoices { gap: .5rem; margin-top: .2rem; }
.pchoices button { width: 100%; min-height: 52px; display: flex; align-items: center; gap: .4rem; text-align: left; padding: .5rem .75rem .5rem .7rem; color: #2e1c0c; font-weight: 700; font-size: .92rem; line-height: 1.4;
  background: linear-gradient(180deg, #f8eed6, #e9d4a6); border: 2px solid #6a4622; border-radius: 3px;
  box-shadow: inset 0 1px 0 #fffaf0, inset 0 -3px 0 rgba(120, 76, 30, .22), 0 2px 0 #3a2410; transition: transform .06s, background .12s; }
.pchoices button::before { content: ''; flex: none; width: 9px; height: 9px; margin: 0 .45rem 0 .15rem; color: inherit; background: #8a1c1c; transform: rotate(45deg); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .28), inset 2px 2px 0 rgba(255, 190, 170, .35); }
.pchoices button:hover:not(:disabled) { background: linear-gradient(180deg, #fff6e2, #f2deb4); border-color: #8a5a2a; }
.pchoices button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 #fffaf0, 0 0 0 #3a2410; }
.pchoices button:focus-visible { outline: 2px solid #c8902a; outline-offset: 2px; }
.pchoices button.sel { border-color: #8a2a18; background: linear-gradient(180deg, #fbe6b8, #eccb84); box-shadow: inset 0 0 0 1px #d8a040, inset 0 -3px 0 rgba(120, 76, 30, .2), 0 2px 0 #3a2410; }
.pchoices button.sel::before { background: #d8a040; box-shadow: inset -2px -2px 0 #8a5a1a, inset 2px 2px 0 #fff0b0; }
.pchoices button:disabled { opacity: .55; filter: grayscale(.35); cursor: not-allowed; }
.pchoices button .grow > .faint { color: #6e5236; font-weight: 400; font-size: .8rem; margin-top: .1rem; }
.pchoices .tag { flex: none; background: rgba(255, 250, 235, .65); border-color: rgba(106, 70, 34, .5); color: #4a2e14; }
.pchoices .tag.bad { color: #8a1c1c; border-color: rgba(138, 28, 28, .45); } .pchoices .tag.good { color: #2e5a2a; border-color: rgba(46, 90, 42, .45); } .pchoices .tag.lilac { color: #5a3a8a; }
.pchoices .rm.pathic { background: rgba(255, 248, 228, .7); color: #4a2e14; border-color: #6a4622; }
@media (max-width: 760px) {
  .arena, .arena > .field { min-height: 240px; }
  .roomcard { margin: .9rem auto; padding: .9rem 1rem 1rem; width: calc(100% - 1.2rem); }
  .votecard { margin: .55rem auto; padding: .8rem .75rem .85rem; width: calc(100% - .9rem); }
  .pchoices button { min-height: 50px; font-size: .88rem; }
  .walktag { font-size: .74rem; bottom: 8px; padding: .25rem .6rem; }
}
.pchoices button .grow { flex: 1 1 9.5rem; min-width: 0; }
.pchoices button { flex-wrap: wrap; row-gap: .3rem; }
.stage .blog:empty { display: none; }

/* 원정 파티 판: 전열 · 중열 · 후열이 가운데 정렬된 진형 (한 줄에 둘까지, 혼자면 가운데). 소모품 · 카드는 카드 오른쪽 끝 세로 칸 */
.ptight .prow { grid-template-columns: 1.1rem minmax(0, 1fr); }
.ptight .pcells { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.ptight .pchip { flex: 0 1 calc(50% - .15rem); max-width: calc(50% - .15rem); min-width: 0; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .3rem; padding: .25rem .28rem; align-items: center; }
.ptight .pc-por, .ptight .pc-por > canvas, .ptight .pc-por > .portrait { width: 30px !important; height: 30px !important; }
.ptight .pc-body { gap: 3px; }
.ptight .pc-nm { font-size: .78rem; }
.ptight .pc-bot { justify-content: space-between; gap: .2rem; }
.ptight .pc-hpn { flex: 0 1 auto; overflow: hidden; text-overflow: clip; font-size: .66rem; font-variant-numeric: tabular-nums; }
.ptight .pc-pips { gap: 2px; }
.ptight .pc-pips span { width: 4px; height: 4px; }
@media (max-width: 860px) { .ptight .pchip { flex: 0 1 calc(50% - .15rem); max-width: calc(50% - .15rem); grid-template-columns: 30px minmax(0, 1fr) auto; } }

/* 이 화면의 단추: 가운데 정렬 · 한 줄 (넘치면 글씨를 줄인다 · dungeon.js fitText) */
.exprun button, .hgslot button, .pchoices button { white-space: nowrap; justify-content: center; text-align: center; }
.pchoices button .grow { text-align: center; overflow: hidden; }
.pchoices button .grow > .fit, .pchoices button .grow > .faint { display: block; white-space: nowrap; overflow: hidden; }
.pchoices button { flex-wrap: nowrap; }
.pchoices .tag { white-space: nowrap; }

/* 원정 지도: 작은 양피지 한 장 (제목 · 층 · 격자 지도) + 왼쪽 세로 범례, 가운데 정렬 */
.dchart .dc-title { font-size: 13px; fill: var(--ink); letter-spacing: .12em; }
.dchart .cart text { font-size: 10px; }
.dchart .dc-n .lbl { font-size: 8.5px; }
.dc-split { display: flex; justify-content: center; align-items: center; gap: .55rem; min-width: 0; }
.dc-split .dchart-wrap { flex: 0 1 190px; max-width: 190px; margin: 0; }
.dc-legend.vert { display: flex; flex-direction: column; gap: .3rem; flex: none; font-size: .68rem; color: var(--ink-3); }
.dc-legend.vert .lg { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.dc-legend.vert .lg i { width: 15px; height: 15px; }
.dc-legend.vert .lg i svg { width: 9px; height: 9px; }
.expmap .dc-floors { justify-content: center; margin-bottom: .35rem; }
.expmap .dc-split .dchart-wrap { max-width: 190px; }
.votecard .forkchart .dchart-wrap { max-width: 200px; }

/* 지도 · 이번 전투: 한 칸 안의 두 쪽 단추 */
.panetabs { display: flex; margin: 0 auto .45rem; width: min(100%, 260px); border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.panetabs button { flex: 1 1 0; min-height: 32px; padding: .2rem .4rem; border: 0; border-radius: 0; box-shadow: none; background: var(--surface); color: var(--ink-3); font-family: var(--font-head); font-weight: 400; font-size: .84rem; white-space: nowrap; justify-content: center; }
.panetabs button + button { border-left: 1px solid var(--line-2); }
.panetabs button.sel, .panetabs button.sel:hover { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gilt); }
.expmap .statpanel { gap: .6rem; padding: 0 .15rem .2rem; }
.expmap .statempty { text-align: center; margin: 1.2rem 0; }
.expmap > [hidden] { display: none !important; }
/* 넓은 화면(≥1100px)의 원정 진행: 무대는 왼쪽에 작게(도트도 잘게 — public/js/pages/dungeon.js 가 160칸 높이로 그린다), 그 옆에 편성(위 · 넓게), 지도 | 일지 두 칸 (모두 한 화면 안에) */
@media (min-width: 1100px) {
  .dun.exprun { grid-template-columns: minmax(380px, 540px) minmax(0, 1fr); gap: .8rem; }
  .exprun .arena, .exprun .arena > .field { min-height: 240px; }
  .exprun .expside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem !important; align-items: start; }
  .exprun .expside > .expparty { grid-column: 1 / -1; }
  .exprun .expside .ptight .pchip { flex-basis: 220px; max-width: 240px; }
}

/* ── 원정 출발 카드 한 장 (public/js/pages/dungeon.js drawRight · whoPanel): 누구와 → 편성 줄 → 자동 편성 한 줄 → 난이도 · 방침 한 줄씩 → 출발 ──
   예전에는 낱장 두 장에 세로로 길게 (난이도 단추가 두 줄로 넘치고, 편성과 같은 동료 이름 단추 줄이 한 번 더) */
.startcard { display: flex; flex-direction: column; gap: .5rem; }
.startcard .whopanel { gap: .45rem !important; }
.startcard .whotabs button { min-height: 40px; padding: 0 .4rem; font-size: .84rem; white-space: nowrap; }
.sc-fhead { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0; font-size: .8rem; color: var(--ink-3); }
.sc-pw { display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap; min-width: 0; }
.sc-pw b { color: var(--ink); font-size: .86rem; }
.sc-pw i { font-style: normal; color: var(--line-2); margin: 0 .1rem; }
button.link.sc-more { display: inline-flex; align-items: center; gap: .2rem; min-height: 24px; padding: 0 .1rem; font-size: .8rem; white-space: nowrap; position: relative; }
button.link.sc-more::before { content: ''; position: absolute; inset: -8px 0; } /* 누르는 자리 40px */
.sc-more .si, .sc-pick .row .si { width: 13px; height: 13px; }
.startcard .af-lineup { padding: .3rem .3rem .25rem; }
.startcard .af-lineup .af-row { gap: .15rem; }
.startcard .af-lineup .af-rl { font-size: .72rem; }
.startcard .af-lineup .af-nm { font-size: .74rem; }
.startcard .af-lineup .af-slot { gap: .1rem; width: auto; min-width: calc(var(--sz) + 10px); } /* 이름 · 다섯 하트가 40px 칸에서 잘리지 않게 */
.startcard .af-lineup.tap .af-slot { cursor: pointer; border-radius: var(--r-s); }
.startcard .af-lineup.tap .af-slot:hover .portrait, .startcard .af-lineup.tap .af-slot:focus-visible .portrait { box-shadow: 0 0 0 2px var(--primary-2); }
.startcard .af { flex-direction: row; gap: .35rem; }
.startcard .af-go { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 .4rem; white-space: nowrap; }
.startcard .af-seg { flex: 1.35 1 0; min-width: 0; }
.startcard .af-seg button { min-height: 40px; padding: 0 .2rem; white-space: nowrap; }
/* 난이도 · 방침: 이름 칸 + 세 칸 마디 단추, 한 줄 */
.sc-opts { display: flex; flex-direction: column; gap: .4rem; padding-top: .5rem; border-top: 1px dashed var(--line-2); }
.sc-line { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); align-items: center; gap: .3rem; min-width: 0; }
.sc-line.wide { grid-template-columns: minmax(0, 1fr); gap: .2rem; } /* 이야기 난이도까지 넷이면 이름은 위로 */
.sc-k { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; font-size: .82rem; color: var(--ink-2); white-space: nowrap; cursor: help; }
.sc-k .si { width: 13px; height: 13px; stroke-width: 1.9; color: var(--ink-3); flex: none; }
.sc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; background: var(--surface); min-width: 0; }
.sc-seg button { min-width: 0; min-height: 40px; padding: 0 .1rem; gap: .15rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink-2); font-size: .78rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; justify-content: center; overflow: hidden; }
.sc-seg button + button { border-left: 1px solid var(--line); }
.sc-seg button i { font-style: normal; font-weight: 400; font-size: .66rem; letter-spacing: -.03em; color: var(--ink-3); }
.sc-seg button:hover:not(:disabled):not(.sel) { background: color-mix(in srgb, var(--surface-3) 50%, transparent); }
.sc-seg button.sel, .sc-seg button.sel:hover { background: var(--ink-2); color: var(--surface); }
.sc-seg button.sel i { color: color-mix(in srgb, var(--surface) 75%, transparent); }
.sc-seg button:disabled { opacity: .5; color: var(--ink-3); cursor: not-allowed; }
.sc-seg button { position: relative; }
.sc-seg button > .si { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; } /* 잠긴 칸: 모서리에 작은 자물쇠 (글씨 폭은 그대로) */
/* 출발 (넓게) + 원정 기록 (작게) 한 줄 */
.sc-foot { display: flex; align-items: center; gap: .4rem; margin-top: .1rem; }
.sc-foot .sc-go { flex: 1 1 auto; min-width: 0; min-height: 44px; white-space: nowrap; }
.sc-foot .sc-log { flex: none; min-height: 40px; gap: .25rem; padding: 0 .55rem; white-space: nowrap; }
.sc-foot .sc-log .si { width: 14px; height: 14px; }
.startcard .confined { margin: 0; }
/* 편성 칸을 누르면 뜨는 동료 고르기 */
.modal.sc-pick { width: min(400px, 100%); }
.sc-pick .sc-pick-sub { margin: .1rem 0 .55rem; }
.sc-pick .comppick { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.sc-pick .cpk { min-height: 64px; }
/* 파티 칸: 소모품 · 카드를 이름 칸 아래 한 줄로 (2026-10-28 오너: 오른쪽 세로 칸이 씹혀 보였다) */
.pc-kit { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; margin-top: 1px; }
.pc-kit .pc-cards { display: inline-flex; gap: 2px; min-width: 0; }
.pc-kit .pc-it { position: relative; width: auto; display: inline-flex; align-items: center; gap: 1px; height: 16px; padding: 0 3px 0 1px; border-radius: 8px; background: color-mix(in srgb, var(--surface-3) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.pc-kit .pc-it .ic, .pc-kit .pc-it img, .pc-kit .pc-it canvas { width: 14px !important; height: 14px !important; }
.pc-kit .pc-it b { position: static; font-size: .6rem; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pc-kit .pc-it b::before { content: '×'; opacity: .6; }
.pc-kit .pc-card { width: 15px; height: 15px; display: inline-grid; place-items: center; border-radius: 4px; font-size: .55rem; }
.pc-kit .pc-card .ic, .pc-kit .pc-card img, .pc-kit .pc-card canvas { width: 13px !important; height: 13px !important; }
.pc-kit-sep { width: 1px; height: 12px; background: var(--line-2); flex: none; }
.ptight .pc-kit .pc-card:nth-child(n+4) { display: none; }
/* 원정 출발 카드: 자동 편성 · 균형/공격/안전 · 난이도 · 방침 줄을 낮게 (오너 2026-10-28: 세로폭이 너무 컸다) */
.startcard .af-go { min-height: 30px; font-size: .86rem; padding: 0 .35rem; }
.startcard .af-go.big { min-height: 30px; font-size: .86rem; letter-spacing: .04em; }
.startcard .af-seg button { min-height: 28px; font-size: .74rem; }
.sc-seg button { min-height: 28px; font-size: .74rem; line-height: 1.15; }
.sc-seg button i { font-size: .6rem; }
.sc-seg button > .si { top: 2px; right: 2px; width: 8px; height: 8px; }
@media (max-width: 600px) { .startcard .af-go, .startcard .af-go.big { min-height: 32px; } .startcard .af-seg button, .sc-seg button { min-height: 30px; } }
.sc-opts { gap: .3rem; padding-top: .4rem; }
@media (max-width: 1100px) { .startcard { scroll-margin-top: 10rem; } } /* 「파티 · 난이도」로 내려올 때 위 띠에 가리지 않게 */
/* ── 원정 · 릴레이 「멀티 플레이」 (2026-10-28 오너: 설명 글 대신 자리로) ──
   매칭 두 칸 [파티 찾기 | 파티 만들기] + 칸 아래 작은 스위치 → 편성 줄 + [자동 편성 · 균형 공격 안전] → 초대 · 모집 중인 파티 */
.mk-row { display: flex; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.mk-row > * { flex: 1 1 0; min-width: 0; }
.mk-row > .matchbox.on, .mk-row > .bpostline.mine { flex-basis: 100%; }
.matchbox.mk-auto:not(.on), .bpostline.mk-make:not(.mine) { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; padding: 0; border: 0; background: none; }
.mk-btn { width: 100%; min-height: 40px; padding: 0 .4rem; font-size: .9rem; white-space: nowrap; gap: .25rem; }
.bpostline.mk-make .mk-btn .si { width: 14px; height: 14px; }
.bpostline.mk-make.mine { flex-wrap: wrap; row-gap: .3rem; }
.mk-opt, .bpostline .bmanual.mk-opt { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; margin: 0; font-size: .74rem; color: var(--ink-3); white-space: nowrap; cursor: pointer; min-height: 22px; }
/* 작은 스위치: 체크 상자 대신 알약 하나 */
.mk-opt input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 24px; height: 14px; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-3); box-shadow: none; cursor: pointer; transition: background .15s, border-color .15s; }
.mk-opt input[type="checkbox"]::after { content: ''; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(40, 24, 10, .35); transition: transform .15s; }
.mk-opt input[type="checkbox"]:checked { background: var(--ink-2); border-color: var(--ink-2); }
.mk-opt input[type="checkbox"]:checked::after { transform: translateX(10px); }
.mk-opt input[type="checkbox"]:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }
.mk-opt:has(input:checked) { color: var(--ink-2); }
html[data-tap="big"] .mk-opt input[type="checkbox"] { width: 24px; height: 14px; }
/* 파티원 한 줄 */
.pm-mates { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.pm-tags { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1 1 auto; min-width: 0; }
.pm-mates > button { flex: none; }
/* 편성: 줄 + 자동 편성 한 줄 (조용한 단추) */
.pm-form { display: flex; flex-direction: column; gap: .35rem; }
.startcard .af-go.af-quiet { flex: 0 0 auto; min-width: 5.2rem; background: transparent; box-shadow: none; color: var(--ink-2); font-size: .8rem; font-weight: 700; border-color: var(--line-2); }
.startcard .af-go.af-quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-3) 50%, transparent); }
.startcard .af:has(.af-quiet) .af-seg { flex: 1 1 auto; }
/* 초대 · 모집 중인 파티 */
.pm-lists { display: flex; flex-direction: column; gap: .2rem; }
.pm-lists:empty { display: none; }
.pm-h { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 24px; padding-top: .35rem; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.pm-h:first-child { border-top: 1px dashed var(--line-2); padding-top: .45rem; }
.pm-h > span { display: inline-flex; align-items: center; gap: .3rem; }
.pm-n { min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: .68rem; line-height: 1.5; text-align: center; }
button.link.pm-link { display: inline-flex; align-items: center; gap: .2rem; font-size: .76rem; font-weight: 700; position: relative; }
button.link.pm-link::before { content: ''; position: absolute; inset: -9px -4px; } /* 누르는 자리 넓게 */
button.link.pm-link .si { width: 13px; height: 13px; }
.pm-list .li { gap: .4rem; padding: .32rem .05rem; }
.pm-list .li:last-child { border-bottom: 0; }
.pm-list .li > button { flex: none; }
.pm-sub { display: flex; align-items: center; gap: .3rem; min-width: 0; margin-top: 1px; font-size: .72rem; color: var(--ink-3); }
.pm-sub .faint { min-width: 0; }
/* 난이도 넷(이야기까지)이어도 이름은 왼쪽 같은 폭 그대로 */
.sc-line.four .sc-seg button { display: flex; flex-direction: column; gap: 0; min-height: 34px; line-height: 1.1; font-size: .72rem; }
.sc-line.four .sc-seg button i { font-size: .58rem; }
/* 보스 릴레이 대기 판: 원정 「함께」와 같은 결 */
.relayhead { gap: .55rem !important; }
.relayhead .rl-title { display: inline-flex; align-items: center; gap: .3rem; margin: 0; cursor: help; }
.relayhead .rl-title .si { width: 14px; height: 14px; stroke-width: 1.9; color: var(--ink-3); }
.relayhead .relayq { gap: .35rem; }
.relayhead .relayq .rq { gap: .4rem; padding: .35rem .3rem; border-radius: var(--r-s); }
.relayhead .relayq .rq.me { border-color: var(--gilt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 55%, transparent); background: color-mix(in srgb, var(--gilt) 10%, var(--surface-2)); }
.relayhead .mk-row { padding-top: .15rem; }
@media (min-width: 861px) { .relayhead > .relayq, .relayhead > .mk-row { width: 100%; max-width: 460px; } }
span.mk-opt { cursor: default; }
/* 걷는 동안의 던전 화면은 작게 (2026-10-28 오너: 70% · 작을수록 도트가 예쁘다). 휴대폰에서는 너무 작아지지 않게 340px 아래로는 줄이지 않는다 */
.arena.travel { width: min(100%, max(70%, 340px)); margin-inline: auto; aspect-ratio: 16 / 10; min-height: 0; }
.arena.travel > .field { position: absolute; inset: 0; min-height: 0; overflow: hidden; }
/* 원정 출발 판: 휴식 경험치 한 줄 */
.sc-rest { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .35rem; padding: .3rem .55rem; font-size: .76rem; color: color-mix(in srgb, #3a6a9a 85%, var(--ink)); background: color-mix(in srgb, #5a8ac0 12%, transparent); border: 1px solid color-mix(in srgb, #5a8ac0 35%, var(--line)); border-radius: var(--r, 4px); }
.sc-rest svg { width: 14px; height: 14px; flex: none; }
/* 원정 출발 카드 (2026-10-28 오너 2차): 편성 접기 · 난이도 · 방침 줄을 더 얇게 */
.sc-fold { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
button.sc-fold-head { display: flex; align-items: center; justify-content: flex-start; gap: .35rem; width: 100%; min-width: 0; min-height: 30px; padding: 0 .45rem; border: 1px dashed var(--line-2); border-radius: var(--r-s); background: transparent; box-shadow: none; color: var(--ink-3); font-size: .74rem; font-weight: 700; text-align: left; }
button.sc-fold-head:hover { background: color-mix(in srgb, var(--surface-3) 45%, transparent); color: var(--ink-2); }
.sc-fold-ic { display: inline-flex; flex: none; transition: transform .15s; transform: rotate(-90deg); }
.sc-fold-ic .si { width: 13px; height: 13px; }
.sc-fold.open .sc-fold-ic { transform: none; }
.sc-fold-k { flex: none; white-space: nowrap; }
.sc-fold-sum { flex: 1 1 auto; min-width: 0; font-weight: 400; color: var(--ink-3); text-align: right; }
.sc-fold.open .sc-fold-sum { display: none; }
.sc-fold-body[hidden] { display: none !important; }
.sc-opts { gap: .25rem; }
.sc-line { grid-template-columns: 2.7rem minmax(0, 1fr); gap: .25rem; }
.sc-k { font-size: .72rem; gap: .15rem; }
.sc-k .si { width: 11px; height: 11px; }
.sc-seg button, .sc-line.four .sc-seg button { display: inline-flex; flex-direction: row; align-items: center; gap: .15rem; min-height: 30px; padding: 0 .1rem; font-size: .7rem; line-height: 1; }
.sc-seg button i, .sc-line.four .sc-seg button i { font-size: .58rem; }
@media (max-width: 600px) { .sc-seg button, .sc-line.four .sc-seg button { min-height: 30px; } }
/* 좁은 카드(데스크톱 오른쪽 칸)에서 난이도 넷: 이름 · 배율을 두 줄로, 높이는 그대로 30px */
.sc-opts { container-type: inline-size; }
@container (max-width: 340px) { .sc-line.four .sc-seg button { flex-direction: column; justify-content: center; gap: 1px; font-size: .68rem; } .sc-line.four .sc-seg button i { font-size: .54rem; line-height: 1; } }
/* 원정 진행 (2026-10-28 오너): 모래시계 · 귀환은 무대 바로 위 작은 한 줄 · 일지 | 전투 통계 | 원정 지도 한 칸 · 작은 원정 대화 */
.expctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem; margin: 0 0 .3rem; min-width: 0; }
.expctl:empty { display: none; }
.expctl > button { min-height: 28px; padding: 0 .55rem; font-size: .74rem; }
.expctl > .hgchip { margin-right: auto; padding: 0 .4rem; }
.expctl > .hgchip canvas, .expctl > .hgchip .ic { width: 18px !important; height: 18px !important; }
.expctl-note { flex: 1 0 100%; font-size: .68rem; line-height: 1.35; text-align: right; }
.expmap .panetabs { width: min(100%, 320px); }
.expmap .panetabs button { min-height: 30px; font-size: .8rem; }
.expmap .exphist { padding: 0 .1rem; }
.expchat { display: flex; flex-direction: column; gap: .3rem; }
.ec-h { font-family: var(--font-head); font-size: .8rem; color: var(--ink-2); }
.ec-list { display: flex; flex-direction: column; gap: .15rem; max-height: calc(5 * 1.4em + .5rem); min-height: 2.2em; overflow-y: auto; padding: .25rem .4rem; font-size: .78rem; line-height: 1.4; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); }
.ec-msg { overflow-wrap: anywhere; }
.ec-msg b { color: var(--ink-2); }
.ec-msg.me b { color: var(--primary-2, var(--ink)); }
.ec-empty { font-size: .74rem; }
.ec-form { display: flex; gap: .3rem; min-width: 0; margin: 0; }
.ec-in { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 0 .5rem; font-size: .82rem; }
.ec-form > button { flex: none; min-height: 32px; }
@media (min-width: 1100px) { .exprun .expside > .expchat { align-self: stretch; } }
/* 모래시계 · 귀환: 무대 그림 오른쪽 아래 구석에 작게 겹쳐 둔다 (2026-10-28 오너: 위 줄은 어색하다) */
.arena > .expctl { position: absolute; right: 6px; bottom: 6px; z-index: 6; margin: 0; flex-wrap: nowrap; gap: 4px; padding: 3px; border-radius: 6px; background: rgba(16, 10, 6, .55); backdrop-filter: blur(2px); }
.arena > .expctl > button { min-height: 22px; padding: 0 .45rem; font-size: .66rem; }
.arena > .expctl > .hgchip { margin: 0; min-height: 22px; padding: 0 .35rem; font-size: .66rem; }
.arena > .expctl > .hgchip canvas, .arena > .expctl > .hgchip .ic { width: 14px !important; height: 14px !important; }
.arena > .expctl > .expctl-note { display: none; }
.arena:has(> .expctl:not(:empty)) .walktag { bottom: 36px; } /* 구석 단추와 겹치지 않게 걷는 표는 한 칸 위로 */
/* ═══ 다른 전투 콘텐츠 (2026-10-28 오너: 원정 고친 것처럼) — 수련 · 별의 탑 · 균열 · 어둠 너머 · 생활 던전 ═══
   조각은 public/js/startui.js: 출발 카드(.startcard.cu-card · 얇은 줄 .sc-line · 빨간 단추 하나 .sc-go) · 그림 구석 단추(.cu-stage > .cu-ctl) · 한 칸 탭(.cu-panebox) */
.cu-card { gap: .45rem; min-width: 0; }
.cu-card > .sc-opts:first-child { border-top: 0; padding-top: 0; }
.cu-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.cu-head h3 { margin: 0; min-width: 0; font-size: 1.05rem; }
.cu-head > .ic { flex: none; }
.cu-head .cu-push, .cu-head > .tag:last-child, .cu-head > .chip:last-child { margin-left: auto; flex: none; }
.cu-i { display: inline-flex; align-items: center; color: var(--ink-3); cursor: help; flex: none; }
.cu-i .si { width: 14px; height: 14px; }
.cu-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .6rem; font-size: .8rem; min-width: 0; }
.cu-left { display: flex; align-items: baseline; gap: .4rem; font-size: .84rem; }
.cu-last { display: flex; flex-direction: column; gap: .2rem; padding-top: .35rem; border-top: 1px dashed var(--line-2); }
.cu-who { gap: .4rem; }
.cu-card .drill-mates { font-size: .78rem; }
/* 그림 + 오른쪽 아래 구석의 작은 단추 (원정 .arena > .expctl 과 같은 모양) */
.cu-stage { position: relative; min-width: 0; }
.cu-ctl { position: absolute; right: 6px; bottom: 6px; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 6px; background: rgba(16, 10, 6, .55); backdrop-filter: blur(2px); }
.cu-ctl > button { min-height: 24px; padding: 0 .5rem; font-size: .7rem; }
.cu-ctl > .hgchip { margin: 0; min-height: 24px; padding: 0 .35rem; font-size: .68rem; }
.cu-ctl > .hgchip canvas, .cu-ctl > .hgchip .ic { width: 14px !important; height: 14px !important; }
.gs-wrap.cu-wrap { margin-bottom: .2rem; }
/* 한 칸 안의 탭 */
.cu-panebox .panetabs { width: min(100%, 320px); }
.cu-panebox .panetabs button { min-height: 30px; font-size: .8rem; }
.cu-pane { min-width: 0; }
/* 수련: 줄을 눌러 고르고 출발 카드의 빨간 단추로 시작 · 최고 레벨은 목록 머리 한 줄 */
.drill-list > .drill-cap { border: 0; border-bottom: 1px dashed var(--line-2); border-radius: 0; background: none; padding: .2rem .3rem .35rem; font-size: .8rem; }
.drill-row.dpick { cursor: pointer; }
.drill-row.dpick:hover { background: color-mix(in srgb, var(--surface-3) 40%, transparent); }
.drill-row.sel { background: color-mix(in srgb, var(--gilt-2, var(--butter)) 16%, transparent); box-shadow: inset 3px 0 0 var(--gilt); }
.cu-radio { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); }
.drill-row.sel .cu-radio { border-color: var(--ink-2); background: radial-gradient(circle, var(--ink-2) 0 4px, var(--surface) 4.5px); }
/* 별의 탑 */
.tw-card .sc-foot { margin-top: .15rem; }
.tw-res { display: flex; flex-direction: column; gap: .4rem; }
.tw-kv { grid-template-columns: auto 1fr auto 1fr; gap: .1rem .6rem; font-size: .8rem; }
.tw-kv > :nth-child(even) { text-align: right; }
.tw-rw { gap: .25rem; }
.cu-panebox .tw-cls { margin: 0 auto .4rem; }
@media (max-width: 480px) { .tw-kv { grid-template-columns: 1fr auto; } }
/* 균열: 규칙은 이름만(누르면 설명) 두 칸 · 권장/내 전투력 한 줄 막대 */
.rf-mods.mini { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .3rem; margin: 0; }
.rf-mods.mini .rf-mod { grid-template-columns: 28px minmax(0, 1fr); gap: .35rem; min-height: 34px; padding: .15rem .35rem; }
.rf-mods.mini .rf-ic { width: 28px; height: 28px; }
.rf-mods.mini .rf-ic .ic { width: 24px !important; height: 24px !important; }
.rf-mods.mini .rf-mt b { font-size: .84rem; }
.rf-head .pwrcmp.slim { margin: 0; }
.rf-head .rf-party { margin: 0; font-size: .8rem; }
.rf-head .rf-rooms { margin: 0; }
.rf-head .rf-live { margin: 0; }
@media (max-width: 560px) { .rf-mods.mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* 어둠 너머 출발 카드 */
.bz-zone.startcard { gap: .45rem; }
.bz-zone .lore.zlore { font-size: .86rem; }
.bz-zone .bz-comps { padding: .1rem 0 .2rem; }
/* 생활 던전: 구역 그림은 작게(설명은 풍선말) · 시간 여섯 칸 */
.lg-card { margin-top: .8rem; }
.lg-card .pwrcmp.slim { margin: 0; }
.sc-line.many .sc-seg button { font-size: .66rem; letter-spacing: -.04em; }
.lsk-sel { margin-bottom: .6rem; }
@media (max-width: 600px) {
  .ldareas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .ldarea { padding: .3rem; gap: .2rem; }
  .ldarea > b { font-size: .82rem; }
  .ldarea .zart canvas, .ldarea .zart img, .ldarea .zart svg { max-height: 70px; }
}
.cu-pane-h { font-family: var(--font-head); font-size: .9rem; color: var(--ink-2); margin: 0 0 .3rem; }
.cu-who > .whotabs { width: 100%; }
@media (min-width: 861px) { .lg-card { max-width: 760px; margin-left: auto; margin-right: auto; } }