/* Inline diary decoration: the writing controls stay outside the shared paper canvas. */

body.inhwa-journal-open #journal-bottom-board {
    /* Opening the sticker tray must not narrow the paper and reflow the entry. */
    scrollbar-gutter: stable;
}

.inhwa-write-surface .inhwa-write-paper:has(#stationery-writing-surface) {
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.inhwa-write-surface .inhwa-write-paper:has(#stationery-writing-surface[data-pending]) {
    /* Until the diary's decoration is known, the field stands in the default
       inhwa sheet: page colour, double rule, padding and body type. Entering the
       editor never shows a bare textarea before the paper. */
    padding: 29px 32px 35px;
    background: #fffdf7;
    border: 1px solid #e2dfd2;
    box-shadow: inset 0 0 0 7px #fffdf7, inset 0 0 0 8px #e9e5da;
}

html.dark .inhwa-write-surface .inhwa-write-paper:has(#stationery-writing-surface[data-pending]) {
    background: #30312b;
    border-color: #51564a;
    box-shadow: inset 0 0 0 7px #30312b, inset 0 0 0 8px #43483d;
}

.inhwa-write-surface .inhwa-write-paper:has(#stationery-writing-surface) .inhwa-writing-prompt {
    margin: 0 0 16px;
    padding: 2px 4px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.inhwa-write-surface .inhwa-writing-prompt__label {
    font-size: 12px;
    line-height: 1.5;
}

.inhwa-write-surface .inhwa-writing-prompt__body {
    margin-top: 5px;
    font-family: Pretendard, "Noto Sans KR", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--oru-on-surface-variant);
}

.inhwa-write-surface .inhwa-write-tool > .material-symbols-outlined {
    font-size: 20px;
    flex: none;
}

.stationery-write-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.stationery-writing-surface {
    width: 100%;
    min-width: 0;
    scroll-margin-top: 72px;
}

.stationery-writing-surface > .stationery-surface {
    width: 100%;
    margin: 0;
}

.stationery-writing-surface .stationery-surface .stationery-canvas {
    width: 100%;
}

.stationery-writing-surface .stationery-surface .stationery-photo img {
    object-fit: contain;
    object-position: center;
}

.stationery-writing-surface .stationery-editor-input {
    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--stationery-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: clamp(1rem, 3.7vw, 1.12rem);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: inherit;
    text-shadow: 1px 0 var(--stationery-paper), -1px 0 var(--stationery-paper),
        0 1px var(--stationery-paper), 0 -1px var(--stationery-paper);
    /* The same word-keeping breaks as the reading paper (2026-09-26 contract;
       replaces the 2026-09-20 word-break: normal choice). */
    overflow-wrap: anywhere;
    word-break: keep-all;
    white-space: pre-wrap;
    text-wrap: wrap;
    resize: none;
    appearance: none;
}

/* Version-1 paper: the entire blank paper is a writing target, not just the
   placeholder's first line. A version-2 paper without stickers fills the
   remaining height through the writing flex chain below and focuses the entry
   on a blank-paper tap; one with stickers keeps this floor so its saved canvas
   geometry does not change. */
.stationery-writing-surface .stationery-surface:is(:not([data-version="2"]), :has(.stationery-sticker)) .stationery-editor-input {
    min-height: calc(var(--stationery-paper-min-height) - var(--stationery-paper-padding-block) - var(--stationery-paper-padding-block)) !important;
}

/* The pending stand-in writes in the default paper's body type. A version-2
   editor keeps the paper's own type (as reading does), so a line breaks at the
   same word before and after saving. */
#stationery-writing-surface[data-pending] > #journal-body-text,
.stationery-writing-surface .stationery-surface:not([data-version="2"])[data-font="default"] #journal-body-text.stationery-editor-input {
    font-family: Pretendard, "Noto Sans KR", sans-serif;
    font-size: clamp(1rem, 3.7vw, 1.12rem);
    line-height: 1.9;
}

.stationery-writing-surface .stationery-surface[data-font="serif"] #journal-body-text.stationery-editor-input {
    font-family: "Maru Buri", MaruBuri, Lora, AppleMyungjo, serif;
    font-size: clamp(1rem, 3.7vw, 1.12rem);
    line-height: 1.9;
}

.stationery-writing-surface .stationery-surface[data-font="soft"] #journal-body-text.stationery-editor-input {
    font-family: "Oru Gowun Dodum", Pretendard, "Noto Sans KR", sans-serif;
    font-size: clamp(1rem, 3.7vw, 1.12rem);
    line-height: 1.9;
    letter-spacing: -.012em;
}

.stationery-writing-surface .stationery-surface[data-font="handwriting"] #journal-body-text.stationery-editor-input {
    font-family: "Oru Nanum Pen", "Maru Buri", MaruBuri, AppleMyungjo, serif;
    font-size: clamp(1.28rem, 4.6vw, 1.52rem);
    line-height: 1.7;
    letter-spacing: .01em;
}

.stationery-writing-surface .stationery-editor-input::placeholder {
    color: var(--stationery-muted);
    opacity: 1;
}

.stationery-writing-surface .stationery-editor-input:focus-visible {
    outline: 0;
}

/* Touch typing already shows the caret; an outside ring was clipped by the
   scroller into two stray lines. Keyboard-and-pointer users keep an inset ring. */
@media not all and (pointer: coarse) {
    .stationery-writing-surface:has(.stationery-editor-input:focus-visible) .stationery-canvas {
        outline: 2px solid color-mix(in srgb, var(--oru-primary) 48%, transparent);
        outline-offset: -3px;
    }
}

.stationery-writing-toggle {
    position: relative;
}

.stationery-writing-toggle .stationery-write-count {
    position: static;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 0;
    font-size: 10px;
}

.stationery-writing-tray {
    --stationery-writing-tray-bg: color-mix(in srgb, var(--oru-surface-container) 68%, var(--oru-surface-ivory));
    position: sticky;
    display: flex;
    flex-direction: column;
    z-index: 18;
    bottom: max(6px, env(safe-area-inset-bottom));
    max-height: min(40dvh, 360px);
    margin-top: 2px;
    padding: 16px;
    overflow: hidden;
    color: var(--oru-on-surface);
    background: var(--stationery-writing-tray-bg);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 14px;
    box-shadow: 0 -10px 34px rgb(44 51 42 / .14);
}

.stationery-writing-tray-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.stationery-writing-tray.hidden { display: none; }

.stationery-writing-tray-header,
.stationery-writing-tray-heading,
.stationery-writing-tray-actions,
.stationery-writing-selection-heading,
.stationery-writing-selection-actions {
    display: flex;
    align-items: center;
}

.stationery-writing-tray-header {
    position: sticky;
    z-index: 2;
    top: 0;
    justify-content: space-between;
    gap: 12px;
    margin: -2px 0 14px;
    padding: 2px 0 8px;
    background: var(--stationery-writing-tray-bg);
}

.stationery-writing-tray-heading {
    min-width: 0;
    gap: 8px;
}

.stationery-writing-tray-heading h3 {
    margin: 0;
    font-family: "Maru Buri", MaruBuri, AppleMyungjo, serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

#stationery-writing-count {
    flex: none;
    color: var(--oru-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.stationery-writing-tray-actions { flex: none; gap: 4px; }

.stationery-writing-tray-actions button {
    display: grid;
    width: 40px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    color: var(--oru-on-surface-variant);
    background: transparent;
    border: 0;
    border-radius: 999px;
}

.stationery-writing-tray-actions button:hover:not(:disabled) {
    color: var(--oru-primary);
    background: var(--oru-surface-ivory);
}

.stationery-writing-tray-actions button:disabled { opacity: .38; }
.stationery-writing-tray-actions .material-symbols-outlined { font-size: 19px; }

.stationery-writing-stickers {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.stationery-writing-stickers .stationery-sticker-choice {
    min-width: 0;
    min-height: 72px;
    padding: 6px 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--oru-on-surface-variant);
    background: var(--oru-surface-ivory);
    border: 1px solid transparent;
    border-radius: 10px;
}

.stationery-writing-stickers .stationery-sticker-choice:hover,
.stationery-writing-stickers .stationery-sticker-choice:focus-visible {
    color: var(--oru-primary);
    border-color: var(--oru-border-subtle);
}

.stationery-writing-stickers .stationery-sticker-choice img {
    display: block;
    width: 38px;
    height: 38px;
}

.stationery-writing-stickers .stationery-sticker-choice span {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.stationery-writing-selection {
    margin-top: 14px;
    padding: 13px;
    background: var(--oru-surface-ivory);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 12px;
}

.stationery-writing-selection.hidden { display: none; }

.stationery-writing-selection-heading {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
}

.stationery-writing-selection-heading p { margin: 0; color: var(--oru-text-muted); }
.stationery-writing-selection-heading strong { min-width: 0; overflow-wrap: anywhere; }

.stationery-writing-selection label {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 40px;
    color: var(--oru-on-surface-variant);
    font-size: 12px;
}

.stationery-writing-selection input[type="range"] {
    width: 100%;
    min-height: 32px;
    accent-color: var(--oru-primary);
}

.stationery-writing-selection-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.stationery-writing-selection-actions button,
.stationery-writing-return {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    color: var(--oru-primary);
    background: transparent;
    border: 1px solid var(--oru-border-subtle);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.stationery-writing-selection-actions .material-symbols-outlined { font-size: 17px; }

#stationery-writing-remove { color: var(--oru-error, #a33d3d); }

.stationery-writing-status {
    min-height: 1.4em;
    margin: 10px 0 0;
    color: var(--oru-text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.stationery-writing-return {
    flex: none;
    width: 100%;
    margin: 10px 0 -4px;
    color: var(--oru-on-primary);
    background: var(--oru-primary);
    border-color: var(--oru-primary);
}

.stationery-writing-surface:not(.stationery-writing-editing) .stationery-surface .stationery-editor-input {
    pointer-events: auto;
}

.stationery-writing-editing .stationery-surface .stationery-editor-input {
    pointer-events: none;
}

.stationery-writing-surface .stationery-surface .stationery-sticker-layer {
    pointer-events: none;
}

.stationery-writing-editing .stationery-surface .stationery-sticker-layer,
.stationery-writing-editing .stationery-surface .stationery-sticker {
    pointer-events: auto;
    touch-action: none;
}

.stationery-writing-editing .stationery-surface .stationery-sticker.stationery-selected {
    outline: 2px dashed color-mix(in srgb, var(--oru-primary) 82%, white);
    outline-offset: 5px;
}

.stationery-writing-toggle:focus-visible,
.stationery-writing-tray button:focus-visible,
.stationery-writing-tray input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--oru-primary) 72%, transparent);
    outline-offset: 2px;
}

html.dark .stationery-writing-tray {
    --stationery-writing-tray-bg: color-mix(in srgb, var(--oru-surface-container) 82%, #20231e);
}

html.dark .stationery-writing-stickers .stationery-sticker-choice,
html.dark .stationery-writing-selection {
    background: color-mix(in srgb, var(--oru-surface-ivory) 88%, #20231e);
}

@media (max-width: 767px) {
    /* Writing, the decorate preview and reading set one paper on a phone: the
       same side padding and fewer stacked frames, so the text column is as wide
       as the screen allows and wraps alike on all three. Theme-card thumbnails
       (data-mini) keep their own scale. */
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"]:not([data-mini="true"]) .td-sheet,
    .inhwa-write-surface .inhwa-write-paper:has(#stationery-writing-surface[data-pending]) {
        padding-right: 20px;
        padding-left: 20px;
    }

    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="inhwa"]:not([data-mini="true"]) .td-sheet { --td-frame-gap: 4px; padding: 24px 20px 20px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="travel-notebook"]:not([data-mini="true"]) .td-sheet { padding-left: 32px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="travel-notebook"]:not([data-mini="true"]) .td-margin-rule { left: 22px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="gold-sea"]:not([data-mini="true"]) .td-sheet { padding-left: 32px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="gold-sea"]:not([data-mini="true"]) .td-margin-rule { left: 22px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="hamster"]:not([data-mini="true"]) { padding: 10px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="hamster"]:not([data-mini="true"]) .td-sheet { padding-inline: 14px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="hamster"]:not([data-mini="true"]) .td-footer-art { margin-inline: -14px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="rabbit"]:not([data-mini="true"]) .td-entry { padding: 10px 8px 14px; border: 0; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="rabbit"]:not([data-mini="true"]) .td-footer-art { margin-inline: -20px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="sleepy"]:not([data-mini="true"]) .td-entry { padding: 10px 8px 14px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="cheer"]:not([data-mini="true"]) .td-sheet { padding-left: 32px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="cheer"]:not([data-mini="true"]) .td-margin-rule { left: 22px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"][data-theme="cheer"]:not([data-mini="true"]) .td-footer-art { margin-right: -20px; margin-left: -32px; }
    :is(#stationery-writing-surface, #stationery-read-surface, #stationery-preview) .stationery-surface[data-version="2"]:is([data-theme="sleepy"], [data-theme="borimood"], [data-theme="boriroutine"], [data-theme="borifood"]):not([data-mini="true"]) .td-footer-art { margin-inline: -20px; }

    .stationery-writing-stickers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 340px) {
    .stationery-writing-tray { padding: 12px; }
    .stationery-writing-stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stationery-writing-selection-actions button { flex: 1 1 calc(50% - 4px); padding-inline: 8px; }
}

@media (orientation: landscape) and (max-height: 520px) {
    .stationery-writing-tray {
        max-height: min(70dvh, 360px);
        padding: 12px 14px;
    }
    /* On short screens the heading must scroll with the sticker rows, leaving
       enough space to see each sticker and its name above the return action. */
    .stationery-writing-tray-header { position: static; }
    .stationery-writing-stickers { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .stationery-writing-stickers .stationery-sticker-choice { min-height: 62px; }
    .stationery-writing-stickers .stationery-sticker-choice img { width: 32px; height: 32px; }
}

html[data-ios-text-scale]:not([data-ios-text-scale="1"]) .stationery-writing-tray-header {
    /* At large type sizes, keep the return action pinned but let this heading
       scroll so the two bars cannot cover the entire short sticker viewport. */
    position: static;
    align-items: flex-start;
}

html[data-ios-text-scale]:not([data-ios-text-scale="1"]) .stationery-writing-tray-heading {
    display: block;
}

html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #stationery-writing-count {
    display: block;
    margin-top: 3px;
}

html[data-ios-text-scale]:not([data-ios-text-scale="1"]) .stationery-writing-stickers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-ios-text-scale]:not([data-ios-text-scale="1"]) .stationery-writing-selection-actions button {
    flex: 1 1 100%;
}

/* Writing shell: one content scroller, a persistent header and one tools dock. */
#panel-mode-write.inhwa-write-surface {
    height: min(860px, calc(100dvh - 130px));
    min-height: 360px;
    gap: 12px;
    overflow: hidden;
    padding-bottom: 0;
}
#panel-mode-write .journal-write-header { position: relative; top: auto; flex: none; margin: 0; }
#panel-mode-write .inhwa-write-stack { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0; }
#panel-mode-write .inhwa-write-sections { flex: 1 0 auto; }
/* The dock is one surface: a single hairline on top, then an open panel, the
   tools and the save action without further dividers. */
#writing-dock { flex: none; min-height: 0; border-top: 1px solid var(--oru-border-subtle); }
#writing-dock .inhwa-write-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px 0; margin: 0; }
#writing-dock .inhwa-write-tool { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding: 6px 3px; border-radius: 10px; font-size: 12px; }
body.inhwa-journal-open #writing-dock .journal-write-actions { position: static; min-height: 54px; padding: 6px 0 max(10px, calc(var(--sab) + 4px)); background: transparent; border-top: 0; box-shadow: none; }
#writing-dock .stationery-writing-tray { position: relative; bottom: auto; margin: 6px 0 0; max-height: min(38dvh, 320px); padding: 10px; box-shadow: none; }
/* Refine is a sheet on the dock: rounded on top only, lifted off the paper by a
   soft shadow while the paper's cut edge fades out behind it. */
#writing-dock .inhwa-write-refine { max-height: min(34dvh, 280px); overflow: hidden; margin: 6px 0 0; padding: 4px 10px 8px; gap: 2px; border: 1px solid var(--oru-border-subtle); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--oru-surface-container); box-shadow: 0 -6px 16px rgb(0 0 0 / .06); }
#writing-dock .inhwa-write-refine.hidden { display: none; }
.writing-panel-heading { display: flex; align-items: center; justify-content: space-between; flex: none; }
.writing-panel-heading h3 { font-size: 15px; font-weight: 600; }
.writing-panel-heading button { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.writing-refine-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.stationery-writing-adjust { width: 100%; font-size: 12px; }
.stationery-writing-adjust summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.stationery-writing-adjust > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stationery-writing-adjust button { min-height: 44px; padding: 4px; border: 1px solid var(--oru-border-subtle); border-radius: 8px; }
.writing-prompt-toggle { align-self: flex-start; min-height: 44px; padding: 6px 0; color: var(--oru-text-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
#panel-mode-read .writing-edit-action { width: 44px; min-width: 44px; padding: 0; }
@media (max-width: 767px) {
    body.inhwa-journal-write #journal-bottom-board { overflow: hidden; padding: 0; }
    /* Writing is a full-screen task. Keep the save action inside the visible
       viewport when WebKit restores its height after the keyboard closes. */
    body.inhwa-journal-write #mobile-bottom-nav { visibility: hidden; }
    body.inhwa-journal-write:not(.writing-keyboard-open) #journal-bottom-board { bottom: 0; height: 100dvh; }
    body.inhwa-journal-open #panel-mode-write { height: 100%; min-height: 0; padding: calc(var(--sat) + 2px) 16px 0; gap: 8px; }
    /* The dock reaches both screen edges on the screen's own background. */
    #writing-dock { margin-inline: -16px; padding-inline: 16px; background: var(--oru-background); }
    #writing-dock .inhwa-write-tool { flex-direction: column; font-size: 11px; gap: 2px; min-height: 48px; }
    #writing-dock .journal-write-actions { gap: 6px; }
    #writing-dock .journal-write-actions > button { min-width: 0; padding-inline: 12px; white-space: nowrap; }
    #writing-dock #save-diary-btn { width: 100%; justify-content: center; }
    /* The paper fills the height between the header and the photo strip above
       the dock. A sticker's y is a share of the canvas height and reading keeps
       the 400px sheet, so a paper that carries stickers keeps that geometry.
       This covers version-1 papers too; their text-growth reflow only moves
       stickers, and a paper with stickers does not fill. */
    #panel-mode-write .inhwa-write-paper:has(.stationery-surface):not(:has(.stationery-sticker)),
    #panel-mode-write .inhwa-write-paper:has(.stationery-surface):not(:has(.stationery-sticker)) :is(#stationery-writing-surface, .stationery-surface, .stationery-canvas, .td-sheet),
    #panel-mode-write .inhwa-write-paper:has(#stationery-writing-surface[data-pending]),
    #panel-mode-write #stationery-writing-surface[data-pending] {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
    }
    #panel-mode-write #stationery-writing-surface[data-pending] > #journal-body-text { flex: 1 0 auto; }
    /* The filled height replaces the sheet's 400px floor, so a short phone does
       not scroll an empty paper. */
    #panel-mode-write .inhwa-write-paper:has(.stationery-surface[data-version="2"]):not(:has(.stationery-sticker)) .td-sheet { min-height: 0; }
    #panel-mode-write .inhwa-write-paper:has(.stationery-surface[data-version="2"]):not(:has(.stationery-sticker)) .td-entry { flex: 1 0 auto; }
    /* A version-1 paper without stickers fills the same height; its paper block
       (with the photo above it) takes the rest, so no blank band sits above the dock. */
    #panel-mode-write .inhwa-write-paper:has(.stationery-surface:not([data-version="2"])):not(:has(.stationery-sticker)) .stationery-paper { flex: 1 0 auto; }
    body.inhwa-journal-write.writing-keyboard-open #journal-bottom-board { top: var(--writing-viewport-top); height: var(--writing-viewport-height); bottom: auto; }
    /* Give the visible viewport to the paper while the iPhone keyboard is up.
       The photo strip and dock sit below the paper and fold away (and back)
       with a short transition; nothing above the caret moves. */
    /* A length (not none) lets the strip's height transition; it stays well
       above one strip row, also with enlarged text. */
    body.inhwa-journal-write #panel-mode-write .inhwa-write-media { max-height: calc(240px * var(--oru-ios-text-scale, 1)); }
    body.inhwa-journal-write #panel-mode-write .inhwa-write-media,
    body.inhwa-journal-write #panel-mode-write #writing-dock {
        transition: opacity 180ms ease, max-height 220ms ease, visibility 0s linear 0s;
    }
    body.inhwa-journal-write.writing-keyboard-open #panel-mode-write .inhwa-write-media,
    body.inhwa-journal-write.writing-keyboard-open #panel-mode-write #writing-dock {
        visibility: hidden;
        opacity: 0;
        max-height: 0;
        min-height: 0;
        overflow: hidden;
        transition: opacity 180ms ease, max-height 220ms ease, visibility 0s linear 220ms;
    }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    body.inhwa-journal-write #panel-mode-write .inhwa-write-media,
    body.inhwa-journal-write #panel-mode-write #writing-dock,
    body.inhwa-journal-write.writing-keyboard-open #panel-mode-write .inhwa-write-media,
    body.inhwa-journal-write.writing-keyboard-open #panel-mode-write #writing-dock { transition: none; }
}
@media (max-height: 520px) {
    #writing-dock .stationery-writing-tray, #writing-dock .inhwa-write-refine { max-height: 30dvh; }
    #panel-mode-write .journal-write-header { padding-block: 2px; }
}

#writing-dock .writing-refine-scroll { flex: 1 1 auto; }
#writing-refine-title:focus { outline: none; }

#writing-dock #ai-refine-btn, #writing-dock .style-chip { min-height: 44px; }
/* Short screens reserve header space while panels yield height to their own scroller. */
#panel-mode-write .inhwa-write-stack { padding-block: 0; }
#panel-mode-write .inhwa-write-sections { padding-bottom: 8px; }
#writing-dock { display: flex; flex-direction: column; flex: none; max-height: calc(100% - 65px); }
#writing-dock .inhwa-write-refine, #writing-dock .stationery-writing-tray { flex: 0 1 auto; min-height: 0; order: 0; }
#writing-dock .inhwa-write-tools { flex: none; order: 1; }
#writing-dock .journal-write-actions { flex: none; order: 2; }
/* On a phone the dock owns the bottom of the writing screen, so a toast (and its
   action, such as undoing an applied refine) sits under the header instead of
   over the sheet, the tools or the save action. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 520px) {
    body.inhwa-journal-write #app-toast { bottom: auto; top: calc(var(--sat, 0px) + 56px); }
}
/* The choices (one scrolling row of styles, a two-line caption and the action)
   fit the sheet without scrolling, also on a 568pt phone; only a long result
   scrolls, in its own text. */
#writing-dock .inhwa-write-refine:not(.hidden) { animation: oru-sheet-in 200ms cubic-bezier(.2, .8, .2, 1); }
@keyframes oru-sheet-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
    #writing-dock .inhwa-write-refine:not(.hidden) { animation: none; }
}
#panel-mode-write:has(#writing-refine-panel:not(.hidden)) .inhwa-write-stack {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
#writing-refine-title { white-space: nowrap; }
#refine-quota-hint { min-width: 0; margin: 0 auto 0 8px; overflow: hidden; color: var(--oru-text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
#writing-dock #oru-refine-chips {
    flex-wrap: nowrap; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
#writing-dock #oru-refine-chips::-webkit-scrollbar { display: none; }
#writing-dock #oru-refine-chips .style-chip { flex: none; scroll-snap-align: start; }
#ai-refine-caption { line-height: 1.45; min-height: calc(2 * 1.45em); }
/* A result replaces the style choices on the same surface; accepting it never
   requires finding a hidden footer. Its height gives the text about 150px on an
   852pt phone and still leaves a third of a 667pt screen to the paper. */
#writing-dock .writing-refine-result { height: min(280px, max(192px, calc(37dvh - 38px))); }
#writing-dock .writing-refine-result #ai-suggest-box { gap: 4px; }
#writing-dock .writing-refine-result .writing-refine-choices { display: none; }
#writing-dock .writing-refine-result .writing-refine-scroll { display: flex; flex-direction: column; overflow: hidden; }
#writing-dock .writing-refine-result #ai-suggest-box { flex: 1 1 0; min-height: 0; }
#writing-dock .writing-refine-result #ai-suggest-box > * { flex: none; }
#writing-dock .writing-refine-result :is(#ai-suggest-text, #ai-refine-original-text) { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#writing-dock #ai-suggest-box button { min-height: 44px; }
.writing-refine-comparison { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.writing-refine-label { color: var(--oru-text-muted); font-size: 12px; font-weight: 600; }
#ai-refine-original-text { display: none; min-width: 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.writing-refine-when-original { display: none; }
#ai-suggest-box:has(.writing-refine-original[open]) :is(#ai-suggest-text, .writing-refine-when-suggested) { display: none; }
#ai-suggest-box:has(.writing-refine-original[open]) #ai-refine-original-text { display: block; }
#ai-suggest-box:has(.writing-refine-original[open]) .writing-refine-when-original { display: inline; }
/* 원래 글 보기 · 다른 느낌으로 are quiet links on the left, 무시 · 반영 on the right. */
.writing-refine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.writing-refine-original summary, .writing-refine-restyle {
    display: flex; align-items: center; min-height: 44px; padding: 0 6px; cursor: pointer; list-style: none;
    color: var(--oru-text-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
}
.writing-refine-original summary::-webkit-details-marker { display: none; }
.writing-refine-restyle + button { margin-left: auto; }
/* Large type: two rows, the quiet links on the left and 무시 above 반영 on the right. */
html[data-ios-text-scale]:not([data-ios-text-scale="1"]) .writing-refine-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
html[data-ios-text-scale]:not([data-ios-text-scale="1"]) .writing-refine-actions > :is(.writing-refine-restyle, :last-child) { order: 1; }

/* Keep the full sticker and its transform handles in view while editing on desktop. */
@media (min-width: 768px) and (min-height: 521px) {
    body.inhwa-journal-write #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr); column-gap: 12px;
    }
    #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) .journal-write-header { grid-column: 1 / -1; }
    #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) .inhwa-write-stack { grid-column: 1; grid-row: 2; height: 100%; }
    #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) #writing-dock { grid-column: 2; grid-row: 2; height: 100%; max-height: none; }
    #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) .stationery-writing-tray { flex: 1 1 0; max-height: none; }
    #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) .inhwa-write-tools { margin-top: auto; }
    #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) .inhwa-write-tool { flex-direction: column; font-size: 11px; gap: 2px; min-height: 48px; }
    #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) .stationery-writing-stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Keep a complete sticker row usable above the persistent dock on short landscape screens. */
@media (orientation: landscape) and (max-height: 520px) {
    #writing-dock .stationery-writing-tray { max-height: min(65dvh, 300px); padding: 6px; }
    #writing-dock .stationery-writing-tray-header { margin: 0 0 4px; padding: 0; }
    #writing-dock .stationery-writing-return { min-height: 44px; margin: 4px 0 0; }
}
@media (orientation: landscape) and (max-height: 520px) {
    body.inhwa-journal-write #journal-bottom-board {
        position: fixed; inset: 0; z-index: 70; width: 100%; height: 100dvh;
        max-height: none; max-width: none; margin: 0; padding: 0; overflow: hidden; border-radius: 0; background: var(--oru-surface-ivory);
    }
    body.inhwa-journal-write #panel-mode-write {
        height: 100%; min-height: 0; padding: 4px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); gap: 4px;
    }
    #panel-mode-write .journal-write-header { padding-inline: 44px; }
    #writing-dock { max-height: calc(100% - 90px); }
    #writing-dock .inhwa-write-tools { padding-block: 4px; }
}
@media (orientation: landscape) and (max-height: 520px) {
    body.inhwa-journal-write #panel-mode-write {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr); column-gap: 12px;
        max-width: none;
    }
    #panel-mode-write .journal-write-header { grid-column: 1 / -1; }
    #panel-mode-write .inhwa-write-stack { grid-column: 1; grid-row: 2; height: 100%; }
    #writing-dock { grid-column: 2; grid-row: 2; height: 100%; max-height: none; }
    #writing-dock .stationery-writing-tray, #writing-dock .inhwa-write-refine { flex: 1 1 0; max-height: none; }
    #writing-dock .inhwa-write-tools { margin-top: auto; }
    #writing-dock .stationery-writing-stickers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 520px) {
    #stationery-writing-surface .stationery-rotate-handle { top: -12px; }
    #stationery-writing-surface .stationery-scale-handle { right: -12px; bottom: -12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
    #writing-dock .inhwa-write-tool { flex-direction: column; font-size: 11px; gap: 2px; min-height: 48px; }
}

@media (max-width: 400px) and (max-height: 700px) {
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #panel-mode-write .journal-write-header { padding-inline: 0; }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #panel-write-badge { padding-inline: 44px; }
    /* Large type on a short phone may fold the paper so a result line stays readable. */
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #panel-mode-write:has(.writing-refine-result) { gap: 4px; overflow: clip; }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #panel-mode-write:has(.writing-refine-result) .inhwa-write-stack { flex: 0 1 0; }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #panel-mode-write:has(.writing-refine-result) #writing-dock { flex: 1 1 0; max-height: none; }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #writing-dock .writing-refine-result { flex: 1 1 0; height: auto; max-height: none; padding: 6px; }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #writing-dock .writing-refine-result :is(#ai-suggest-text, #ai-refine-original-text) { padding: 4px; }
}

/* Large type on a short phone needs room for the paper as well as the tray.
   Keep a scrollable paper viewport, then let the tray, tools and save action
   continue in the writing panel's own flow instead of squeezing either away. */
@media (max-width: 400px) and (max-height: 700px) {
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) body.inhwa-journal-write:has(#stationery-writing-tray:not(.hidden)) #journal-bottom-board {
        bottom: 0; height: 100dvh;
    }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) body.inhwa-journal-write:has(#stationery-writing-tray:not(.hidden)) #mobile-bottom-nav { visibility: hidden; }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) {
        overflow-y: auto; overscroll-behavior: contain; padding-bottom: 16px;
    }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) .inhwa-write-stack {
        flex: 0 0 240px;
    }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #panel-mode-write:has(#stationery-writing-tray:not(.hidden)) #writing-dock {
        flex: none; max-height: none;
    }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #writing-dock .stationery-writing-tray {
        flex: none; max-height: none;
    }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #writing-dock .stationery-writing-tray-scroll {
        flex: none; overflow: visible;
    }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #writing-dock .stationery-writing-tray-header {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; margin: 0 0 4px; padding: 0;
    }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #writing-dock .stationery-writing-tray-heading { display: contents; }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #writing-dock .stationery-writing-tray-heading h3 { grid-column: 1 / -1; }
    html[data-ios-text-scale]:not([data-ios-text-scale="1"]) #writing-dock #stationery-writing-count { margin: 0; }
}