#journal-dialog{width:1240px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 24px);padding:18px 22px;overflow:auto}
#journal-dialog .dialog-heading{margin:0 0 5px;align-items:center}
#journal-dialog .eyebrow{font-size:10px;margin:0 0 3px}
#journal-dialog h2{font-size:21px;margin:0}
#journal-origin{margin:0 0 10px;padding:7px 10px;font-size:11px;line-height:1.5}
#journal-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#journal-dialog .journal-block{margin:0;min-width:0;border:1px solid;border-radius:var(--r-lg);padding:10px 12px 12px}
#journal-dialog .block-0{grid-column:1/-1;background:var(--pastel-lime);border-color:var(--pastel-border)}
#journal-dialog .block-1{background:var(--pastel-sky);border-color:var(--pastel-border-sky)}
#journal-dialog .block-2{background:var(--pastel-pink);border-color:var(--pastel-border-pink)}
#journal-dialog legend{font-size:14px;padding:0 6px;display:flex;align-items:center;gap:7px}
#journal-dialog legend span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--ink-invert);font-size:11px}
.journal-form-row{display:grid;gap:8px;margin-top:3px;align-items:end}
.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.columns-5{grid-template-columns:1fr 1fr 1.6fr 1.1fr 1.3fr}
#journal-dialog .journal-form-row label,#journal-dialog .counselor-field>label{font-size:12px;line-height:1.4;margin:0;color:var(--ink-soft);font-weight:650}
#journal-dialog .journal-form-row input:not([type=checkbox]),#journal-dialog .journal-form-row select{width:100%;height:31px;min-width:0;padding:4px 7px;margin-top:3px;font-size:12px;border-radius:var(--r-xs);background:var(--bg-input);border:1px solid var(--line-strong)}
#journal-dialog .journal-form-row textarea{height:77px;min-height:50px;padding:6px 8px;margin-top:3px;font-size:12px;line-height:1.5;background:var(--bg-input);border:1px solid var(--line-strong);border-radius:var(--r-sm)}
#journal-dialog .journal-check{display:flex;align-items:center;gap:5px;min-height:31px;padding-bottom:5px;font-size:11px;white-space:normal}
#journal-dialog .journal-check input{width:15px;height:15px;margin:0;flex:none}
.counselor-controls{display:flex;gap:4px;align-items:end}.counselor-controls select{flex:1;width:0!important}.counselor-controls button{width:29px;height:31px;padding:0;border:1px solid var(--line-strong);background:var(--bg-sunken);border-radius:var(--r-xs);font-size:18px;flex:none}
#journal-dialog .block-2 .columns-3{grid-template-columns:.8fr 1.8fr 1fr}
#journal-dialog .form-footer{position:static;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px 0 0;margin:8px 0 0;gap:10px}
#journal-dialog .form-footer span{font-size:10px}#journal-dialog .form-footer .button{padding:8px 16px;font-size:13px}
#journal-source{margin-top:8px;font-size:11px}#journal-source-text{max-height:160px;overflow:auto}#journal-error:empty{display:none}#journal-error{margin:5px 0;font-size:12px}
#counselor-dialog{width:440px;max-width:calc(100vw - 32px);background:var(--bg-card);border-radius:var(--r-2xl);padding:24px}#counselor-dialog h2{margin:0 0 16px;font-size:20px}#counselor-dialog label{margin:12px 0}#counselor-dialog .muted{font-size:12px}.counselor-actions{display:flex;justify-content:space-between;gap:10px}
#journal-stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.journal-stat{border:0;border-radius:var(--r-xl);padding:18px;text-align:left;display:flex;flex-direction:column;gap:7px;color:var(--pastel-ink);background:var(--pastel-butter);box-shadow:var(--shadow-soft)}.journal-stat:nth-child(2){background:var(--pastel-sky)}.journal-stat:nth-child(3){background:var(--pastel-mint)}.journal-stat:nth-child(4){background:var(--pastel-peach)}.journal-stat:nth-child(5){background:var(--pastel-lavender)}.journal-stat:nth-child(6){background:var(--pastel-pink)}.journal-stat strong{font-size:30px}.journal-stat small{font-size:11px}.journal-stat:hover{outline:2px solid var(--focus)}
.journal-calendar-note{display:block;margin-top:6px;font-size:11px;color:var(--ink-muted)}.pickup-due{color:var(--st-issue-fg);font-weight:700}
/* 회수요청일 뒤에 붙는 회수 확인 예정일. 날짜 본체보다 흐리게 두어 헷갈리지 않게 한다. */
.pickup-due-inline{margin-left:2px;color:var(--ink-soft);white-space:nowrap}
#journal-stats{margin-bottom:12px}#journal-stats .journal-stat{padding:13px 16px;gap:3px}#journal-stats strong{font-size:29px;margin:3px 0;line-height:1.1}#journal-stats small{font-size:10px;line-height:1.4}/* 여섯 칸이 좋은지라 상자 이름은 단어 단위로만 줄을 넘기게 합니다. */#journal-stats span{font-size:13px;line-height:1.35;word-break:keep-all}#journal-page .page-heading{margin-bottom:16px}.journal-brandbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.journal-brandbar{justify-content:space-between}#journal-brand-buttons{display:flex;gap:7px}.brand-filter{border:1px solid var(--line);background:var(--bg-card);border-radius:var(--r-pill);padding:8px 16px;color:var(--ink-soft)}.brand-filter:hover{background:var(--bg-hover)}.brand-filter.active{background:var(--ink);color:var(--ink-invert);border-color:var(--ink)}
.journal-table-wrap{max-height:65vh;overflow:auto}.journal-table{width:max-content;min-width:100%;table-layout:fixed}.journal-table th{position:sticky;top:0;z-index:2;background:var(--bg-sunken);color:var(--ink-soft)}.journal-table td,.journal-table th{min-width:120px;max-width:250px;border-right:1px solid var(--line-soft)}.journal-table td{background:var(--bg-card);color:var(--ink)}.journal-table td:first-child,.journal-table th:first-child{position:sticky;left:0;z-index:1;min-width:115px}.journal-table th:first-child{z-index:3}.journal-table .field-product{min-width:210px}.journal-table .field-summary,.journal-table .field-memo{min-width:250px;white-space:pre-wrap}.journal-table .field-status span{display:block;font-weight:700}.journal-open{display:block;margin-top:8px;padding:0;font-size:11px}.journal-table tr.journal-completed td{background:var(--tint-done);color:var(--ink-soft)}.journal-table td[data-edit-key]{cursor:cell}.journal-table td[data-edit-key]:hover{box-shadow:inset 0 0 0 2px var(--accent)}.journal-table td:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.journal-table td.inline-active{min-width:210px;box-shadow:inset 0 0 0 2px var(--focus)}.inline-active input,.inline-active select,.inline-active textarea{width:100%;min-width:160px;font-size:13px;padding:7px}.inline-actions{display:flex;gap:6px;margin-top:6px}.inline-actions button{padding:5px 9px;background:var(--bg-sunken);color:var(--ink-soft);border:0;border-radius:var(--r-pill)}.inline-error{color:var(--st-issue-fg);white-space:normal;display:block}
.journal-manager{width:620px;max-width:calc(100vw - 32px);max-height:85vh;overflow:auto;padding:25px;background:var(--bg-card);border-radius:var(--r-2xl)}.journal-manager h2{margin-top:0}.journal-manager p{font-size:12px;color:var(--ink-muted)}.journal-manager form{display:grid;gap:10px}.journal-manager textarea{width:100%}#catalog-list{max-height:300px;overflow:auto;margin:15px 0}#catalog-list section{padding:12px;border:1px solid var(--line);border-radius:var(--r-md);margin:7px 0}#catalog-list button{margin:4px;padding:5px 9px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-sunken)}.dialog-tools{display:flex;gap:20px;justify-content:flex-end;margin:3px 0 7px;font-size:11px}.dialog-tools button{font-size:11px;padding:0}
/* 1280px 안팔에서도 여섯 칸이 읽힐 만큼 여백과 글자를 줄입니다. */
@media(max-width:1380px){#journal-stats{gap:9px}#journal-stats .journal-stat{padding:12px 11px}#journal-stats strong{font-size:25px}#journal-stats span{font-size:12px}}
@media(max-width:950px){#journal-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.journal-stat{padding:12px}.journal-stat strong{font-size:25px}}
@media(max-width:850px){#journal-dialog{padding:12px;max-width:calc(100vw - 16px)}#journal-fields{grid-template-columns:1fr}.columns-5{grid-template-columns:repeat(3,minmax(0,1fr))}#journal-dialog .journal-block{padding:8px 10px}#journal-dialog .journal-form-row textarea{height:56px}}
@media(max-width:520px){.columns-3,.columns-4,.columns-5{grid-template-columns:repeat(2,minmax(0,1fr))}#journal-dialog .block-2 .columns-3{grid-template-columns:1fr 1fr}#journal-dialog .form-footer span{display:none}}
.auto-dot{display:inline-block;color:var(--dot-auto);font-size:9px;line-height:1;vertical-align:middle;margin-right:5px}.auto-legend{font-size:11px;color:var(--ink-muted);margin:8px 0 12px}
.card-reminder button{display:block;margin-top:5px;font-size:11px}
.journal-cell-item .cell-item-label{white-space:nowrap}.journal-table .journal-cell-item .auto-dot{display:inline;white-space:nowrap}.journal-cell-item.field-receipt_date .cell-item-value,.journal-cell-item.field-purchase_date .cell-item-value,.journal-cell-item.field-pickup_requested .cell-item-value,.journal-cell-item.field-pickup_date .cell-item-value,.journal-cell-item.field-reship_date .cell-item-value{white-space:nowrap}
.journal-table{width:100%;min-width:1550px;table-layout:auto}.journal-table td{padding:12px 10px}.journal-table .journal-group-4{min-width:205px}.journal-table .journal-group-5{min-width:195px}.journal-table .journal-group-8{min-width:230px}.journal-cell-item{display:block;padding:3px 4px;margin:0 0 3px;border:1px solid transparent;border-radius:var(--r-xs);cursor:cell;overflow-wrap:anywhere}.journal-cell-item:hover{background:var(--bg-hover);border-color:var(--line-strong)}.journal-cell-item:focus-visible{outline:2px solid var(--focus);outline-offset:-1px}.cell-item-label{font-size:10px;color:var(--ink-muted);margin-right:6px}.cell-item-value{font-size:12px;line-height:1.55;color:var(--ink);white-space:pre-wrap}.journal-cell-item.field-product .cell-item-value,.journal-cell-item.field-summary .cell-item-value,.journal-cell-item.field-memo .cell-item-value{display:block}.journal-cell-item.field-nickname .cell-item-value,.journal-cell-item.field-status .cell-item-value{font-weight:700}.journal-table .journal-cell-item.field-summary,.journal-table .journal-cell-item.field-memo,.journal-table .journal-cell-item.field-product{min-width:0}.journal-table .field-status span{display:inline}.journal-cell-item.inline-active{border-color:var(--focus);background:var(--bg-hover);min-width:170px}.journal-cell-item.inline-active input,.journal-cell-item.inline-active select,.journal-cell-item.inline-active textarea{min-width:0;width:100%;font-size:12px;padding:5px}.journal-cell-item .inline-error{white-space:normal}.journal-table tr.journal-completed .journal-cell-item:hover{background:var(--tint-done-hover)}.journal-cell-item .brand-logo{width:18px;height:18px}
.sidebar-divider{border:0;border-top:1px solid var(--side-line);margin:15px 4px 13px;grid-column:1/-1}.sidebar-brand-space{padding:0 4px 6px;grid-column:1/-1}.sidebar-brand-space .brand-select-label{margin:0 0 5px}.sidebar-brand-space .brand-select-wrap{margin:0 0 3px}
.cj-tracking-button{background:var(--pastel-mint);color:var(--ok-fg);border-color:transparent}.cj-tracking-button:hover{background:#c2e5d3}.logo-choose-button{background:var(--bg-sunken);color:var(--ink-soft);border:1.5px dashed var(--line-strong);min-height:52px;border-radius:var(--r-lg)}.logo-choose-button:hover{background:var(--bg-hover)}#brand-logo-file[hidden]{display:none}#brand-logo-filename{overflow-wrap:anywhere}
.journal-table-wrap{display:block}#journal-cards{display:none}.journal-card{min-width:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg-card);overflow:hidden;box-shadow:var(--shadow-soft)}.journal-card>header{display:flex;align-items:center;gap:18px;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--bg-sunken);flex-wrap:wrap}.card-status{min-width:110px}.card-status .journal-open{margin-top:3px}.card-brand{display:flex;gap:8px;align-items:center}.card-brand small{color:var(--ink-muted)}.card-reminder{margin-left:auto;font-size:11px}.card-reminder strong{display:block;margin-top:4px}.journal-card-blocks{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.card-block{min-width:0;border:1px solid var(--line);border-radius:var(--r-md);padding:9px 10px;background:var(--bg-sunken)}.card-block-0{grid-column:1/-1}.card-block-1{background:#eef5fb;border-color:#d7e5f2}.card-block-2{background:#fdf1f5;border-color:#f2dbe4}.card-block h3{font-size:12px;margin:0 0 7px;color:var(--ink-soft)}.card-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.card-block-0 .card-fields{grid-template-columns:repeat(4,minmax(0,1fr))}.journal-card-field{min-width:0;padding:5px 7px;border:1px solid transparent;border-radius:5px;cursor:cell}.journal-card-field:hover{border-color:var(--line-strong);background:var(--bg-hover)}.journal-card-field:focus-visible{outline:2px solid var(--focus)}.card-field-title{font-size:10px;color:var(--ink-muted);margin-bottom:4px;line-height:1.4}.card-field-value{font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);min-height:18px}.field-summary,.field-memo{grid-column:1/-1}.card-fields .field-product{grid-column:auto}.journal-card .inline-active{background:var(--bg-hover);border:1px solid var(--focus)}.journal-card .inline-active input,.journal-card .inline-active select,.journal-card .inline-active textarea{min-width:0;width:100%;max-width:100%;font-size:12px;padding:5px}.journal-card .inline-error{font-size:11px}.journal-card .inline-actions{flex-wrap:wrap}.journal-card.journal-completed{background:var(--tint-done);border-color:#cde5d6}.journal-card.journal-completed>header{background:var(--tint-done-hover)}.journal-card.journal-completed .card-block{background:#eaf6ef;border-color:#d4e9dc}
.brand-logo{width:22px;height:22px;border-radius:var(--r-xs);object-fit:contain;flex:none;vertical-align:middle;background:var(--bg-card)}.brand-logo-placeholder{display:inline-grid;place-items:center;background:var(--pastel-mint);color:var(--st-done-fg);font-size:11px;font-weight:750}.brand-badge{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;max-width:100%}.brand-badge>span:last-child{overflow-wrap:anywhere}.brand-select-wrap{display:flex;align-items:center;gap:5px;min-width:0}.brand-select-wrap select{min-width:0;flex:1}.select-brand-icon{display:inline-flex;align-items:center}.select-brand-icon:empty{display:none}.sidebar .brand-select-wrap{margin-bottom:5px}.sidebar .brand-logo{width:20px;height:20px}body .sidebar #brand-select{height:26px;padding:0 8px;font-size:12px;line-height:24px;margin:0;border-radius:var(--r-xs)}#sidebar-brand-logo{color:var(--side-dim);font-size:10px;padding:2px 0;text-align:left;margin-bottom:7px}.brand-card>.brand-logo{width:42px;height:42px}.channel-matrix .brand-logo,.attention-brand .brand-logo{width:18px;height:18px}h1 .brand-logo{width:28px;height:28px}#brand-logo-preview{padding:15px;background:var(--bg-sunken);border-radius:var(--r-lg)}#brand-logo-preview .brand-logo{width:70px;height:70px}.logo-actions{display:flex;gap:8px;flex-wrap:wrap}#journal-dialog .brand-select-wrap>select{width:0;flex:1}#journal-origin .brand-logo{width:16px;height:16px}.brand-filter .brand-logo{width:18px;height:18px}
@media(max-width:1000px){.journal-card-blocks{grid-template-columns:1fr}.card-block-0 .card-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.card-block-0 .card-fields,.card-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.journal-card>header{gap:10px;padding:10px}.journal-card-blocks{padding:8px}.card-reminder{margin-left:0}.brand-filter{padding:6px 9px;font-size:12px}}
@media(min-width:851px){#journal-dialog .journal-form-row input:not([type=checkbox]),#journal-dialog .journal-form-row select{height:28px;margin-top:2px}#journal-dialog .journal-form-row{margin-top:1px}#journal-dialog .journal-block{padding:7px 10px 8px}#journal-dialog .journal-form-row textarea{height:58px}#journal-origin{padding:5px 8px;margin-bottom:6px}#journal-dialog .counselor-controls button{height:28px}.dialog-tools{margin:0 0 4px}}
.journal-table{min-width:1190px;table-layout:fixed}
.journal-table th,.journal-table td{min-width:0;max-width:none;padding:8px 6px;font-size:11px;vertical-align:top}
.journal-table th{font-weight:750}
.journal-table th:first-child,.journal-table td:first-child{min-width:0;width:88px}
.journal-table th:nth-child(2){width:135px}.journal-table th:nth-child(3){width:135px}.journal-table th:nth-child(4){width:85px}.journal-table th:nth-child(5){width:150px}.journal-table th:nth-child(6){width:165px}.journal-table th:nth-child(7){width:105px}.journal-table th:nth-child(8){width:120px}.journal-table th:nth-child(9){width:150px}.journal-table th:nth-child(10){width:65px}
.journal-table .journal-group-4,.journal-table .journal-group-5,.journal-table .journal-group-8,.journal-table td:nth-child(9){min-width:0}
.journal-table .journal-cell-item{padding:2px 1px;margin:0 0 2px;line-height:1.45}
/* 항목 이름은 색을 빼고 조금 가늘게, 적힌 내용은 진하고 굵게 — 한눈에 갈린다. */
.journal-table .cell-item-label{font-size:10px;font-weight:600;color:var(--journal-label);letter-spacing:-0.01em;margin-right:4px}
.journal-table .cell-item-value{font-size:11px;line-height:1.45;color:var(--journal-value);font-weight:500}
.journal-table .field-nickname .cell-item-value{font-weight:400}
.auto-dot,.journal-table .journal-cell-item .auto-dot{display:inline-block!important;width:3px;height:3px;font-size:0!important;background:var(--dot-auto);border-radius:50%;margin-right:3px;vertical-align:middle}
.journal-table .journal-cell-item .manual-dot{display:inline-block;width:3px;height:3px;font-size:0;background:var(--dot-manual);border-radius:50%;margin-right:3px;vertical-align:middle}
.journal-table .field-status .journal-status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:10px;font-weight:700;line-height:1.4}
/* 상태 알약 - 파스텔 채움, 글자 대비 6:1 이상 (토큰 주석 참고) */
.journal-status-pill.pending{background:var(--st-pending-bg);color:var(--st-pending-fg)}.journal-status-pill.progress{background:var(--st-progress-bg);color:var(--st-progress-fg)}.journal-status-pill.repair{background:var(--st-repair-bg);color:var(--st-repair-fg)}.journal-status-pill.issue{background:var(--st-issue-bg);color:var(--st-issue-fg)}.journal-status-pill.done{background:var(--st-done-bg);color:var(--st-done-fg)}
.journal-table .journal-check-item{display:flex;align-items:center;justify-content:space-between;gap:4px;cursor:pointer;min-height:22px}
.journal-check-item input[type=checkbox]{width:13px;height:13px;min-width:13px;margin:0;accent-color:var(--check);cursor:pointer}
.journal-table .journal-check-item .cell-item-label{white-space:normal}
.journal-table .journal-open,.journal-table td .text-button,.journal-table td>small{font-size:10px}
.journal-table .journal-open{margin-top:5px}
.journal-table .journal-cell-item.inline-active{min-width:0;padding:3px}
.journal-table .inline-active input,.journal-table .inline-active select,.journal-table .inline-active textarea{box-sizing:border-box;min-width:0;width:100%;height:25px;min-height:0;font-size:11px;padding:2px 4px;border-radius:4px}
.journal-table .inline-active textarea{height:55px}
.journal-table .inline-actions{gap:3px;margin-top:3px;flex-wrap:wrap}
.journal-table .inline-actions button{font-size:10px;line-height:1.4;padding:2px 5px;min-height:21px}
.journal-table .inline-error{font-size:10px}
.journal-table .brand-badge{gap:3px}.journal-table .brand-logo{width:14px;height:14px}
.journal-table{min-width:2100px}
.journal-table th:nth-child(2){width:215px}.journal-table th:nth-child(3){width:215px}.journal-table th:nth-child(4){width:160px}.journal-table th:nth-child(5){width:250px}.journal-table th:nth-child(6){width:275px}.journal-table th:nth-child(7){width:115px}.journal-table th:nth-child(8){width:215px}.journal-table th:nth-child(9){width:470px}.journal-table th:nth-child(10){width:75px}
.journal-cell-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;align-items:start}
.journal-group-0 .journal-cell-grid,.journal-group-6 .journal-cell-grid{grid-template-columns:1fr;gap:3px}
.journal-group-8 .journal-cell-grid{grid-template-columns:2fr 1fr}
.journal-table .journal-cell-grid .journal-cell-item{min-width:0;margin:0;grid-column:auto}
.journal-table .journal-cell-grid .cell-item-label{display:block;margin:0 0 2px}
.journal-table .journal-cell-grid .cell-item-value{display:block;line-height:1.4}
.journal-table .journal-check-item .cell-item-label{margin:0}
.journal-table .journal-group-5>small{display:block;margin-top:6px}
.journal-table .journal-cell-grid .inline-active{grid-column:auto}
/* 탭(CS 접수목록·입고알림)과 검색·필터를 한 줄에 둔다.
   화면이 좁아지면 필터가 아래로 내려가고, 더 좁아지면 각 칸이 한 줄씩 차지한다. */
.journal-tabline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 14px;padding-bottom:8px}
.journal-tabline .journal-tabs{border:0;margin:0;padding:0;flex:none}
.journal-tabline .journal-filters{flex:1;min-width:0;gap:7px;align-items:center;justify-content:flex-end}
/* 한 줄에 들어가도록 칸을 작게 줄인다. 날짜 칸의 '접수일 시작/종료' 글자는 자리만 차지해
   placeholder 와 title 로 옮기고, 화면에서는 아이콘과 값만 남긴다. */
.journal-tabline .journal-filters>input{flex:1 1 150px;min-width:110px;max-width:260px;font-size:13px;padding:7px 11px}
.journal-tabline .journal-filters select{font-size:13px;padding:7px 9px;max-width:120px}
.journal-tabline .journal-filters label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-muted);white-space:nowrap}
.journal-tabline .journal-filters label input{margin-top:0;font-size:12px;padding:6px 7px;width:132px}
@media(max-width:1100px){.journal-tabline .journal-filters{justify-content:flex-start}}
.journal-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 16px;padding-bottom:8px}.journal-tabs button{border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 22px;background:var(--bg-card);color:var(--ink-muted);font-weight:700}.journal-tabs button:hover{background:var(--bg-hover)}.journal-tabs button[aria-selected=true]{background:var(--ink);color:var(--ink-invert);border-color:var(--ink)}
.restock-help{display:none}.restock-view .restock-help{display:block;font-size:12px;color:var(--ink-muted)}
.restock-view #journal-type,.restock-view .auto-legend,.restock-view .journal-table-wrap+p{display:none}
#journal-page [hidden]{display:none!important}
.restock-view .journal-table{min-width:850px;table-layout:fixed}
.restock-view .journal-table th,.restock-view .journal-table td{width:auto;min-width:0;padding:12px 10px;font-size:12px}
.restock-view .journal-table th:nth-child(3){width:23%}.restock-view .journal-table th:last-child{width:170px}
.restock-view .journal-status-pill{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700}
#journal-page:not(.restock-view) .journal-table{width:1675px;min-width:1675px;table-layout:fixed}
#journal-page:not(.restock-view) .journal-table th:first-child,#journal-page:not(.restock-view) .journal-table td:first-child{width:80px}
#journal-page:not(.restock-view) .journal-table th:nth-child(2){width:170px}
#journal-page:not(.restock-view) .journal-table th:nth-child(3){width:145px}
#journal-page:not(.restock-view) .journal-table th:nth-child(4){width:120px}
#journal-page:not(.restock-view) .journal-table th:nth-child(5){width:220px}
#journal-page:not(.restock-view) .journal-table th:nth-child(6){width:230px}
#journal-page:not(.restock-view) .journal-table th:nth-child(7){width:105px}
#journal-page:not(.restock-view) .journal-table th:nth-child(8){width:180px}
#journal-page:not(.restock-view) .journal-table th:nth-child(9){width:360px}
#journal-page:not(.restock-view) .journal-table th:nth-child(10){width:65px}
#journal-page:not(.restock-view) .journal-table td,#journal-page:not(.restock-view) .journal-table th{padding-left:5px;padding-right:5px}
#journal-page:not(.restock-view) .journal-cell-grid{column-gap:5px}
#journal-page:not(.restock-view) .journal-group-1 .journal-cell-grid{grid-template-columns:90px minmax(0,1fr)}
#journal-page:not(.restock-view) .journal-group-2 .journal-cell-grid{grid-template-columns:72px minmax(0,1fr)}
#journal-page:not(.restock-view) .journal-group-3 .journal-cell-grid{grid-template-columns:43px minmax(0,1fr)}

/* --- CS 일지 표: 밀도는 그대로, 선과 정렬만 정리 --- */
/* 행 높이·열 너비는 건드리지 않습니다. 스티커·장식 채움도 넣지 않습니다. */
.journal-table{border-collapse:separate;border-spacing:0}
.journal-table th{border-bottom:1px solid var(--line);font-family:var(--font-body)}
.journal-table th:last-child,.journal-table td:last-child{border-right:0}
.journal-table td{border-top:1px solid var(--line-soft);vertical-align:top}
.journal-table tbody tr:hover td{background:var(--bg-hover)}
.journal-table tbody tr.journal-completed:hover td{background:var(--tint-done-hover)}
/* 숫자(접수일·주문번호·송장·배송비)가 세로로 맞도록 고정폭 숫자 */
.journal-table td,.journal-table .cell-item-value,.journal-table .cell-item-label{font-variant-numeric:tabular-nums}
/* 라벨과 값의 기준선을 맞춰 훑어보기 쉽게 */
.journal-table .journal-cell-grid{align-items:baseline}
.journal-table .journal-check-item{align-items:center}
.journal-table .field-status .journal-status-pill{font-family:var(--font-display);letter-spacing:0}
.journal-empty{color:var(--ink-muted)}
.journal-table-wrap{border-radius:var(--r-lg);overflow:auto}

/* --- CS 일지 표: 행 높이를 기존의 약 2/3로 --- */
/* 글자 크기(라벨 10px, 값 11px)는 그대로 두고, 셀 여백·줄간격·라벨 아래 여백만 줄였습니다. */
#journal-page:not(.restock-view) .journal-table td,
#journal-page:not(.restock-view) .journal-table th{padding-top:2px;padding-bottom:2px}
#journal-page:not(.restock-view) .journal-cell-grid{row-gap:2px}
#journal-page:not(.restock-view) .journal-table .journal-cell-item{padding-top:1px;padding-bottom:1px;line-height:1.2}
#journal-page:not(.restock-view) .journal-table .journal-cell-grid .cell-item-label{line-height:1.05;margin-bottom:0}
#journal-page:not(.restock-view) .journal-table .journal-cell-grid .cell-item-value{line-height:1.2}
#journal-page:not(.restock-view) .journal-table .journal-check-item{min-height:18px}
#journal-page:not(.restock-view) .journal-table .journal-open{margin-top:3px}
#journal-page:not(.restock-view) .journal-table .journal-group-5>small{margin-top:3px}

/* --- 구분 / 사유: 가로로 나란히 두지 않고 구분을 위, 사유를 아래로 --- */
/* 한 줄에 하나씩 쌓이므로 칸을 120px -> 85px로 좁히고, 표 전체 너비도 그만큼 줄입니다. */
#journal-page:not(.restock-view) .journal-group-3 .journal-cell-grid{grid-template-columns:minmax(0,1fr)}
#journal-page:not(.restock-view) .journal-table th:nth-child(4){width:85px}
#journal-page:not(.restock-view) .journal-table{width:1640px;min-width:1640px}

/* --- 통합CS일지 표: 소제목 줄을 헤더답게 --- */
/* 소제목(접수일/상태, 고객정보/상담자 …)을 더 진하고 굵게 해서 아래 내용과 확실히 구분합니다.
   크림 헤더 바탕(#f4efe4) 위 대비 14.57:1. 높이는 그대로입니다(글자 크기·여백 미변경). */
#journal-page .journal-table th{color:var(--journal-th-ink);font-weight:800;letter-spacing:-.02em}

/* --- 통합CS일지 표: 행과 행 사이를 확실히 끊기 --- */
/* 1600px 폭을 가로질러 한 건을 따라가다 옆 행으로 미끄러지지 않도록,
   (1) 가로줄을 1px 옅은 선에서 2px 진한 선으로 바꾸고 (2) 한 행 걸러 모래색 줄무늬를 깝니다.
   행 높이는 늘리지 않습니다: 위 테두리가 1px 두꺼워진 만큼 아래 여백을 1px 줄여 상쇄합니다. */
#journal-page:not(.restock-view) .journal-table td{border-top:2px solid var(--journal-row-line);padding-bottom:1px}
#journal-page:not(.restock-view) .journal-table tbody tr:nth-child(even):not(.journal-completed) td{background:var(--journal-row-alt)}
/* 완료 행은 기존 연둣빛 그대로 두어 줄무늬와 구분되게 하고, 호버 색이 줄무늬를 덮도록 순서를 맞춥니다. */
#journal-page:not(.restock-view) .journal-table tbody tr:not(.journal-completed):hover td{background:var(--bg-hover)}
#journal-page:not(.restock-view) .journal-table tbody tr.journal-completed:hover td{background:var(--tint-done-hover)}

/* --- 통합CS일지 표: 고객이 적어 준 값(닉네임·수취인명)은 파랑 --- */
/* 항목 이름은 그대로 두고 값만 물들입니다. 표 안에서만 적용되며 카드 보기·수정 창은 그대로입니다.
   대비: 흰 행 7.90:1 / 줄무늬 행 6.54:1 / 완료 행 7.39:1 — 모두 4.5:1 이상. */
#journal-page .journal-table .field-nickname .cell-item-value,
#journal-page .journal-table .field-recipient .cell-item-value{color:var(--journal-customer);font-weight:600}

/* 통합CS일지 제목 줄의 단추는 자주 누르는 것이 아니라 자리만 차지해서, 기본 크기의 절반으로 줄입니다.
   글자 15px·안쪽여백 12/20 → 11px·6/12 이므로 높이가 45px에서 27px가 됩니다. */
#journal-page .page-heading .heading-actions{gap:6px;justify-content:flex-end}
#journal-page .page-heading .heading-actions .button{font-size:11px;padding:6px 12px;font-weight:600;gap:4px}

/* 통계 상자는 숫자만 있으면 누구 건인지 알 수 없어서, 대시보드처럼 수취인명을 함께 보여줍니다.
   이름 단추가 상자 단추 안에 들어가면 눌리지 않으므로 바깥은 div, 제목 줄만 단추입니다. */
.journal-stat-head{border:0;background:none;color:inherit;padding:0;text-align:left;display:flex;flex-direction:column;gap:3px;width:100%}
.journal-stat-names{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px solid #0000001f;display:flex;flex-direction:column;gap:1px}
.journal-stat-names button{border:0;background:none;color:inherit;padding:3px 5px;margin:0 -5px;border-radius:6px;text-align:left;width:calc(100% + 10px);font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.journal-stat-names button:hover{background:#ffffffa8}
.journal-stat-more{display:block;margin-top:4px;opacity:.72}
.journal-stat-empty{margin:8px 0 0;padding-top:6px;border-top:1px solid #0000001f;font-size:12px;opacity:.6}


/* --- 통계 상자: 한 줄에 일곱 칸, 상태 셋과 챙길 일 넷 사이에만 세로줄 --- */
#journal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1px repeat(4,minmax(0,1fr));gap:10px}
.journal-stat-divider{background:var(--line-strong);border-radius:1px;align-self:stretch}
/* 상태 세 칸은 표의 상태 알약과 같은 색을 씁니다(같은 것을 가리키니 색도 같아야 합니다). */
#journal-stats .tone-progress{background:var(--st-progress-bg);color:var(--st-progress-fg)}
#journal-stats .tone-repair{background:var(--st-repair-bg);color:var(--st-repair-fg)}
#journal-stats .tone-issue{background:var(--st-issue-bg);color:var(--st-issue-fg)}
/* 챙길 일 네 칸은 상태 세 칸과 색상환에서 겹치지 않는 네 가지로 둡니다. */
#journal-stats .tone-due{background:var(--stat-due-bg)}
#journal-stats .tone-pickupwait{background:var(--stat-pickupwait-bg)}
#journal-stats .tone-stock{background:var(--stat-stock-bg)}
#journal-stats .tone-fee{background:var(--stat-fee-bg)}
#journal-stats .tone-due,#journal-stats .tone-pickupwait,
#journal-stats .tone-stock,#journal-stats .tone-fee{color:var(--pastel-ink)}
/* 이름은 세 줄짜리 칸을 왼쪽부터 채우고, 남는 오른쪽 빈 곳으로 넘어갑니다(최대 세 칸·아홉 명).
   이름 글자는 상자 색을 따라가지 않고 먹색으로 둡니다. 이슈 있음 칸의 이름이
   빨갛게 보이면 안 되기 때문입니다. */
.journal-stat-names{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-auto-columns:minmax(0,1fr);gap:1px 6px}
.journal-stat-names button{color:var(--journal-value);font-size:11.5px;padding:2px 4px;margin:0 -4px;width:calc(100% + 8px)}
@media(max-width:1250px){#journal-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.journal-stat-divider{display:none}}
@media(max-width:820px){#journal-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- 브랜드 고르기: 알약 단추 여러 개 대신 '모든 상태'와 같은 목록으로 --- */
#journal-brand-select{font-size:13px;padding:8px 10px}

/* 표 바탕을 소제목 줄과 같은 따뜻한 색으로 맞춥니다(흰 바탕이 아니라).
   짝수 행은 소제목과 같은 색, 홀수 행은 그보다 연한 색이라 어느 줄도 소제목보다 진하지 않습니다. */
#journal-page:not(.restock-view) .journal-table tbody tr:not(.journal-completed) td{background:var(--journal-row-odd)}
#journal-page:not(.restock-view) .journal-table tbody tr:nth-child(even):not(.journal-completed) td{background:var(--journal-row-alt)}
#journal-page:not(.restock-view) .journal-table tbody tr:not(.journal-completed):hover td{background:var(--journal-row-hover)}

/* --- 연락처·주문번호: 숫자는 작게, 이름 옆에 복사 단추 --- */
/* 긴 숫자라 다른 값과 같은 크기면 칸을 밀어냅니다. 읽기만 하면 되는 값이라 한 단계 줄입니다. */
#journal-page:not(.restock-view) .field-phone .cell-item-value,
#journal-page:not(.restock-view) .field-order_number .cell-item-value{font-size:10px;letter-spacing:-.01em}
.cell-copy{border:0;background:none;padding:0 2px;margin-left:1px;font-size:10px;line-height:1;color:var(--journal-label);opacity:.75;vertical-align:baseline}
.cell-copy:hover{opacity:1;color:var(--journal-customer)}
.cell-copy.copied{color:var(--ok-fg);opacity:1}

/* --- 배송비/결제 칸까지 가로 스크롤 없이 보이게 칸 너비를 줄입니다 --- */
/* 표에 width/min-width:1640px이 박혀 있어서, 칸 너비만 줄이면 남는 폭만큼 모든 칸이
   비례로 다시 늘어났습니다. 그래서 표 전체 폭도 칸 합계에 맞춰 같이 줄입니다.
   앞 여덟 칸 합계 1215px -> 1079px. 1440px 창(본문 1116px)에서 배송비/결제까지 들어옵니다. */
#journal-page:not(.restock-view) .journal-table{width:1469px;min-width:1469px}
#journal-page:not(.restock-view) .journal-table th:nth-child(2){width:162px}
#journal-page:not(.restock-view) .journal-table th:nth-child(3){width:128px}
/* 종류·사유는 '단순변심'처럼 짧은 말만 들어가서 85px까지 필요하지 않습니다. */
#journal-page:not(.restock-view) .journal-table th:nth-child(4){width:62px}
/* 구매상품/옵션은 두 칸으로 나뉘어 있어 220px이면 상품명 뒤에 빈 곳이 남습니다. */
#journal-page:not(.restock-view) .journal-table th:nth-child(5){width:172px}
#journal-page:not(.restock-view) .journal-table th:nth-child(6){width:205px}
#journal-page:not(.restock-view) .journal-table th:nth-child(7){width:98px}
#journal-page:not(.restock-view) .journal-table th:nth-child(8){width:172px}
#journal-page:not(.restock-view) .journal-table th:nth-child(9){width:330px}
#journal-page:not(.restock-view) .journal-table th:nth-child(10){width:60px}
/* 구매상품과 컬러 사이 빈 곳도 한 번 더 좁힙니다. */
#journal-page:not(.restock-view) .journal-group-4 .journal-cell-grid{column-gap:4px}

/* CS 접수 / 입고알림 탭은 두 개뿐이라 크게 둘 이유가 없어 2/3로 줄입니다.
   글자 15px -> 10px, 안쪽 여백 10/22 -> 7/15 이므로 높이가 42px에서 28px가 됩니다. */
.journal-tabline .journal-tabs button{font-size:10px;padding:7px 15px;line-height:1.1}

/* --- 목록 바로 위 줄: 왼쪽에 건수·범례, 오른쪽 끝에 '＋ 직접 접수' --- */
.journal-listbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.journal-listbar-text{min-width:0;flex:1}
.journal-listbar-text>p{margin-top:0}
#journal-page .journal-listbar>.button{flex:none;font-size:12px;padding:8px 16px;margin-bottom:6px}

/* --- CS 접수 / 입고알림 탭: 작아서 묻히던 것을 눈에 띄게 --- */
/* 크기는 그대로 두되 글자를 12px로 키우고, 고른 쪽은 노란 강조색,
   안 고른 쪽은 테두리를 진하게 해서 단추처럼 보이게 합니다. */
.journal-tabline .journal-tabs{gap:8px}
.journal-tabline .journal-tabs button{font-size:12px;padding:8px 20px;line-height:1.2;font-weight:800;
 border:1.5px solid var(--line-strong);background:var(--bg-card);color:var(--ink)}
.journal-tabline .journal-tabs button:hover{background:var(--accent-soft);border-color:var(--accent)}
.journal-tabline .journal-tabs button[aria-selected=true]{background:var(--accent);border-color:var(--focus);
 color:var(--accent-ink);box-shadow:0 2px 0 var(--focus)}

/* 숫자를 이름 아래가 아니라 이름 오른쪽 빈 곳에 둡니다. 한 줄이 줄어 상자가 낮아집니다. */
#journal-stats .journal-stat-head{flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px}
#journal-stats .journal-stat-head>span{flex:1;min-width:0}
#journal-stats .journal-stat-head>strong{margin:0;line-height:1;flex:none}

/* 브랜드 칸은 로고+이름만 들어가 72px까지 필요 없어, 구매처와의 사이가 유독 벌어져 보였습니다. */
#journal-page:not(.restock-view) .journal-group-2 .journal-cell-grid{grid-template-columns:56px minmax(0,1fr);column-gap:3px}

/* 회수요청일은 이름이 '회수요청일(회수예정)'로 길고 값도 '2026-09-28 (10-02)'로 길어
   오른쪽 반 칸을 넘쳤습니다. 칸을 205px -> 228px로 늘리고 오른쪽을 더 넓게 나눕니다. */
#journal-page:not(.restock-view) .journal-table{width:1492px;min-width:1492px}
#journal-page:not(.restock-view) .journal-table th:nth-child(6){width:228px}
#journal-page:not(.restock-view) .journal-group-5 .journal-cell-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}

/* --- 목록 바로 위 줄 다시 짜기 ---
   왼쪽: CS 접수·입고알림 탭 -> 범례 -> 건수
   오른쪽: 조건 초기화 -> ＋ 직접 접수 -> CSV 내보내기 */
.journal-listbar{align-items:center}
.journal-listbar-text{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.journal-listbar-text>p{margin:0}
.journal-listbar-actions{display:flex;align-items:center;gap:10px;flex:none}
#journal-page .journal-listbar-actions #journal-reset{padding:0;white-space:nowrap}
#journal-page .journal-listbar-actions .button{font-size:12px;padding:8px 16px;margin:0}
/* 탭이 .journal-tabline에서 목록 줄로 옮겨졌으므로 선택자도 옮깁니다. */
.journal-listbar .journal-tabs{border:0;margin:0;padding:0;flex:none;display:flex;gap:8px}
.journal-listbar .journal-tabs button{font-size:12px;padding:8px 20px;line-height:1.2;font-weight:800;
 border:1.5px solid var(--line-strong);border-radius:var(--r-pill);background:var(--bg-card);color:var(--ink)}
.journal-listbar .journal-tabs button:hover{background:var(--accent-soft);border-color:var(--accent)}
.journal-listbar .journal-tabs button[aria-selected=true]{background:var(--accent);border-color:var(--focus);
 color:var(--accent-ink);box-shadow:0 2px 0 var(--focus)}
/* 제목 줄에는 CJ 택배조회와 상품·컬러 관리만 남습니다. */
.cj-icon{flex:none;margin-right:1px}

/* 자동으로 채워진 칸은 잠깐 노랗게 비춰, 내가 안 적었는데 값이 바뀐 것을 알아챌 수 있게 합니다. */
.auto-filled{background:var(--accent-soft)!important;transition:background .25s}

/* --- 상자 일곱 칸은 예전처럼 한 줄 나열. 이름표만 각 묶음 위에 얹습니다 --- */
/* 묶음 <div>로 감싸면 왼쪽 셋과 오른쪽 넷의 칸 너비가 서로 달라져 줄이 흐트러집니다.
   그래서 격자는 평평하게 두고, 이름표와 세로줄만 자리를 직접 지정합니다. */
#journal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1px repeat(4,minmax(0,1fr));
 grid-template-rows:auto auto;gap:5px 10px}
.journal-stat-group-label{grid-row:1;margin:0 0 0 2px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--ink-soft)}
.label-status{grid-column:1/4}
.label-todo{grid-column:5/9}
#journal-stats .journal-stat{grid-row:2}
.journal-stat-divider{grid-column:4;grid-row:1/3}
/* 좁아지면 세로줄을 감추고, 이름표는 제 묶음 앞에서 한 줄을 통째로 씁니다. */
@media(max-width:1250px){
 #journal-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
 .journal-stat-divider{display:none}
 .journal-stat-group-label{grid-row:auto;grid-column:1/-1;margin-top:6px}
 #journal-stats .journal-stat{grid-row:auto}
}
@media(max-width:820px){#journal-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 단추 줄과 표가 붙어 있어 겹쳐 보였습니다. */
.journal-listbar{margin-bottom:14px}

/* 입고알림 화면에서만 알림요청상품 목록을 보여줍니다. */
#journal-restock-product{font-size:13px;padding:8px 10px;max-width:220px}

/* --- 접수기간: 이름 하나에 시작·종료 칸 두 개 --- */
/* '접수일 시작'과 '접수일 종료'로 따로 적으면 같은 말이 두 번 나와 줄만 길어집니다. */
.date-range{display:flex;align-items:center;gap:6px}
.date-range-label{font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.date-range-tilde{color:var(--ink-muted)}
.date-range input{font-size:13px;padding:8px 10px}

/* --- 입고알림 화면의 제품별 상자 --- */
/* 제품 수가 그때그때 달라 칸 수를 못 박을 수 없으므로, 폭에 맞춰 저절로 접히게 둡니다. */
.restock-view #journal-stats{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));grid-template-rows:none}
.restock-view #journal-stats .journal-stat{grid-row:auto}
.restock-view .journal-stat-group-label{grid-row:auto;grid-column:1/-1}
.journal-stat-empty-all{grid-column:1/-1;margin:0;padding:18px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--ink-muted);font-size:13px;text-align:center}

/* --- 배송비: 받을 돈은 빨갛게, 0원은 '무료' --- */
.fee-amount{color:var(--fee-due);font-weight:700}
.fee-free{color:var(--ink-muted)}

/* --- 적힌 내용을 소제목 글자와 같은 자리에서 시작하게 --- */
/* 소제목 앞에는 3px 점 + 3px 여백이 붙어 있어, 아래 내용만 6px 왼쪽으로 튀어나와 있었습니다. */
#journal-page:not(.restock-view) .journal-cell-grid .cell-item-value{padding-left:6px}
/* 체크 칸은 점 다음에 글자가 바로 오는 한 줄짜리라 밀지 않습니다. */
#journal-page:not(.restock-view) .journal-check-item .cell-item-value{padding-left:0}

/* 제주·산간 체크는 배송비 옆에 붙는 한 줄짜리 항목입니다. */
.journal-form-row .journal-check.field-remote_area{align-self:end}

/* 상자의 이름(진행중·수선 중 …)이 숫자에 비해 작아 잘 안 읽혔습니다. */
#journal-stats .journal-stat-head>span{font-size:15px;font-weight:750;letter-spacing:-.01em}
@media(max-width:1380px){#journal-stats .journal-stat-head>span{font-size:14px}}

/* 원본 상담 열기는 맨 앞 칸에서 '열기/수정' 아래에 둡니다. */
.journal-table .journal-source{display:block;color:var(--journal-customer)}
.journal-linked{font-size:10px;color:var(--ink-muted)}

/* 배송비처럼 '틀린 건 아닌데 확인이 필요한' 안내는 칸 아래에 붙여 둡니다. */
.field-hint{display:block;margin-top:5px;font-size:11px;line-height:1.5;color:var(--st-pending-fg);
 background:var(--st-pending-bg);border-radius:var(--r-xs);padding:5px 8px}

/* 종류와 사유는 어떤 건인지 가장 먼저 보는 값이라, 닉네임·수취인명과 같은 파란색으로 둡니다. */
#journal-page:not(.restock-view) .field-case_type .cell-item-value,
#journal-page:not(.restock-view) .field-reason .cell-item-value{color:var(--journal-customer);font-weight:650}

/* 제주·산간은 체크 네모 대신 배송비 아래 한 줄로 적습니다. */
/* 제주·산간에 해당하는 건만 눈에 띄게 합니다. 배송비가 왜 14,000원인지 설명해 주는 값입니다. */
#journal-page .field-remote_area .cell-item-value.is-remote{color:var(--st-pending-fg);font-weight:800}
.journal-cell-spacer{min-height:1px}

/* 접수 정보를 둘로 나누면서 등록 창 묶음이 넷이 되었습니다. */
/* 고객 정보는 칸이 많아 한 줄을 통째로 쓰고, 나머지는 원래 색을 한 칸씩 물려받습니다. */
#journal-dialog .block-0{grid-column:auto;background:var(--pastel-lime);border-color:var(--pastel-border)}
#journal-dialog .block-1{grid-column:1/-1;background:var(--pastel-butter);border-color:var(--pastel-border)}
#journal-dialog .block-2{background:var(--pastel-sky);border-color:var(--pastel-border-sky)}
#journal-dialog .block-3{background:var(--pastel-pink);border-color:var(--pastel-border-pink)}
#journal-dialog .block-3 .columns-3{grid-template-columns:.8fr 1.8fr 1fr}

/* 회수 확인 예정일이 지났는데 굵게만 되어 있어 눈에 띄지 않았습니다.
   .pickup-due-inline 이 뒤에 와서 색을 덮어쓰고 있었으므로 선택자를 겹쳐 씁니다. */
.pickup-due-inline.pickup-due,.journal-table .pickup-due{color:var(--fee-due);font-weight:800}

/* 1.접수 정보와 2.고객 정보를 좌우로 나란히 둡니다. 둘 다 '이 건이 무엇인가'를 적는 칸이라
   위아래로 떨어져 있으면 눈이 오가야 했습니다. 고객 정보가 칸이 많아 더 넓게 잡습니다.
   3·4번은 아래에서 한 줄을 통째로 씁니다. */
#journal-fields{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
#journal-dialog .block-0{grid-column:1}
#journal-dialog .block-1{grid-column:2}
#journal-dialog .block-2,#journal-dialog .block-3{grid-column:1/-1}
/* 좁은 화면에서는 예전처럼 위아래로 쌓습니다. */
@media(max-width:850px){
 #journal-fields{grid-template-columns:1fr}
 #journal-dialog .block-0,#journal-dialog .block-1{grid-column:1/-1}
}

/* --- 수집 안내: 모든 화면에서 같은 모양으로 --- */
/* 일지 화면만 '박스 없는 글'이고 나머지는 카드였습니다. 눈에 잘 띄어야 하는 경고라
   어디서나 같은 모양·같은 빨간 글자로 둡니다. 배지도 알약을 벗기고 한 문장으로 잇습니다. */
.connection-banner{display:block;margin:14px 34px 0;padding:0;border:0;background:none;box-shadow:none;
 text-align:right;font-size:13px;line-height:1.6;color:var(--fee-due)}
.connection-banner>span,.connection-banner p,.connection-banner button{display:inline;color:var(--fee-due);
 background:none;padding:0;margin:0;font-size:13px}
.connection-banner>span{font-weight:750}
.connection-banner>span::after{content:' · ';font-weight:400}
.connection-banner button{margin-left:8px;text-decoration:underline;font-weight:650}
.connection-banner button:hover{color:var(--st-issue-fg)}
@media(max-width:1150px){.connection-banner{margin:12px 24px 0}}
@media(max-width:650px){.connection-banner{margin:12px 16px 0;text-align:left}}

/* 구매 내용(상품·컬러·수량·사은품내역)도 닉네임·수취인명처럼 파란색으로 둡니다.
   어떤 물건 이야기인지가 종류·사유 다음으로 먼저 눈에 들어와야 합니다. */
#journal-page:not(.restock-view) .field-product .cell-item-value,
#journal-page:not(.restock-view) .field-color .cell-item-value,
#journal-page:not(.restock-view) .field-quantity .cell-item-value,
#journal-page:not(.restock-view) .field-gift_detail .cell-item-value{color:var(--journal-customer);font-weight:650}
/* 제주·산간에 해당하는 건도 같은 파란색으로 맞춥니다. */
#journal-page .field-remote_area .cell-item-value.is-remote{color:var(--journal-customer);font-weight:800}

/* 3.회수·입고·재발송과 4.비용·처리 내역도 좌우로 나란히 둡니다. */
#journal-dialog .block-2{grid-column:1}
#journal-dialog .block-3{grid-column:2}
@media(max-width:850px){#journal-dialog .block-2,#journal-dialog .block-3{grid-column:1/-1}}

/* 입고알림 상자의 연락처 복사 단추는 이름 바로 옆에 붙입니다. */
.journal-stat-names li{display:flex;align-items:center;gap:2px;min-width:0}
.journal-stat-names li>button[data-open-journal]{flex:1;min-width:0}
.journal-stat-names .cell-copy{flex:none;font-size:11px}

/* --- 추가 구매상품 줄 --- */
/* 한 건에 상품이 여럿일 때 둘째 줄부터 담는 칸입니다. 상품·컬러·수량이 한 줄로 붙어야
   '토트백 실버 1개, 숄더백 블랙 2개'를 구분해 적을 수 있습니다. */
.extra-items{grid-column:1/-1;margin-top:6px}
.extra-items-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.extra-items-head span{font-size:12px;font-weight:700;color:var(--ink-soft)}
.extra-items-head .button{font-size:11px;padding:5px 12px;margin:0}
.extra-row{display:grid;grid-template-columns:1.6fr 1.1fr 70px 30px;gap:6px;margin-bottom:5px}
.extra-row select,.extra-row input{font-size:13px;padding:6px 8px;min-width:0}
.extra-remove{border:1px solid var(--line-strong);background:var(--bg-card);border-radius:var(--r-xs);color:var(--ink-soft);font-size:16px;line-height:1}
.extra-remove:hover{background:var(--st-issue-bg);color:var(--st-issue-fg);border-color:var(--st-issue-fg)}
.extra-empty{margin:0;font-size:11px;color:var(--ink-muted)}
/* 목록에서는 구매상품 값 아래에 줄을 이어 적습니다.
   첫 상품과 같은 물건 이야기라 크기·색·굵기를 따로 정하지 않고 그대로 물려받습니다. */
#journal-page .journal-table td small.extra-line{display:block;margin-top:2px;font-size:1em;line-height:inherit;color:inherit;font-weight:inherit}

/* 상자 이름 버튼은 칸 폭보다 넓게 잡혀 있어(width:100%+8px), 복사 단추와 겹쳤습니다.
   연락처 줄처럼 단추가 둘인 줄에서는 폭을 flex에 맡깁니다. */
.journal-stat-names li>button[data-open-journal]{flex:1;min-width:0;width:auto;margin:0}
.journal-stat-names li>.cell-copy{width:auto;margin:0;padding:2px 3px}

/* 세는 기준을 상자 안에 한 줄로 적습니다. 숫자만 보면 왜 빠졌는지 알 수 없습니다. */
.journal-stat-note{display:block;margin-top:1px;font-size:9.5px;line-height:1.35;opacity:.72;word-break:keep-all}

/* --- 상단 고정 --- */
/* 특별히 챙겨야 하는 건을 조건과 상관없이 맨 위에 두고 봅니다. */
/* 꽂히지 않은 핀은 흐린 테두리만, 꽂힌 핀은 채워서 색을 입힙니다.
   그림문자 대신 선으로 그려서 컴퓨터마다 모양이 달라지지 않게 했습니다. */
.pin-button{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;
 padding:2px;margin:0 0 2px;line-height:0;border-radius:var(--r-xs);color:var(--ink-muted);opacity:.5}
.pin-button:hover{opacity:1;color:var(--focus);background:var(--bg-hover)}
.pin-button.pinned{opacity:1;color:var(--fee-due);background:var(--accent-soft)}
.pin-button.pinned:hover{color:var(--fee-due)}
#journal-page:not(.restock-view) .journal-table tbody tr.journal-pinned.journal-pinned td{background:var(--accent-soft)}
#journal-page:not(.restock-view) .journal-table tbody tr.journal-pinned.journal-pinned:hover td{background:var(--accent)}
#journal-page:not(.restock-view) .journal-table tbody tr.journal-pinned td:first-child{box-shadow:inset 3px 0 0 var(--focus)}

/* --- 좌측 메뉴 여닫기 --- */
/* 표가 가로로 길어 자리가 모자랄 때 메뉴를 접어 본문을 넓게 씁니다.
   접으면 아이콘만 남기고 글자는 감춥니다(읽기 도구에는 남습니다). */
.sidebar-toggle{position:absolute;top:10px;right:10px;z-index:2;border:1px solid #ffffff2e;background:#ffffff14;
 color:inherit;border-radius:var(--r-pill);width:24px;height:24px;line-height:1;font-size:13px;padding:0}
.sidebar-toggle:hover{background:#ffffff2e}
/* 900px 이하는 원래부터 메뉴가 좁게 접혀 나오므로, 접기 규칙을 아예 적용하지 않습니다.
   그렇지 않으면 기억해 둔 '접음' 상태가 좁은 화면의 기본 배치와 겹쳐 본문을 덮습니다. */
@media(max-width:900px){.sidebar-toggle{display:none}}
@media(min-width:901px){
 body.sidebar-collapsed .sidebar{width:62px;padding-left:8px;padding-right:8px;overflow:visible}
 body.sidebar-collapsed main{margin-left:78px;width:calc(100% - 78px)}
 body.sidebar-collapsed .sidebar-toggle{right:50%;transform:translateX(50%)}
 body.sidebar-collapsed .brand{justify-content:center;padding:26px 0 18px;gap:0}
 body.sidebar-collapsed .brand>span:not(.brand-icon),
 body.sidebar-collapsed .workspace-label,
 body.sidebar-collapsed .brand-select-label,
 body.sidebar-collapsed #brand-select,
 body.sidebar-collapsed #brand-shortcuts,
 body.sidebar-collapsed #sidebar-channels,
 body.sidebar-collapsed .channel-heading,
 body.sidebar-collapsed .sidebar-footer{display:none}
 body.sidebar-collapsed .nav{justify-content:center;padding:12px 4px;gap:0;font-size:0}
 body.sidebar-collapsed .nav .nav-icon{width:20px;height:20px}
 body.sidebar-collapsed .nav b{display:none}
}

/* 주문번호는 중간에 끊으면 알아보기 어려워 한 줄로 둡니다.
   칸보다 길면 말줄임으로 자르고, 전체는 풍선말과 복사 단추로 확인합니다. */
#journal-page:not(.restock-view) .field-order_number .cell-item-value{
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* 백업이 일주일 지났으면 눈에 띄게 합니다. */
#backup-status{display:block;margin-top:10px;font-size:12px;color:var(--ink-muted)}
#backup-status.backup-due{color:var(--fee-due);font-weight:700}

/* 회수확인필요는 어느 날짜 때문에 뜬 말인지 알 수 있게 회수요청일 바로 아래에 답니다.
   '.journal-table td small'(12px)이 더 세서 값보다 크게 나왔으므로, 소제목과 같은 10px로 맞춥니다. */
#journal-page .journal-table td small.pickup-due-note{display:block;margin-top:1px;font-size:10px;line-height:1.35}

/* 구매상품컬러수량과 주문번호는 상품이 여럿일 수 있고 번호도 길어, 한 줄을 통째로 씁니다. */
#journal-page:not(.restock-view) .journal-group-4 .field-product,
#journal-page:not(.restock-view) .journal-group-4 .field-order_number{grid-column:1/-1}
/* 한 줄을 다 쓰므로 번호를 자르지 않고 그대로 보여 줍니다. 그래도 길면 줄을 바꿉니다. */
#journal-page:not(.restock-view) .field-order_number .cell-item-value{
 white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

/* 접수 내용에 무엇을 적어야 하는지 칸 이름 옆에 적어 둡니다. */
.field-note{font-size:10px;font-weight:500;color:var(--ink-muted);margin-left:4px}