/* 직업 선택·기술 도감: 기본 스타일 다음에 로드. */
#create-panel.panel.wide { min-width: 0; width: min(1100px, 94vw); max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
#job-picker-tools, .jp-browse-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0 12px; color: #d4c5b0; font-size: 12px; }
#job-picker-tools label { display: flex; gap: 6px; align-items: center; }
#job-picker-search { width: min(280px, 62vw); }
#job-picker-count { margin-left: auto; color: #bfae8c; }
#job-grid { grid-template-columns: repeat(5, minmax(0,1fr)); max-height: 38dvh; overflow-y: auto; padding: 3px; overscroll-behavior: contain; }
#job-grid .job-card { display: grid; grid-template-columns: 45px 1fr; text-align: left; align-content: start; gap: 3px 8px; min-width: 0; background: #130f1b; color: #e6d9c4; white-space: normal; }
#job-grid .job-card img { width: 45px; height: 55px; grid-row: span 2; margin: 0; }
#job-grid .job-card.sel { border-color: #e8bc64; background: #2d2238; box-shadow: inset 0 0 0 1px #e8bc64; }
#job-grid .job-card:focus-visible, .jp-tree-node:focus-visible { outline: 2px solid #9ad0ff; outline-offset: 2px; }
.jp-card-meta, .jp-card-summary { font-size: 11px; color: #c6b694; }
.jp-card-summary { grid-column: 1/-1; line-height: 1.45; color: #c7d8de; }
#job-detail { display: block; font-size: 12px; min-width: 0; }
.jp-overview { display: flex; gap: 12px; align-items: start; color: #cbbcaa; }
.jp-overview > img { width: 84px; height: 100px; flex: none; object-fit: cover; border-radius: 5px; }
#job-detail .jp-overview > img { width: 84px; height: 100px; }
.jp-overview > div { min-width: 0; }
.jp-overview h3 { color: #f6e2b8; margin: 0 0 4px; }
.jp-overview p { margin: 4px 0; line-height: 1.5; }
.jp-meta { color: #bfae8c; font-size: 11px; }
.jp-difference { color: #dcf0e3; }
.jp-passive { color: #edc575; }
.jp-motion { color: #b3d5ef; }
.jp-tree-details { margin: 10px 0; border-top: 1px solid #45334f; padding-top: 8px; }
.jp-tree-details summary { cursor: pointer; color: #edc575; padding: 4px 0 8px; }
.jp-tree-root { max-width: 330px; margin-bottom: 8px; }
.jp-branches { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.jp-branch { border-left: 2px solid #584365; padding-left: 8px; min-width: 0; }
.jp-tier { color: #bfae8c; font-size: 11px; padding: 5px 0; }
.jp-tree-node { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 8px; border: 1px solid #45334f; border-radius: 5px; background: #191220; color: #e6d9c4; font-size: 12px; white-space: normal; }
.jp-tree-node b, .jp-tree-node small, .jp-tree-node span { display: block; }
.jp-tree-node b { color: #f6e2b8; }
.jp-tree-node small { color: #bfae8c; margin: 4px 0; }
.jp-tree-node span { line-height: 1.45; color: #c3d8db; font-size: 11px; }
.jp-tree-node.is-current { border-color: #e8bc64; background: #322638; }
.jp-awaken-pair { display: grid; gap: 6px; }
.jp-empty { color: #c6b694; grid-column: 1/-1; }
.jp-choices { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.jp-choice { border: 1px solid #4c3958; border-radius: 7px; padding: 12px; min-width: 0; font-size: 12px; color: #cbbcaa; }
.jp-choice .jp-overview { display: block; }
.jp-choice .jp-overview > img { float: right; margin-left: 8px; width: 66px; height: 80px; }
.jp-choice > button { width: 100%; margin-top: 10px; white-space: normal; }
.jp-conditions { border: 1px solid #65512f; background: #201c19; color: #e4c486; padding: 10px; margin-bottom: 10px; font-size: 12px; line-height: 1.6; }
.jp-browse-tools select { max-width: 100%; }
.jp-skill-list { margin-top: 12px; }
.jp-skill-list .skill-row .body { min-width: 0; }
.jp-skill-list .skill-row .motion { white-space: pre-line; }
.jp-skill-status { display: inline-block; color: #acddba; margin: 4px 0; }
.jp-skill-list .skill-row.locked { opacity: .8; }
@media (max-width: 850px) { #job-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .jp-branches { grid-template-columns: 1fr; } .jp-awaken-pair { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 540px) { #create-panel.panel.wide { padding: 12px; max-height: 92dvh; } #job-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 32dvh; } #create-panel > .row { flex-wrap: wrap; position: sticky; bottom: -12px; padding: 8px 0; background: #17111f; z-index: 1; } #create-panel > .row input { min-width: 100px; } #job-picker-count { margin-left: 0; } .jp-skill-list .skill-row { flex-wrap: wrap; } .jp-skill-list .skill-row .body { flex-basis: calc(100% - 62px); } .jp-skill-list .skill-row .assign { width: auto; padding-left: 58px; } .jp-choices { grid-template-columns: 1fr; } }

/* 기술·전직·각성 비교만 넓게, 다른 가방/장비 창 폭은 유지한다. */
#win.job-window { width: min(1100px, 94vw); max-width: 94vw; }
#win.job-window #win-body { min-height: 0; overscroll-behavior: contain; }