.cn-panel { color: #e9e3d6; padding: 12px 4px 30px; }
.cn-header { max-width: 820px; margin-bottom: 22px; }
.cn-panel h2 { font-size: clamp(24px, 3vw, 34px); margin: 8px 0 12px; }
.cn-panel h3 { font-size: 19px; margin: 5px 0 12px; color: #e6ce91; }
.cn-panel h4 { margin: 0 0 14px; }
.cn-panel p { line-height: 1.75; }
.cn-eyebrow { color: #c5a66c; font-size: 12px; letter-spacing: .06em; margin: 0 0 6px; }
.cn-muted, .cn-panel small { color: #b0ada4; font-size: 13px; }
.cn-panel button { font: inherit; color: inherit; }
.cn-panel button:hover { border-color: #dbc185; }
.cn-panel :focus-visible { outline: 2px solid #f1d38e; outline-offset: 4px; }
.cn-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.cn-chain { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); align-items: stretch; gap: 5px; }
.cn-node { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #4f5053; border-radius: 10px; background: #171d26; text-align: left; cursor: pointer; min-height: var(--m-touch); transition: border-color .15s, background .15s; }
.cn-node > span { display: flex; align-items: center; gap: 10px; }
.cn-node strong { font-size: 14px; line-height: 1.6; }
.cn-node em { font-size: 11px; font-style: normal; color: #bfae86; }
.cn-node[aria-pressed="true"] { border-color: #d1b575; background: #2b2922; box-shadow: inset 0 -3px #c4a562; }
.cn-condition { background: #192722; border-color: #446759; }
.cn-condition[data-state="unrelated"] { background: #242329; border-color: #5b5058; }
.cn-condition[data-state="unknown"] { background: #302a20; border-color: #756446; }
.cn-arrow { display: flex; align-items: center; justify-content: center; color: #8ec6af; font-size: 23px; }
.cn-arrow[data-state="unrelated"] { color: #776b75; }
.cn-arrow[data-state="unknown"] { color: #c8ac76; }
.cn-current { margin-top: 16px; padding: 17px 20px; border-left: 3px solid #90bca9; background: #17241f; border-radius: 0 8px 8px 0; }
.cn-current[data-state="unrelated"] { border-color: #b699a0; background: #292127; }
.cn-current[data-state="unknown"] { border-color: #cfb472; background: #2b261d; }
.cn-current > p { font-size: 13px; color: #c9c6bf; margin: 7px 0 0; }
.cn-fixes, .cn-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cn-fixes { margin-top: 12px; }
.cn-fix, .cn-next { padding: 9px 13px; border: 1px solid #776b50; background: #242521; border-radius: 6px; cursor: pointer; min-height: var(--m-touch); text-align: left; font-size: 12px !important; }
.cn-workspace { margin-top: 24px; padding: 22px; border: 1px solid #595346; border-radius: 12px; background: #141a22; }
.cn-work-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.cn-intro { color: #d0c8b7; margin: 8px 0 20px; font-size: 14px; }
.cn-work-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.cn-options { display: grid; gap: 9px; }
.cn-option { min-width: 0; }
.cn-choice { display: flex; align-items: center; gap: 12px; padding: 13px; width: 100%; color: inherit; text-align: left; background: #1e242e; border: 1px solid #434850; border-radius: 8px; cursor: pointer; min-height: var(--m-touch); }
.cn-choice > span:not(.cn-badge) { flex: 1; min-width: 0; }
.cn-choice strong { display: block; margin-bottom: 6px; font-size: 14px; }
.cn-choice small { display: block; line-height: 1.65; }
.cn-choice[aria-pressed="true"] { border-color: #d1b575; background: #2b2d27; }
.cn-badge { display: inline-block; font-size: 11px; line-height: 1.5; padding: 4px 8px; border-radius: 5px; white-space: normal; }
.cn-conditional { color: #b7e1cf; background: #233c34; }
.cn-unrelated { color: #bcbcc5; background: #303039; }
.cn-unknown { color: #edd397; background: #413921; }
.cn-context { padding: 20px; border-radius: 8px; background: #10161e; }
.cn-context p { font-size: 13px; }
.cn-assumption { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; margin-bottom: 20px; }
.cn-assumption select { padding: 9px 12px; min-height: var(--m-touch); color: #e9e3d6; background: #10141b; border: 1px solid #696454; border-radius: 5px; }
.cn-build { margin-top: 22px; padding: 22px; border: 1px solid #44474c; border-radius: 10px; background: #151a22; }
.cn-build-parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin: 20px 0; }
.cn-build-parts > div { border-left: 2px solid #625a47; padding-left: 16px; }
.cn-build-parts p { font-size: 13px; }
.cn-panel a { color: #e1c783; font-size: 13px; }
.cn-evidence { margin-top: 22px; color: #b0ada4; font-size: 13px; line-height: 1.7; }
.cn-evidence summary { cursor: pointer; padding: 10px 0; min-height: var(--m-touch); box-sizing: border-box; }
.cn-trace { margin: 22px 0; padding: 24px; border: 1px solid #555444; border-radius: 10px; background: #141b22; }
.cn-trace h3 { margin: 0; }
.cn-trace-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 22px 0; }
.cn-trace-controls label { display: grid; gap: 8px; font-size: 13px; min-width: 0; }
.cn-trace-controls select { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--m-touch); padding: 10px; border: 1px solid #696454; border-radius: 5px; color: #e9e3d6; background: #10141b; }
.cn-events { list-style: none; margin: 26px 0 0; padding: 0; }
.cn-events li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; position: relative; padding: 0 0 24px; }
.cn-events li:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: #465b55; }
.cn-event-dot { width: 16px; height: 16px; border: 2px solid #85bba6; border-radius: 50%; background: #233c34; box-sizing: border-box; margin-top: 3px; }
.cn-events [data-state="unknown"] .cn-event-dot { border-color: #dec787; background: #413921; }
.cn-events [data-state="unrelated"] .cn-event-dot { border-color: #a8a8b3; background: #303039; }
.cn-events small { display: block; color: #a8afa9; margin-bottom: 6px; }
.cn-events strong { display: block; font-size: 16px; }
.cn-events p { margin: 7px 0 0; font-size: 13px; }
.cn-trace pre, .cn-trace code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.cn-trace pre { padding: 12px; background: #10141b; border-radius: 5px; }
.cn-abilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; align-items: start; }
.cn-power-card { min-width: 0; padding: 15px; border: 1px solid #454c54; border-radius: 10px; background: #151c25; }
.cn-power-card > h3 { font-size: 13px; margin: 0 0 14px; color: #bea779; }
.cn-power { min-width: 0; overflow-wrap: anywhere; }
.cn-power .tt, .cn-power .st { width: auto; max-width: 100%; padding: 0; border: 0; border-image: none; background: none; box-shadow: none; }
.cn-power .tt-name { font-size: 19px; margin: 0; }
.cn-power .st-name { font-size: 19px; }
.cn-power .tt-head, .cn-power .tt-body { padding: 12px; }
.cn-power .tt-icon { width: 52px; height: 52px; }
.cn-power .tt-effect { font-size: 13px; line-height: 1.75; }
.cn-power .cn-power-connection { margin: 0 0 14px; font-size: 13px; color: #d2dbc9; }
.cn-power .tt-body, .cn-power .st-body { font-size: 13px; line-height: 1.75; }
.cn-power .tt-flavor, .cn-power .tt-acq, .cn-power .tt-foot { font-size: 12px; }
.cn-power .cn-power-note { font-size: 11px; color: #b0ada4; line-height: 1.6; margin-bottom: 0; }
.cn-damage { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #444c54; font-size: 13px; }
.cn-damage > div { margin: 0 0 8px; }
.cn-damage dt { color: #b0ada4; font-size: 12px; }
.cn-damage dd { margin: 3px 0 0; color: #efddb5; }
.cn-ability-detail { margin: 0 5px; border: 1px solid #434850; border-top: 0; border-radius: 0 0 8px 8px; background: #151b23; }
.cn-ability-detail > summary { cursor: pointer; padding: 10px 14px; min-height: var(--m-touch); box-sizing: border-box; color: #d0bb91; font-size: 13px; }
.cn-ability-detail > .cn-power { padding: 5px 16px 16px; }
.cg-equipment { margin: 24px 0; }
.cg-equipment-head { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; }
.cg-equipment-head > span { color: #b0ada4; font-size: 13px; }
.cg-gear-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.cg-gear-card { min-width: 0; border: 1px solid #454c54; border-radius: 10px; background: #151c25; overflow: hidden; }
.cg-gear-card[data-selected="true"] { border-color: #bea66d; }
.cg-gear-card .cn-choice { border: 0; border-radius: 0; }
.cg-gear-description { padding: 0 14px 10px; }
.cg-gear-description p { font-size: 12px; }
.cg-gear-description .cg-preview { border-top: 1px solid #454c54; padding-top: 10px; color: #cebe98; }
.cg-spells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.cg-spell-select { display: grid; gap: 10px; font-size: 14px; color: #d9c799; }
.cg-spell-select select { width: 100%; min-width: 0; padding: 10px; min-height: var(--m-touch); background: #10141b; color: #e9e3d6; border: 1px solid #696454; border-radius: 5px; }
.cg-spells .cn-ability-detail { margin-top: 12px; border-top: 1px solid #434850; border-radius: 8px; }
.cg-diff { padding: 18px 22px; border: 1px solid #a69a71; border-radius: 8px; background: #252920; font-size: 13px; }
.cg-diff p { margin: 8px 0; }
.cg-diff ul { margin: 0; padding-left: 18px; line-height: 1.8; }
.cg-cascade { overflow: hidden; }
.cg-tree, .cg-tree ul { list-style: none; margin: 0; padding: 0; }
.cg-tree ul { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-left: 18px; border-left: 2px solid #4b7767; }
.cg-tree li { min-width: 0; flex: 1 1 220px; }
.cg-tree > li { width: 100%; }
.cg-event { padding: 14px 16px; border: 1px solid #4b7767; border-radius: 8px; background: #16251f; }
.cg-event[data-state="unrelated"] { border-color: #5c565f; background: #242129; }
.cg-event[data-state="unknown"] { border-color: #8e7951; background: #30291d; }
.cg-event small { display: block; margin-bottom: 7px; }
.cg-event strong { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.cg-event .cn-icon { width: 30px; height: 30px; }
.cg-event p { font-size: 13px; margin: 8px 0 0; }
.cg-handoff { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 20px 0; }
.cg-handoff .cn-actions { margin-top: 10px; }
@media(max-width: 900px) {
  .cn-abilities { grid-template-columns: 1fr; }
  .cn-chain { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  .cn-chain > .cn-arrow:nth-child(4) { display: none; }
  .cn-work-body { grid-template-columns: 1fr; }
}
@media(max-width: 620px) {
  .cg-spells, .cg-gear-grid { grid-template-columns: 1fr; }
  .cg-tree ul { padding-left: 7px; gap: 10px; }
  .cg-event { padding: 12px; }
  .cg-diff { padding: 14px; }
  .cn-trace { padding: 15px; }
  .cn-trace-controls { grid-template-columns: 1fr; }
  .cn-chain { grid-template-columns: 1fr; gap: 4px; }
  .cn-chain > .cn-arrow:nth-child(4) { display: flex; }
  .cn-arrow { height: 19px; transform: rotate(90deg); }
  .cn-node { padding: 12px 14px; gap: 6px; }
  .cn-node > span { justify-content: flex-start; }
  .cn-node .cn-icon { width: 30px; height: 30px; }
  .cn-node em { align-self: flex-end; }
  .cn-workspace, .cn-build { padding: 15px; }
  .cn-work-head { align-items: flex-start; }
  .cn-next { max-width: 55%; }
  .cn-choice { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
  .cn-choice .cn-badge { grid-column: 2; justify-self: start; }
  .cn-build-parts { grid-template-columns: 1fr; }
}

/* 한 행동의 확률과 장비 교체를 같은 조건에서 비교한다. */
.ce-panel{margin:1.6rem 0;padding:1.4rem;border:1px solid var(--gold-dim,#75603a);border-radius:12px;background:rgba(150,128,80,.045);scroll-margin-top:5rem}
.ce-panel h3{font-size:1.35rem;margin:.4rem 0 .8rem}.ce-panel header p{line-height:1.7}
.ce-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin:1rem 0}
.ce-fields label{display:flex;flex-direction:column;gap:.5rem;font-size:.83rem;color:var(--muted,#b8b09f)}
.ce-fields input,.ce-fields select{width:100%;min-height:44px;min-height:var(--m-touch);padding:.55rem;border:1px solid #605c51;border-radius:6px;background:#202126;color:#ece4d3;font:inherit;box-sizing:border-box}
.ce-fields :is(input,select):focus-visible{outline:2px solid #d0ad68;outline-offset:2px}
.ce-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0}
.ce-metrics>div{display:flex;flex-direction:column;gap:.45rem;padding:1rem;background:#1c1d22;border-radius:8px}
.ce-metrics strong{font-size:2rem;font-variant-numeric:tabular-nums;color:#e0c386}.ce-metrics small,.ce-metrics span{font-size:.8rem;line-height:1.5;color:#c6bdac}
.ce-probability{display:flex;height:12px;border-radius:8px;overflow:hidden;margin:1rem 0}.ce-panel [data-ce-outcome="miss"]{background:#656774}.ce-panel [data-ce-outcome="hit"]{background:#ad965d}.ce-panel [data-ce-outcome="critical"]{background:#88b7b0}
.ce-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem}
.ce-table-wrap{overflow:auto}.ce-panel table{width:100%;border-collapse:collapse;text-align:left;font-size:.83rem;line-height:1.5}
.ce-panel th,.ce-panel td{padding:.7rem .6rem;border-bottom:1px solid #ffffff12}.ce-panel td{font-variant-numeric:tabular-nums;white-space:nowrap}.ce-panel caption{text-align:left;margin:.5rem 0;color:#c6bdac}
.ce-conditions{border-top:1px solid #ffffff19;margin-top:1rem;padding-top:1rem}.ce-panel summary,.ce-assumed-trace>summary{min-height:44px;min-height:var(--m-touch);padding:.5rem 0;box-sizing:border-box;cursor:pointer;line-height:1.5;color:#d9bd82}
.ce-notice{padding:1rem;border-left:3px solid #c8a362;background:#c8a36212;line-height:1.7}.ce-scope{border-top:1px solid #ffffff19;padding-top:1rem;color:#b9b09e;font-size:.8rem;line-height:1.7}
.ce-assumed-trace{margin:1.5rem 0;padding:1rem;border:1px solid #ffffff19;border-radius:8px}
@media(max-width:620px){.ce-panel{padding:.9rem}.ce-metrics{grid-template-columns:1fr}.ce-metrics>div{display:grid;grid-template-columns:1fr auto;align-items:center}.ce-metrics span{grid-column:1/-1}.ce-panel th,.ce-panel td{padding:.6rem .4rem}.ce-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 처음에는 선택과 결과를 함께 보고, 계산 조건은 필요할 때 펼친다. */
.cx-start { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; padding: 20px 24px; margin-bottom: 28px; border: 1px solid #8e7950; border-radius: 10px; background: #27261f; }
.cx-start > div:first-child { flex: 1 1 320px; }
.cx-start strong { color: #ead49f; }
.cx-start p { margin: 8px 0; font-size: 14px; }
.cx-start .cn-actions { align-items: stretch; }
.cn-fix.cx-primary { background: #c7ad73; border-color: #d6be8c; color: #17191d; font-weight: 700; }
.cx-workbench { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.cx-choices { min-width: 0; }
.cx-choices .cg-spells { display: block; margin: 0; }
.cx-choices .cg-gear-grid { grid-template-columns: 1fr; gap: 10px; }
.cx-choices .cn-choice { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
.cx-choices .cn-choice .cn-icon { width: 36px; height: 36px; }
.cx-choices .cn-choice strong { margin: 2px 0 0; }
.cx-toggle { font-size: 11px; line-height: 1.6; color: #d6c498; white-space: nowrap; }
.cx-choices .cn-ability-detail { border: 0; border-top: 1px solid #ffffff12; margin: 0; }
.cx-choices .cn-ability-detail > summary { padding: 10px 12px; }
.cx-choices .cg-spells .cn-ability-detail { margin-top: 10px; }
.cx-show-results { margin-top: 12px; width: 100%; text-align: center; }
.cx-workbench > .ce-panel { margin: 0; min-width: 0; }
.cx-workbench .ce-panel header p { font-size: 13px; }
.cx-workbench .ce-metrics { gap: 8px; }
.cx-workbench .ce-metrics > div { padding: 12px; min-width: 0; }
.cx-workbench .ce-metrics strong { font-size: 27px; }
.ce-metrics .cx-before { color: #bdb3a0; font-variant-numeric: tabular-nums; }
.cx-chain-changes { margin: 18px 0; padding: 16px; border-left: 3px solid #85bba6; background: #17241f; border-radius: 0 8px 8px 0; }
.cx-chain-changes h4 { font-size: 14px; margin: 0; }
.cx-chain-changes p { margin: 6px 0 10px; }
.cx-chain-changes > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 7px 0; font-size: 13px; }
.cx-chain-changes strong { color: #bbd8c9; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media(max-width: 1100px) {
  .cx-workbench { grid-template-columns: 1fr; }
  .cx-choices .cg-gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 620px) {
  .cx-start { padding: 16px; }
  .cx-start .cn-actions, .cx-start .cn-fix { width: 100%; }
  .cx-choices .cg-gear-grid { grid-template-columns: 1fr; }
  .cx-workbench .ce-panel { scroll-margin-top: 220px; }
  .ce-metrics .cx-before { grid-column: 1; grid-row: 2; }
  .ce-metrics strong { grid-column: 2; grid-row: 1 / 3; }
}