/* 기존 writing 토큰을 쓰는 한 페이지 작업대. */
.op-workspace { display:grid; grid-template-columns:370px minmax(0,1fr); align-items:start; border:1px solid var(--writing-line); background:var(--writing-paper); }
.op-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:12px 0; }
.op-toolbar .tile-field { margin:0; min-width:0; }
.op-toolbar .op-form-field { flex:0 0 136px; }
.op-toolbar .op-title-field { flex:1 1 180px; max-width:360px; }
.op-toolbar select,.op-toolbar input { display:block; box-sizing:border-box; width:100%; height:44px; margin:8px 0 0; padding:8px; font-size:16px; color:var(--writing-ink); background:var(--writing-paper); border:1px solid var(--writing-line); border-radius:5px; }
.op-toolbar .writing-button { height:44px; font-size:16px; white-space:nowrap; }
.op-toolbar .op-draft-list { margin-inline-start:auto; font-weight:400; }
.op-toolbar select,.op-desk select { min-height:44px; padding:8px; font-size:16px; background:var(--writing-paper); border:1px solid var(--writing-line); width:100%; }
.op-desk { min-width:0; border-left:1px solid var(--writing-line); }
.op-desk *,.op-manuscript * { box-sizing:border-box; }
.op-desk small,.op-manuscript small,.op-desk p { font-size:15px; }
.op-desk p { line-height:1.7; overflow-wrap:anywhere; }
.op-desk h2 { font-size:21px; margin:0 0 12px; }
.op-desk h3 { font-size:18px; }
.op-desk summary { cursor:pointer; padding:12px 0; font-size:15px; }
.op-drawer { border-bottom:1px solid var(--writing-line); }
.op-drawer>summary { display:flex; align-items:center; gap:8px; min-height:52px; padding:12px 20px; list-style:none; }
.op-drawer>summary::before { content:'▸'; color:var(--writing-accent); }
.op-drawer[open]>summary::before { content:'▾'; }
.op-drawer>summary { flex-wrap:wrap; }
.op-drawer>summary>span { margin-left:auto; font-size:15px; color:var(--writing-muted); }
.op-step>summary>.op-sum { min-width:0; overflow-wrap:anywhere; text-align:right; }
.op-step[open]>summary>.op-sum { display:none; }
.op-drawer-content { padding:0 20px 18px; }
.op-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.op-drawer-content>.op-drawer,.op-couplet>.op-drawer { border:1px solid var(--writing-line); background:var(--writing-canvas); margin-top:10px; }
.op-drawer-content>.op-drawer>summary,.op-couplet>.op-drawer>summary { padding:10px 12px; min-height:48px; }
.op-drawer-content>.op-drawer>.op-drawer-content,.op-couplet>.op-drawer>.op-drawer-content { padding:0 12px 12px; }
.op-couplet { margin:0 0 14px; }
.op-couplet>h3 { margin:12px 0 4px; }
.op-meaning { margin:10px 0; scroll-margin-top:20px; }
.op-meaning textarea { min-height:66px; }
.op-initial { margin:4px 0; color:var(--writing-muted); }
.op-pair-hint { color:var(--writing-accent); }
.op-manuscript { padding:14px; min-width:0; background:var(--writing-canvas); }
.op-poem-line { display:block; text-align:left; width:100%; border:1px solid transparent; background:transparent; padding:6px; margin:0; border-radius:3px; cursor:pointer; }
.op-poem-line[aria-pressed=true] { border-color:var(--writing-accent); background:var(--writing-paper); }
.op-line-label,.op-poem-meaning { display:block; font-size:15px; line-height:1.5; margin:3px 0; color:var(--writing-muted); }
.op-mini-cells { display:grid; grid-template-columns:repeat(var(--op-columns),minmax(0,1fr)); gap:3px; }
.op-mini-cells>span { min-width:0; text-align:center; }
.op-mini-cells b { display:block; font:24px/1.5 "Noto Serif TC","Songti TC",serif; border:1px solid var(--writing-line); background:var(--writing-paper); }
.op-mini-cells .is-rhyme b { border-bottom:2px solid var(--writing-accent); }
.op-mini-cells .red b { border-color:var(--writing-error-line); background:var(--writing-error); }
.op-mini-cells .yellow b { background:var(--writing-review); }
.op-mini-cells .green b { background:var(--writing-ok); }
.op-mini-cells small { display:block; font-size:15px; }
.op-pair-board { display:grid; grid-template-columns:repeat(var(--op-columns),minmax(0,1fr)); gap:6px; }
.op-pair-col { min-width:0; text-align:center; }
.op-pair-col>div { min-width:0; margin:8px 0; }
.op-pair-col>div>span { font-size:15px; }
.op-pair-col small { display:block; overflow-wrap:anywhere; }
.op-pair-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.op-pair-results>details { border:1px solid var(--writing-line); padding:10px; }
.op-pair-results summary { display:flex; flex-wrap:wrap; gap:4px 10px; padding:0; }
.op-pair-results summary span { font-size:15px; }
.op-pair-results summary span:last-child { flex-basis:100%; }
.op-pair-results p { margin:6px 0; }
.op-tools { border-top:1px solid var(--writing-line); margin-top:12px; }
.op-tools .tile-common { margin-top:12px; }
.op-desk .tile-slots { margin:10px 0; }
.op-desk .tile-slot-wrap { position:relative; }
.op-clear { min-width:26px; min-height:26px; position:absolute; top:-9px; right:-5px; border:1px solid var(--writing-line); background:var(--writing-paper); color:var(--writing-ink); border-radius:50%; font-size:18px; cursor:pointer; padding:0; }
.op-desk .tile-slot-wrap small { line-height:1.4; }
.op-ending-focus { display:flex; justify-content:space-between; align-items:center; padding:14px 0; gap:12px; }
.op-ending-focus>div { min-width:0; }
.op-ending-focus>div p { margin:5px 0; }
.op-ending-focus>b { font:48px/1.4 "Noto Serif TC","Songti TC",serif; border:2px solid var(--writing-accent); padding:6px 16px; color:var(--writing-accent); }
.op-ending-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.op-ending-card { border:1px solid var(--writing-line); border-radius:4px; min-width:0; }
.op-ending-card>summary { display:flex; gap:10px; padding:10px; }
.op-ending-card>summary>b { font:34px/1.4 "Noto Serif TC","Songti TC",serif; }
.op-ending-card>summary>span { min-width:0; }
.op-ending-card>summary>span>span,.op-ending-card>summary strong { display:block; overflow-wrap:anywhere; font-size:15px; line-height:1.6; }
.op-candidate-detail { padding:0 10px 12px; }
.op-candidate-detail blockquote { margin:10px 0; padding:8px; border-left:2px solid var(--writing-accent); background:var(--writing-canvas); overflow-wrap:anywhere; font-size:18px; }
.op-candidate-detail cite { display:block; font-size:15px; font-style:normal; }
.op-remaining-chars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.op-remaining-chars>button { min-width:0; border:1px solid var(--writing-line); border-radius:4px; background:var(--writing-paper); padding:6px; cursor:pointer; }
.op-remaining-chars b { font:28px/1.4 "Noto Serif TC","Songti TC",serif; }
.op-remaining-chars span,.op-remaining-chars small { display:block; font-size:15px; overflow-wrap:anywhere; }
.op-remaining-chars button:disabled { opacity:.45; cursor:not-allowed; }
.op-mobile-poem { display:none; }
@media (min-width:901px) { .op-workspace .has-verse-search { height:calc(100dvh - 34px); } }
@media (max-width:900px) {
 .op-workspace { display:block; }
 .op-desk { border-left:0; }
 .op-workspace .op-manuscript { display:block; position:sticky; top:0; z-index:8; padding:8px 12px; border-bottom:1px solid var(--writing-line); max-height:44dvh; overflow:auto; }
 .op-mobile-poem { display:block; width:100%; }
 .op-poem:not(.is-expanded) { display:none; }
 .op-manuscript>button[data-tile-action=exit] { display:none; }
 .op-drawer>summary { padding:12px; }
 .op-step>summary>.op-sum { margin-left:22px; flex-basis:100%; text-align:left; }
 .op-drawer-content { padding:0 12px 12px; }
 .op-field-grid { grid-template-columns:1fr; gap:8px; }
 .op-pair-board { gap:3px; }
 .op-pair-board .tile-slot { height:46px!important; font-size:23px!important; }
 .op-pair-results { grid-template-columns:1fr; }
 .op-remaining-chars { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .op-ending-grid { grid-template-columns:1fr; }
 .op-desk .writing-button { white-space:normal; max-width:100%; }
 .op-toolbar { gap:8px; }
}
@media (max-width:600px) {
 .op-toolbar { row-gap:12px; }
 .op-toolbar .op-title-field { flex-basis:calc(100% - 144px); max-width:none; }
}
/* 두 구의 훈 길이가 달라도 대응 칸의 두 행을 같은 높이에 둔다. */
.op-pair-board { grid-template-rows:auto auto; grid-auto-flow:column; }
.op-pair-col { display:grid; grid-row:span 2; grid-template-rows:subgrid; }
.op-pair-board .tile-allowance { display:none; }
@media (max-width:900px) {
 .op-desk .op-drawer,.op-desk .op-drawer>summary,.op-meaning { scroll-margin-top:64px; }
}

/* 흐름: 끝난 단계는 ✓ 한 줄 요약, 아직 아닌 단계는 흐리게, 다음 칸은 테두리·빛으로 강조한다. */
.op-drawer.is-done:not([open])>summary::before { content:'✓'; font-weight:700; }
.op-drawer.is-done:not([open])>summary>.op-sum { color:var(--writing-ink); }
.op-drawer.is-later>summary>strong,.op-locked strong { color:var(--writing-muted); font-weight:500; }
.op-locked .op-step-head { display:flex; align-items:center; gap:8px; min-height:52px; padding:12px 20px; font-size:15px; }
.op-locked .op-step-head::before { content:'▸'; color:var(--writing-line); }
.op-drawer.op-next { box-shadow:inset 4px 0 0 var(--writing-accent); }
.op-drawer.op-next:not([open])>summary { background:var(--writing-accent-soft); }
.op-drawer.op-next>summary>strong { color:var(--writing-accent-deep); }
.op-desk .op-next-field,.op-desk input.op-next-field,.op-desk textarea.op-next-field { outline:3px solid var(--writing-accent); outline-offset:2px; box-shadow:0 0 0 7px rgb(1 106 113 / .12); border-radius:4px; }
.op-desk .op-drawer>summary.op-next-field { outline-offset:-3px; background:var(--writing-accent-soft); }
.op-poem-line.op-next { border-color:var(--writing-accent); border-style:dashed; }
/* 한자를 채우는 동안에만 고른 줄 테두리를 보인다. 다른 단계에서는 강조와 겹치지 않게 감춘다. */
[data-op-step]:not([data-op-step="op-hanja"]) .op-poem-line[aria-pressed=true]:not(.op-next) { border-color:transparent; background:transparent; }
.op-mini-cells>.op-next-field b { outline:3px solid var(--writing-accent); outline-offset:1px; color:var(--writing-accent); }
.op-arrive { animation:op-glow 1.1s ease-out var(--op-arrive-delay,0ms) 2 both; }
.op-mini-cells>.op-arrive { animation:none; }
.op-mini-cells>.op-arrive b { animation:op-glow 1.1s ease-out var(--op-arrive-delay,0ms) 2 both; }
.op-drawer.op-next.op-arrive { animation:none; }
.op-drawer.op-next.op-arrive>summary { animation:op-rise .5s ease-out var(--op-arrive-delay,0ms) both; }
@keyframes op-glow { 0% { box-shadow:0 0 0 0 rgb(1 106 113 / .45); } 70% { box-shadow:0 0 0 14px rgb(1 106 113 / 0); } 100% { box-shadow:0 0 0 7px rgb(1 106 113 / .12); } }
@keyframes op-rise { from { transform:translateY(8px); opacity:.35; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { .op-arrive,.op-arrive>summary,.op-arrive b { animation:none!important; } }
.op-desk .op-drawer { scroll-margin-top:12px; }
/* 고르는 줄의 우리말 */
.op-line-ko { margin:4px 0 10px; padding:8px 10px; background:var(--writing-canvas); border-left:3px solid var(--writing-accent); font-size:16px!important; line-height:1.6; overflow-wrap:anywhere; }
.op-line-ko>b { font-weight:600; margin-right:4px; }
.op-ending-focus .op-line-ko { margin:6px 0; }
/* 나머지 운자: 줄마다 따로, 고른 운목 안에서만 */
.op-remainder-head { display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; justify-content:space-between; }
.op-remainder-head>p { margin:0; flex:1 1 220px; min-width:0; }
.op-first { display:inline-flex; flex:none; gap:8px; align-items:center; white-space:nowrap; font-size:15px; min-height:44px; cursor:pointer; }
/* 쓰기 칸 공통 규칙(.tile-task input { width:100% })이 체크박스를 늘려 라벨이 오른쪽 끝으로 밀렸다. */
.writing-shell .tile-task .op-first input { width:20px; min-width:20px; height:20px; margin:0; flex:none; }
.op-rhyme-rows { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.op-rhyme-row { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:4px 14px; border:1px solid var(--writing-line); border-radius:4px; background:var(--writing-paper); color:var(--writing-ink); font-size:15px; cursor:pointer; }
.op-rhyme-row b { font:26px/1.3 "Noto Serif TC","Songti TC",serif; }
.op-rhyme-row[aria-pressed=true] { border:2px solid var(--writing-accent); background:var(--writing-accent-soft); }
.op-rhyme-row.is-empty b { color:var(--writing-accent); }
.op-row-pick { border:1px solid var(--writing-line); border-radius:4px; padding:12px; background:var(--writing-paper); }
.op-row-pick h4 { margin:14px 0 8px; font-size:16px; }
.op-row-pick>p { margin:6px 0; }
.op-rhyme-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.op-rhyme-tile { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"c g" "c n" "a a"; column-gap:10px; align-items:center; text-align:left; min-width:0; padding:8px 10px; border:1px solid var(--writing-line); border-radius:4px; background:var(--writing-paper); color:var(--writing-ink); cursor:pointer; }
.op-rhyme-tile:hover:not(:disabled) { border-color:var(--writing-accent); }
.op-rhyme-tile>b { grid-area:c; font:32px/1.3 "Noto Serif TC","Songti TC",serif; }
.op-rhyme-tile>span,.op-rhyme-tile>small,.op-rhyme-tile>em { display:block; min-width:0; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.op-rhyme-tile>span { grid-area:g; }
.op-rhyme-tile>small { grid-area:n; color:var(--writing-muted); }
.op-rhyme-tile>em { grid-area:a; margin-top:4px; font-style:normal; font-weight:600; color:var(--writing-accent-deep); }
.op-rhyme-tile[aria-pressed=true] { border:2px solid var(--writing-accent); background:var(--writing-accent-soft); }
.op-rhyme-tile:disabled { opacity:.5; cursor:not-allowed; }
.op-row-pick>details { margin-top:12px; }
.op-row-pick>details[open]>.op-rhyme-tiles { margin-top:4px; }
@media (max-width:900px) {
 .op-rhyme-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .op-rhyme-tile { padding:8px; column-gap:8px; }
 .op-rhyme-tile>b { font-size:28px; }
 .op-row-pick { padding:10px; }
 .op-locked .op-step-head { padding:12px; }
}

/* 완성 직후에는 점검 결과보다 시 한 편을 먼저 읽는다. */
.op-completed { max-width:800px; margin:0 auto; padding:clamp(20px,4vw,48px); text-align:center; background:var(--writing-paper); border:1px solid var(--writing-line); border-radius:4px; }
.op-completed h2 { margin:0 0 28px; font-size:clamp(22px,3vw,30px); }
.op-completed-poem { font-family:"Noto Serif TC","Songti TC",serif; font-size:clamp(28px,6vw,44px); line-height:1.8; letter-spacing:.16em; color:var(--writing-ink); }
.op-completed-line { margin:0; white-space:nowrap; }
.op-completed-korean { margin:28px 0; font-size:16px; line-height:1.8; color:var(--writing-muted); }
.op-completed-meaning { margin:0; overflow-wrap:anywhere; }
.op-completed .tile-actions { justify-content:center; }
/* 갑돌이의 평 — 가운데 정렬된 완성 화면 안에서도 왼쪽 정렬, 편지처럼 읽히게 */
section[aria-label="갑돌이의 평"] { text-align:left; max-width:42em; margin:36px auto 0; }
section[aria-label="갑돌이의 평"] > h3 { margin:0 0 12px; }
.writing-deep-review { text-align:left; margin-top:20px; padding:clamp(18px,3vw,30px); background:#fffdf8; border:1px solid var(--writing-line); border-radius:6px; }
.writing-deep-review > h4 { margin:0 0 4px; font-size:17px; }
.writing-deep-review > p { margin:0 0 10px; color:var(--writing-muted); font-size:14px; }
.writing-deep-review > details > summary { cursor:pointer; color:var(--writing-muted); font-size:14px; margin:6px 0; }
.deep-letter { margin-top:18px; font-size:16.5px; line-height:1.95; color:var(--writing-ink); word-break:keep-all; overflow-wrap:anywhere; }
.deep-letter h5 { margin:30px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--writing-line); font-size:16px; font-weight:700; color:var(--writing-accent-deep); }
.deep-letter h5:first-child { margin-top:6px; }
.deep-letter p { margin:0 0 14px; }
.deep-letter ul { margin:4px 0 16px; padding-left:1.3em; }
.deep-letter li { margin:8px 0; }
.deep-letter strong { font-weight:700; }
.deep-hanja { font-family:"Noto Serif TC","Songti TC",serif; font-size:1.06em; letter-spacing:.03em; }
.deep-extra { margin-top:22px; padding-top:14px; border-top:1px dashed var(--writing-line); text-align:left; }
.deep-extra > summary { cursor:pointer; font-weight:600; color:var(--writing-accent-deep); }
/* AI 도우미(DeepSeek) 평도 갑돌이의 평과 같은 읽기 모양 */
.writing-teacher-review { text-align:left; max-width:42em; margin:16px 0 0; padding:clamp(18px,3vw,30px); background:#fffdf8; border:1px solid var(--writing-line); border-radius:6px; font-size:16.5px; line-height:1.95; color:var(--writing-ink); word-break:keep-all; overflow-wrap:anywhere; }
.deep-extra .writing-teacher-review { padding:0; border:0; background:none; margin-top:12px; }
.writing-teacher-section + .writing-teacher-section { margin-top:26px; }
.writing-teacher-section > h4 { margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--writing-line); font-size:16px; font-weight:700; color:var(--writing-accent-deep); }
.writing-teacher-section p { margin:0 0 12px; }
.writing-teacher-section article { margin:0 0 18px; padding-left:14px; border-left:3px solid var(--writing-line); }
.writing-teacher-section article strong[lang] { font-family:"Noto Serif TC","Songti TC",serif; font-size:1.2em; font-weight:600; letter-spacing:.04em; }
.writing-teacher-section [lang="zh-Hant"] { font-family:"Noto Serif TC","Songti TC",serif; }
.writing-teacher-section details { margin:4px 0 0; font-size:14.5px; line-height:1.8; color:var(--writing-muted); }
.writing-teacher-section details > summary { cursor:pointer; }
.writing-teacher-section blockquote { margin:8px 0 10px; padding:8px 12px; background:var(--writing-paper); border-radius:4px; }
.writing-teacher-section blockquote p { margin:0 0 4px; }
.writing-teacher-section blockquote cite { font-size:13.5px; font-style:normal; }
.writing-teacher-section .writing-button { margin-top:2px; }