/* 인화: 일기 읽기·쓰기·대화 표면. 기능 상태는 기존 JS와 API가 소유한다. */
.inhwa-sheet {
    background: var(--oru-surface-ivory);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(72, 89, 78, .06);
}

.inhwa-print {
    display: block;
    box-sizing: border-box;
    padding: 4px;
    overflow: hidden;
    background: var(--oru-surface-ivory);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(38, 36, 28, .08);
}

.inhwa-print > img,
.inhwa-print > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

body.inhwa-journal-open #view-state-default,
body.inhwa-journal-open #home-calendar-card,
body.inhwa-journal-open #report-archive-banner,
body.inhwa-journal-open #recent-timeline {
    display: none !important;
}

body.inhwa-journal-open #journal-bottom-board {
    width: 100%;
    max-width: none;
}

body.inhwa-journal-open #panel-mode-read,
body.inhwa-journal-open #panel-mode-write {
    animation: none;
}

/* 읽기: 사진, 조작 버튼, 본문을 독립된 문서 흐름에 배치한다. */
#panel-mode-read.inhwa-read-surface {
    position: relative;
    gap: 0;
    overflow: visible;
    color: var(--oru-on-surface);
    background: var(--oru-surface-ivory);
    border-color: var(--oru-border-subtle);
}

.inhwa-read-surface .inhwa-read-header {
    position: relative;
    z-index: 5;
    padding: 8px 20px 24px;
}
.journal-read-sync-status {
    width: fit-content;
    max-width: 100%;
    margin-top: 12px;
    padding: 7px 11px;
    border-radius: 10px;
    background: var(--oru-surface-container);
    color: var(--oru-on-surface-variant);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.journal-read-sync-status--warning {
    color: var(--oru-error, #a33b35);
}
/* 확정되면 자리에서 조용히 사라진다(setReadSyncStatus). */
.journal-read-sync-status { transition: opacity .2s ease; }
.journal-read-sync-status--leaving { opacity: 0; }

.inhwa-read-toolbar {
    display: flex;
    justify-content: flex-end;
    min-height: 44px;
    margin-bottom: 18px;
}
.inhwa-read-toolbar #panel-search-return {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    margin: 0 auto 0 0;
    padding: 0;
    border-radius: 50%;
    color: var(--oru-on-surface-variant);
}
.inhwa-read-toolbar #panel-search-return.hidden { display: none; }
.inhwa-read-toolbar #panel-search-return .material-symbols-outlined { font-size: 22px; }
.inhwa-read-surface .journal-read-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.inhwa-read-heading { min-width: 0; }
.inhwa-read-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    color: var(--oru-text-muted);
    font-size: .6875rem;
    line-height: 1.6;
}

.inhwa-read-surface #panel-read-context-label {
    color: var(--oru-text-muted);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.inhwa-read-surface #panel-read-date {
    color: var(--oru-on-surface);
    margin: 0;
    font-family: "Maru Buri", MaruBuri, serif;
    font-size: 1.625rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -.04em;
}

.inhwa-read-surface .inhwa-read-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inhwa-read-surface #panel-read-media {
    margin: 0;
}

.inhwa-read-surface #panel-carousel-stage {
    height: 300px;
    background: var(--oru-surface-container-low);
    border: 0;
    border-radius: 0;
}

.inhwa-read-surface #panel-carousel-stage-media img,
.inhwa-read-surface #panel-carousel-stage-media video {
    object-fit: contain;
}

.inhwa-read-surface #panel-carousel-strip {
    padding: 8px 14px 0;
}

.inhwa-read-surface .inhwa-read-paper {
    position: relative;
    z-index: 2;
    padding: 22px 20px 12px;
    background: var(--oru-surface-ivory);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(38, 36, 28, .10);
}

.inhwa-read-surface .inhwa-read-body {
    color: var(--oru-text-main);
    font-family: "Maru Buri", MaruBuri, Lora, AppleMyungjo, serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.9;
    text-wrap: pretty;
}

.inhwa-read-surface .inhwa-read-tags {
    gap: 6px;
    color: var(--oru-text-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.inhwa-read-surface .inhwa-read-tags > span {
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
}
/* 저장 직후 서버가 태그를 고르는 동안: 칩 자리 두 개와 대기 표시로 최종 태그 줄(편집 버튼 32px) 높이를 예약한다. */
.inhwa-read-surface .inhwa-read-tags--waiting {
    min-height: 32px;
    align-items: center;
}
.inhwa-read-surface .inhwa-read-tags > .inhwa-tag-slot {
    display: inline-block;
    flex: none;
    height: 12px;
    border-radius: 6px;
    background: var(--oru-surface-container-high);
    opacity: .75;
}
.inhwa-read-surface .inhwa-read-tags { transition: opacity .18s ease; }
.inhwa-read-surface .inhwa-read-tags--stale { opacity: .55; }
/* 서버 결과가 제자리에 도착할 때의 짧은 페이드(journal-editor.js playReadArrive). */
.inhwa-read-arrive { animation: inhwaReadArrive .18s ease-out; }
@keyframes inhwaReadArrive { from { opacity: 0; } to { opacity: 1; } }

.inhwa-read-surface .emotion-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    max-width: 100%;
    gap: 7px;
    min-height: 44px;
    padding: 8px 10px;
    color: var(--oru-on-surface-variant);
    background: var(--oru-surface-ivory);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 999px;
}

.inhwa-read-surface .emotion-bubble::after { display: none; }
.inhwa-read-surface .inhwa-emotion-anchor {
    flex: 0 0 auto;
    max-width: 100%;
}

.inhwa-read-surface .emotion-bubble-label {
    min-width: 0;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.inhwa-read-surface .inhwa-emotion-edit { font-size: 16px; color: var(--oru-text-muted); }
.inhwa-read-surface .emotion-bubble > svg { flex: none; }
.inhwa-read-surface .emotion-bubble.hidden { display: none; }
/* 감정 대기: 최종 감정 칩과 비슷한 폭을 잡아 도착 때 머리줄이 흔들리지 않게 한다. */
.inhwa-read-surface .emotion-bubble--waiting { min-width: 92px; }
.inhwa-read-surface .emotion-bubble { transition: opacity .18s ease, background-color .15s ease, transform .15s ease; }
.inhwa-read-surface .emotion-bubble--stale { opacity: .55; }

.inhwa-read-surface #panel-read-more-menu {
    color: var(--oru-on-surface-variant);
    text-shadow: none;
}

/* 작은 아이콘도 동일한 44px 터치 영역과 접근성 이름을 가진다. */
.inhwa-read-surface #panel-read-actions { display: flex; align-items: center; gap: 2px; }
.inhwa-read-surface #panel-read-actions > button,
.inhwa-read-surface #panel-read-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--oru-on-surface-variant);
}
.inhwa-read-surface #panel-read-actions > button:hover,
.inhwa-read-surface #panel-read-more-btn:hover {
    color: var(--oru-primary);
    background: var(--oru-surface-container);
}
.inhwa-read-surface #panel-read-actions > button.hidden { display: none; }
.inhwa-read-surface #panel-read-actions .material-symbols-outlined { font-size: 22px; }
.inhwa-read-surface #panel-carousel-prev,
.inhwa-read-surface #panel-carousel-next { width: 44px; height: 44px; }

.inhwa-read-surface #panel-read-more-menu .inhwa-read-delete-action {
    color: var(--oru-error);
}

.inhwa-read-surface #emotion-picker {
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 40px));
    padding: 12px;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--oru-surface-ivory);
    border-color: var(--oru-border-subtle);
    border-radius: 12px;
}

.inhwa-emotion-picker-header {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 6px;
    color: var(--oru-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.inhwa-emotion-picker-header button {
    min-height: 32px;
    padding: 0 4px;
    color: var(--oru-primary);
    font-size: 11.5px;
    font-weight: 600;
}

.inhwa-read-surface #panel-read-reaction {
    margin-top: 8px;
    padding: 16px 18px;
    border-radius: 14px;
}

.inhwa-read-surface #panel-read-reaction-text {
    font-family: "Maru Buri", MaruBuri, Lora, AppleMyungjo, serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    text-wrap: wrap;
}

.inhwa-read-surface #panel-read-thread {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--oru-border-subtle);
}

.inhwa-read-surface #panel-read-thread-toggle {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 14px;
    color: var(--oru-primary);
    background: var(--oru-surface-ivory);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.inhwa-read-surface #panel-read-thread-toggle.hidden { display: none; }

.inhwa-read-surface #panel-read-thread-toggle[aria-expanded="true"] .material-symbols-outlined {
    transform: rotate(180deg);
}

.inhwa-read-surface #panel-read-thread-turns { gap: 12px; }

.inhwa-read-surface .oru-thread-user-turn {
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--oru-primary);
}

.inhwa-read-surface .oru-thread-user-text {
    color: var(--oru-on-surface-variant);
    font-size: 14px;
    line-height: 1.6;
}

.inhwa-read-surface .oru-thread-oru-turn,
.inhwa-read-surface .oru-thread-waiting {
    padding: 14px 18px;
    background: var(--oru-accent-soft);
    border: 1px solid var(--oru-accent-line);
    border-radius: 14px;
}

.inhwa-read-surface .oru-thread-oru-turn.oru-thread-closing {
    border-top-width: 1px;
}

.inhwa-read-surface .oru-thread-oru-turn.oru-thread-closing::before {
    content: "";
    display: block;
    height: 1px;
    margin: -2px 0 12px;
    background: var(--oru-accent-line);
}

.inhwa-read-surface .oru-thread-kicker,
.inhwa-read-surface .oru-thread-waiting-kicker {
    margin-bottom: 7px;
    color: var(--oru-accent-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.inhwa-read-surface .oru-thread-oru-text {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}

.inhwa-read-surface .oru-thread-offer {
    margin-top: 12px;
    padding-top: 11px;
    color: var(--oru-accent-ink);
    border-top: 1px dashed var(--oru-accent-line);
    font-family: "Maru Buri", MaruBuri, Lora, AppleMyungjo, serif;
    font-size: 13.5px;
    line-height: 1.7;
}

.inhwa-read-surface .oru-thread-memory-chip {
    min-height: 28px;
    padding: 4px 10px;
    gap: 5px;
    color: var(--oru-on-surface-variant);
    background: var(--oru-surface-ivory);
    border-color: var(--oru-accent-line);
    font-size: 11.5px;
}

.inhwa-read-surface .oru-thread-memory-chip .material-symbols-outlined { font-size: 15px; }

.inhwa-read-surface .oru-thread-composer {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 8px;
    margin-top: 12px;
    padding: 6px;
    background: var(--oru-surface-ivory);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(72, 89, 78, .06);
}

.inhwa-read-surface .oru-thread-composer.hidden { display: none; }

.inhwa-read-surface .oru-thread-input {
    /* Keep one full line visible even after text scaling changes an autosized input. */
    min-height: max(36px, calc(1.45em + 14px));
    max-height: 84px;
    padding: 7px 9px;
    color: var(--oru-on-surface);
    background: transparent;
    border: 0;
    border-radius: 12px;
    font-size: 13.5px;
}

.inhwa-read-surface .oru-thread-input:focus {
    outline: 0;
    box-shadow: none;
}

.inhwa-read-surface .oru-thread-send {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
}

.inhwa-read-surface .oru-thread-count {
    padding-right: 4px;
}

.inhwa-read-surface .oru-thread-text-action {
    display: block;
    min-height: 44px;
    margin: 2px auto 0;
    color: var(--oru-primary);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.inhwa-read-surface .oru-thread-text-action.hidden { display: none; }

.inhwa-read-surface .oru-thread-footer {
    padding: 12px 2px 2px;
    color: var(--oru-text-muted);
    font-size: 12px;
    text-align: center;
}

.inhwa-read-surface .oru-thread-footer button {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.inhwa-read-surface #panel-read-care {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--oru-accent-line);
    min-width: 0;
}

.inhwa-read-surface #panel-read-care-content:not(.hidden) {
    display: block;
    min-height: 44px;
}

.inhwa-read-surface #panel-read-care-meta,
.inhwa-read-surface #panel-read-care-open-label {
    overflow-wrap: anywhere;
}

/* 쓰기: 종이 → 사진 띠 → 도구 → 고정 저장 바. */
#panel-mode-write.inhwa-write-surface {
    position: relative;
    gap: 14px;
    color: var(--oru-on-surface);
    background: var(--oru-background);
    border: 0;
    box-shadow: none;
}

.inhwa-write-surface .journal-write-header {
    min-height: 44px;
    padding: 0;
    align-items: center;
    border: 0;
}

.inhwa-write-surface #panel-write-inline-close { display: none; }
.inhwa-write-surface #panel-write-header-save { display: none; }

.inhwa-write-surface .journal-write-header > div {
    width: 100%;
    min-width: 0;
}

/* The title owns a 44px row between the close target and an equally empty
   right slot, so its centre meets the close button with or without the date. */
.inhwa-write-surface #panel-write-badge {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    color: var(--oru-on-surface);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.02em;
    text-align: center;
}

/* Autosave and sync notes sit under the title as one quiet 12px line. While a
   note is shown the title and note share the same 44px row, so the paper below
   never moves when the first autosave appears. */
.inhwa-write-surface .writing-status-line {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 6px;
    min-width: 0;
    margin: 0;
    color: var(--oru-text-muted);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.inhwa-write-surface .writing-status-line:not(:has(> :not(:empty))) { display: none; }

.inhwa-write-surface .journal-write-header:has(.writing-status-line > :not(:empty)) #panel-write-badge {
    min-height: 28px;
    align-items: flex-end;
}

.inhwa-write-surface #panel-write-date {
    width: 100%;
    color: var(--oru-on-surface-variant);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    padding-bottom: 6px;
}

/* The rendered paper already carries the selected day, and the header stays one
   44px row while the paper is pending. The shell date appears only once the
   paper is known to be unavailable. */
#panel-mode-write:has(#stationery-writing-surface[data-pending]) #panel-write-date,
#panel-mode-write:has(#stationery-writing-surface .stationery-surface :is(.td-date, .td-day, .td-date-stack, .td-date-field, .stationery-eyebrow)) #panel-write-date {
    display: none;
}

.inhwa-write-surface .inhwa-write-stack,
.inhwa-write-surface .inhwa-write-stack > div {
    gap: 14px;
}

.inhwa-write-surface .inhwa-write-paper {
    order: 0;
    min-height: 360px;
    padding: 18px 18px 16px;
    background: var(--oru-surface-ivory);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(72, 89, 78, .06);
}

.inhwa-writing-prompt {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--oru-border-subtle);
}
.inhwa-writing-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin-top: -8px;
}

.inhwa-writing-prompt__label {
    color: var(--oru-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.inhwa-writing-prompt__body {
    margin-top: 7px;
    color: var(--oru-text-main);
    font-family: "Maru Buri", MaruBuri, Lora, AppleMyungjo, serif;
    font-size: 15px;
    line-height: 1.6;
}

.inhwa-write-surface .inhwa-write-input {
    min-height: 220px;
    color: var(--oru-text-main);
    font-family: "Maru Buri", MaruBuri, Lora, AppleMyungjo, serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.9;
    caret-color: var(--oru-primary);
}

/* The dock owns the voice tool and the header owns save notes, so the old row
   under the paper stays out of the writing screen. */
.inhwa-write-surface #editor-meta-row { display: none; }

/* The count appears inside the paper, at the end of the entry, only past 2,700. */
.inhwa-write-surface #char-counter {
    position: relative;
    z-index: 5;
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    text-align: right;
}
.inhwa-write-surface #char-counter.hidden { display: none; }
/* A sticker's y is a share of the canvas height and the saved (reading) paper
   has no count, so on a paper with stickers the count sits in the sheet's
   bottom padding without adding height. */
.inhwa-write-surface .stationery-surface:has(.stationery-sticker) #char-counter {
    position: absolute;
    top: 100%;
    right: 0;
}

/* One photo row: the thumbnails scroll sideways and the add tile with the
   count stays fixed on the right, outside the scrolling list. */
.inhwa-write-surface .inhwa-write-media {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.inhwa-write-media .inhwa-media-strip {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.inhwa-write-media .inhwa-media-strip::-webkit-scrollbar { display: none; }

.inhwa-write-media #media-dropzone {
    display: flex;
    flex: 0 0 76px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    min-height: 76px;
    padding: 4px;
    gap: 1px;
    color: var(--oru-text-muted);
    background: var(--oru-surface-container);
    border: 1px solid var(--oru-border-subtle);
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
    cursor: pointer;
}

.inhwa-write-media #media-dropzone > .material-symbols-outlined {
    color: color-mix(in srgb, var(--oru-primary) 70%, transparent);
    font-size: 22px;
}

.inhwa-media-count {
    color: var(--oru-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Five photos: the tile rests, the count stays readable. */
.inhwa-write-media #media-dropzone.inhwa-media-full {
    cursor: default;
    pointer-events: none;
}
.inhwa-write-media #media-dropzone.inhwa-media-full > :not(.inhwa-media-count) { opacity: .45; }
.inhwa-write-media #media-dropzone[aria-busy="true"] { opacity: .6; }

/* Before the first photo there is no list, so the add control is one row. */
.inhwa-write-media.inhwa-media-empty .inhwa-media-strip { display: none; }
.inhwa-write-media.inhwa-media-empty #media-dropzone {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: flex-start;
    width: auto;
    min-height: 48px;
    padding: 0 14px;
    gap: 8px;
    font-size: .8125rem;
}
.inhwa-write-media.inhwa-media-empty .inhwa-media-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
}

.inhwa-write-media #existing-media-section:not(.hidden) { display: contents; }
.inhwa-write-media #existing-media-section > p { display: none; }
.inhwa-write-media #existing-media-list,
.inhwa-write-media #media-preview-list {
    display: flex;
    flex: none;
    gap: 8px;
    margin: 0;
}

.inhwa-editor-photo {
    position: relative;
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 8px;
}

/* A 20px mark in the corner with a 44px target that stays clear of the
   cover label at the bottom. */
.inhwa-editor-photo .writing-media-remove {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 44px;
    height: 44px;
    padding: 4px;
    background: transparent;
}
.writing-media-remove-dot {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    transition: background-color .15s ease;
}
.writing-media-remove-dot > .material-symbols-outlined { font-size: 14px; }
.writing-media-remove:hover .writing-media-remove-dot,
.writing-media-remove:focus-visible .writing-media-remove-dot { background: var(--oru-error); }

.inhwa-editor-photo .writing-media-cover-label {
    position: absolute;
    right: 2px;
    bottom: 6px;
    left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 2px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.inhwa-editor-photo[data-cover="cover"] .writing-media-cover-label {
    background: var(--oru-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.inhwa-editor-photo button.writing-media-cover-label:hover { background: rgba(0, 0, 0, .7); }

.inhwa-write-tools {
    order: 1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 10px;
    scrollbar-width: none;
}

.inhwa-write-tools::-webkit-scrollbar { display: none; }

/* Icon-and-label tools on the dock surface; only press and open states fill. */
.inhwa-write-tool {
    display: inline-flex;
    flex: none;
    min-height: 38px;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    color: var(--oru-on-surface-variant);
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.inhwa-write-tool:active { background: var(--oru-surface-container); }
.inhwa-write-tool[aria-expanded="true"] {
    color: var(--oru-primary);
    background: var(--oru-surface-container);
}
.inhwa-write-tool[aria-expanded="true"] > .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 300; }

.inhwa-write-tool .material-symbols-outlined { font-size: 16px; }
.inhwa-write-refine { order: 2; }
.inhwa-write-surface #ai-suggest-box { order: 3; }

@media (max-width: 767px) {
    .inhwa-write-tools {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .inhwa-write-tool {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        padding-inline: 10px;
        white-space: normal;
    }

    .inhwa-write-tool > span:not(.material-symbols-outlined) {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

.inhwa-write-surface .journal-write-actions {
    min-height: 68px;
    padding: 10px 16px 14px;
    gap: 10px;
}

.inhwa-write-surface .journal-write-actions > button {
    min-height: 48px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.inhwa-write-surface .journal-write-actions > button:first-child {
    flex: 0 0 72px;
    color: var(--oru-on-surface-variant);
}

.inhwa-write-surface #save-diary-btn {
    flex: 1 1 auto;
    justify-content: center;
    color: var(--oru-on-primary);
    background: var(--oru-primary);
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 767px) {
    body.inhwa-journal-open #journal-bottom-board {
        padding-top: 0;
        background: var(--oru-background);
    }

    body.inhwa-journal-read #journal-fs-close,
    body.inhwa-journal-write #journal-fs-close {
        right: auto;
        width: 44px;
        height: 44px;
        color: var(--oru-on-surface);
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body.inhwa-journal-open #panel-mode-read,
    body.inhwa-journal-open #panel-mode-write {
        width: 100%;
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.inhwa-journal-open #panel-mode-read {
        padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 30px);
    }

    /* One reading gutter: the header, the paper (letter paper or plain) and
       the cards below it all start on the same line. */
    .inhwa-read-surface { --oru-read-gutter: 16px; }

    /* 사진 유무와 관계없이 조작과 콘텐츠는 같은 문서 흐름을 쓴다.
       사진 위 absolute 헤더와 음수 본문 여백은 터치·메뉴·감정을 가렸다. */
    body.inhwa-journal-read #journal-bottom-board {
        padding-top: var(--sat);
    }

    /* While the keyboard is up for the Oru thread input, WebKit pans the
       layout viewport. The board and the status-bar strip follow the visible
       viewport (core/journal-surface.js), and the bottom menu steps aside so
       it does not float between the input and the keyboard. */
    body.inhwa-journal-read.reading-keyboard-open #journal-bottom-board {
        top: var(--writing-viewport-top);
        height: var(--writing-viewport-height);
        bottom: auto;
    }

    body.reading-keyboard-open #mobile-bottom-nav {
        visibility: hidden;
    }

    body.reading-keyboard-open::before {
        top: var(--writing-viewport-top);
    }

    body.inhwa-journal-read #journal-fs-close {
        position: absolute;
        top: calc(var(--sat) + 8px);
        left: 8px;
        z-index: 10;
        background: var(--oru-background);
    }

    .inhwa-read-surface .inhwa-read-header {
        position: relative;
        inset: auto;
        height: auto;
        padding: 8px var(--oru-read-gutter) 24px;
        background: var(--oru-background);
        pointer-events: auto;
    }

    .inhwa-read-surface .journal-read-meta-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .inhwa-read-toolbar { padding-left: 44px; margin-right: -8px; }

    .inhwa-read-surface #panel-read-media {
        padding: 0 var(--oru-read-gutter);
    }

    .inhwa-read-surface #panel-carousel-stage {
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 10px;
    }

    .inhwa-read-surface #panel-carousel-counter {
        top: 8px;
        right: 8px;
    }

    .inhwa-read-surface #panel-carousel-strip { display: none; }

    .inhwa-read-surface .inhwa-read-paper {
        margin: 16px var(--oru-read-gutter) 0;
        padding: 24px 20px 12px;
        box-shadow: none;
    }

    body.journal-fs-from-search.inhwa-journal-read #journal-fs-close { display: none; }
    body.journal-fs-from-search .inhwa-read-toolbar { padding-left: 0; margin-left: -8px; }

    .inhwa-read-surface > #panel-read-reaction,
    .inhwa-read-surface > #guest-save-next,
    .inhwa-read-surface > #panel-read-thread,
    .inhwa-read-surface > #post-save-push-optin,
    .inhwa-read-surface > #panel-read-crisis,
    .inhwa-read-surface > #panel-returned-memory-continue {
        margin-inline: var(--oru-read-gutter);
    }

    body.inhwa-journal-open #panel-mode-write {
        min-height: 100%;
        padding: calc(var(--sat) + 2px) 16px calc(var(--oru-journal-write-actions-height) + 28px);
    }

    /* The close target shares the header row: the panel starts the 44px header
       at sat + 2px, so both centres meet on one line. It is placed on the fixed
       board, so it follows the board to the visible viewport while the keyboard
       is up. */
    body.inhwa-journal-write #journal-fs-close {
        position: absolute;
        top: calc(var(--sat) + 2px);
        left: max(8px, env(safe-area-inset-left));
        z-index: 75;
    }

    .inhwa-write-surface .journal-write-header {
        z-index: 74;
        padding: 0 44px;
        background: var(--oru-background);
    }

    body.inhwa-journal-open .inhwa-write-surface .journal-write-actions {
        right: 0;
        bottom: var(--oru-mobile-bottom-nav-inset);
        left: 0;
        padding: 10px 16px 14px;
        box-shadow: none;
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    .inhwa-write-surface .journal-write-header {
        padding-inline: 64px;
    }
}

@media (min-width: 768px) {
    body.inhwa-journal-open #tab-content-view {
        width: 100%;
        max-width: none;
    }

    body.inhwa-journal-open #journal-bottom-board {
        position: relative;
        max-width: 1000px;
        margin: 0 auto;
    }

    body.inhwa-journal-open #journal-fs-close {
        display: flex;
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 10;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        color: var(--oru-on-surface-variant);
        background: var(--oru-surface-ivory);
        border: 1px solid var(--oru-border-subtle);
        border-radius: 9999px;
    }

    #panel-mode-read.inhwa-read-surface {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        column-gap: 24px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    #panel-mode-read.inhwa-read-surface.hidden { display: none; }

    .inhwa-read-surface .inhwa-read-header {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 0 0 22px;
    }

    .inhwa-read-surface .inhwa-read-content { display: contents; }

    .inhwa-read-surface #panel-read-media {
        grid-column: 1;
        grid-row: 2 / span 8;
        padding: 6px;
        background: var(--oru-surface-ivory);
        border: 1px solid var(--oru-border-subtle);
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(38, 36, 28, .06);
    }

    .inhwa-read-surface #panel-carousel-stage {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 6px;
    }

    .inhwa-read-surface #panel-carousel-strip { padding-inline: 0; }

    .inhwa-read-surface .inhwa-read-paper {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }

    .inhwa-read-surface > #panel-read-reaction,
    .inhwa-read-surface > #guest-save-next,
    .inhwa-read-surface > #panel-read-thread,
    .inhwa-read-surface > #post-save-push-optin,
    .inhwa-read-surface > #panel-read-crisis,
    .inhwa-read-surface > #panel-returned-memory-continue {
        grid-column: 2;
        min-width: 0;
    }

    .inhwa-read-surface:not(.inhwa-read-has-photo) .inhwa-read-header,
    .inhwa-read-surface:not(.inhwa-read-has-photo) .inhwa-read-paper,
    .inhwa-read-surface:not(.inhwa-read-has-photo) > #panel-read-reaction,
    .inhwa-read-surface:not(.inhwa-read-has-photo) > #guest-save-next,
    .inhwa-read-surface:not(.inhwa-read-has-photo) > #panel-read-thread,
    .inhwa-read-surface:not(.inhwa-read-has-photo) > #post-save-push-optin,
    .inhwa-read-surface:not(.inhwa-read-has-photo) > #panel-read-crisis,
    .inhwa-read-surface:not(.inhwa-read-has-photo) > #panel-returned-memory-continue {
        grid-column: 1 / -1;
        width: min(100%, 720px);
        margin-right: auto;
        margin-left: auto;
    }

    .inhwa-read-surface .oru-thread-composer::after {
        content: "Enter로 전송";
        grid-column: 1 / -1;
        justify-self: end;
        padding-right: 4px;
        color: var(--oru-text-muted);
        font-size: 10.5px;
    }

    #panel-mode-write.inhwa-write-surface {
        width: min(100%, 720px);
        margin: 0 auto;
        padding: 0 0 24px;
    }

    .inhwa-write-surface .inhwa-write-paper { min-height: 420px; }
    .inhwa-write-surface .inhwa-write-input { min-height: 228px; }

    .inhwa-write-surface .journal-write-actions {
        justify-content: flex-end;
        padding-right: 0;
        padding-left: 0;
    }

    .inhwa-write-surface .journal-write-actions > button:first-child { flex:0 0 auto; min-width:62px; }
    .inhwa-write-surface #save-diary-btn { flex:0 0 auto; width:auto; min-width:100px; padding-inline:20px; }
}

@media (prefers-reduced-motion: reduce) {
    .inhwa-read-surface *,
    .inhwa-write-surface * {
        scroll-behavior: auto !important;
    }
    .inhwa-read-arrive { animation: none !important; }
    .journal-read-sync-status { transition: none; }
}

.inhwa-read-surface :is(.oru-thread-kicker, .oru-thread-waiting-kicker) { display:flex; align-items:center; gap:6px; }
.inhwa-read-surface :is(.oru-thread-kicker, .oru-thread-waiting-kicker) > span { display:inline-flex; }
.inhwa-read-surface #panel-tag-edit-btn { min-height:32px; }

/* 좁은 두 열에서도 도구를 한 줄에 유지하고 날짜·감정은 자연스럽게 줄바꿈한다. */
@media (min-width: 768px) and (max-width: 1023px) {
    .inhwa-read-surface .journal-read-meta-row { align-items: flex-start; }
}


/* iPad 네이티브: 한 장의 모바일 읽기/쓰기 표면과 중앙 본문 열. */
@media (min-width: 768px) {
    html.oru-ios-mobile-shell body.journal-fs-open { overflow: hidden !important; }

    html.oru-ios-mobile-shell body.inhwa-journal-open #tab-content-view { max-width: 640px; }

    html.oru-ios-mobile-shell body.inhwa-journal-open #journal-bottom-board {
        position: fixed; inset: 0 0 var(--oru-mobile-bottom-nav-inset);
        width: 100%; max-width: none; margin: 0; min-height: 0;
        z-index: 70; background: var(--oru-background);
        overflow-y: auto; overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch; padding: 0; transition: none;
    }

    html.oru-ios-mobile-shell body.inhwa-journal-open #panel-mode-read,
    html.oru-ios-mobile-shell body.inhwa-journal-open #panel-mode-write {
        width: 100%; max-width: var(--oru-ios-content-width, 720px); margin: 0 auto;
        border: 0; border-radius: 0; box-shadow: none; background: transparent;
        animation: none; transform: none;
    }

    html.oru-ios-mobile-shell body.inhwa-journal-open #panel-mode-read.inhwa-read-surface {
        /* Reset the desktop grid cross-axis alignment: mobile read cards share one column. */
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 30px);
        --oru-read-gutter: 24px;
    }

    html.oru-ios-mobile-shell body.inhwa-journal-open #panel-mode-read.inhwa-read-surface.hidden { display: none; }

    html.oru-ios-mobile-shell body.inhwa-journal-read #journal-bottom-board { padding-top: var(--sat); }

    html.oru-ios-mobile-shell body.inhwa-journal-open #journal-fs-close {
        display: flex; position: absolute; right: auto;
        left: max(8px, calc((100% - var(--oru-ios-content-width, 720px)) / 2 + 8px));
        top: calc(var(--sat) + 8px); width: 44px; height: 44px;
        align-items: center; justify-content: center;
        color: var(--oru-on-surface); background: var(--oru-background);
        border: 0; border-radius: 9999px; box-shadow: none; z-index: 75;
    }

    html.oru-ios-mobile-shell body.journal-fs-from-search.inhwa-journal-read #journal-fs-close { display: none; }

    html.oru-ios-mobile-shell body.oru-demo-on #journal-fs-close { display: none !important; }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface .inhwa-read-content { display: flex; flex-direction: column; }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface .inhwa-read-header {
        position: relative; inset: auto; height: auto;
        width: 100%; margin: 0; padding: 8px var(--oru-read-gutter) 24px;
        background: var(--oru-background); pointer-events: auto;
    }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface .journal-read-meta-row { align-items: center; flex-direction: row; gap: 12px; }

    html.oru-ios-mobile-shell #panel-mode-read .inhwa-read-toolbar { padding-left: 44px; margin-right: -8px; }

    html.oru-ios-mobile-shell body.journal-fs-from-search #panel-mode-read .inhwa-read-toolbar { padding-left: 0; margin-left: -8px; }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface #panel-read-media {
        padding: 0 var(--oru-read-gutter); background: transparent;
        border: 0; border-radius: 0; box-shadow: none;
    }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface #panel-carousel-stage { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface #panel-carousel-counter { top: 8px; right: 8px; }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface #panel-carousel-strip { display: none; }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface .inhwa-read-paper {
        width: auto; margin: 16px var(--oru-read-gutter) 0;
        padding: 24px 24px 12px; box-shadow: none;
    }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface > #panel-read-reaction,
    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface > #guest-save-next,
    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface > #panel-read-thread,
    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface > #post-save-push-optin,
    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface > #panel-read-crisis,
    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface > #panel-returned-memory-continue {
        width: auto; margin-inline: var(--oru-read-gutter);
    }

    html.oru-ios-mobile-shell #panel-mode-read.inhwa-read-surface .oru-thread-composer::after { content: none; }

    html.oru-ios-mobile-shell body.inhwa-journal-read.reading-keyboard-open #journal-bottom-board {
        top: var(--writing-viewport-top); height: var(--writing-viewport-height); bottom: auto;
    }

    html.oru-ios-mobile-shell body.reading-keyboard-open #mobile-bottom-nav,
    html.oru-ios-mobile-shell body.inhwa-journal-write #mobile-bottom-nav { visibility: hidden; }

    html.oru-ios-mobile-shell body.reading-keyboard-open::before { top: var(--writing-viewport-top); }

    html.oru-ios-mobile-shell body.inhwa-journal-write #journal-bottom-board { overflow: hidden; padding: 0; }

    html.oru-ios-mobile-shell body.inhwa-journal-write:not(.writing-keyboard-open) #journal-bottom-board { bottom: 0; height: 100dvh; }

    html.oru-ios-mobile-shell body.inhwa-journal-open #panel-mode-write.inhwa-write-surface {
        height: 100%; min-height: 0;
        padding: calc(var(--sat) + 2px) 24px 0; gap: 8px;
    }

    html.oru-ios-mobile-shell body.inhwa-journal-write #journal-fs-close { top: calc(var(--sat) + 2px); }

    html.oru-ios-mobile-shell #panel-mode-write .journal-write-header { z-index: 74; padding: 0 44px; background: var(--oru-background); }

    html.oru-ios-mobile-shell #panel-mode-write .inhwa-write-paper { min-height: 360px; }

    html.oru-ios-mobile-shell #panel-mode-write .inhwa-write-input { min-height: 170px; }

    html.oru-ios-mobile-shell #panel-mode-write #writing-dock { margin-inline: -24px; padding-inline: 24px; background: var(--oru-background); }

    html.oru-ios-mobile-shell #panel-mode-write #writing-dock .inhwa-write-tools { flex-wrap: wrap; overflow-x: visible; }

    html.oru-ios-mobile-shell #panel-mode-write #writing-dock .inhwa-write-tool {
        flex: 1 1 calc(25% - 6px); min-width: 0;
        flex-direction: column; white-space: normal; font-size: 11px;
        gap: 2px; min-height: 48px; padding-inline: 10px;
    }

    html.oru-ios-mobile-shell #panel-mode-write #writing-dock .journal-write-actions {
        position: static; justify-content: stretch;
        padding: 10px 0 max(14px, var(--sab)); gap: 6px; box-shadow: none;
    }

    html.oru-ios-mobile-shell #panel-mode-write #writing-dock .journal-write-actions > button {
        min-width: 0; min-height: 48px; padding-inline: 12px; white-space: normal;
    }

    html.oru-ios-mobile-shell #panel-mode-write #writing-dock .journal-write-actions > button:first-child { flex: 0 0 72px; }

    html.oru-ios-mobile-shell #panel-mode-write #writing-dock #save-diary-btn { flex: 1 1 auto; width: 100%; min-width: 0; justify-content: center; }

    html.oru-ios-mobile-shell body.inhwa-journal-write.writing-keyboard-open #journal-bottom-board {
        top: var(--writing-viewport-top); height: var(--writing-viewport-height); bottom: auto;
    }

    html.oru-ios-mobile-shell body.inhwa-journal-write #panel-mode-write .inhwa-write-media { max-height: calc(240px * var(--oru-ios-text-scale, 1)); }

    html.oru-ios-mobile-shell body.inhwa-journal-write #panel-mode-write .inhwa-write-media,
    html.oru-ios-mobile-shell body.inhwa-journal-write #panel-mode-write #writing-dock {
        transition: opacity 180ms ease, max-height 220ms ease, visibility 0s linear 0s;
    }

    html.oru-ios-mobile-shell body.inhwa-journal-write.writing-keyboard-open #panel-mode-write .inhwa-write-media,
    html.oru-ios-mobile-shell 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;
    }

    html.oru-ios-mobile-shell body.inhwa-journal-write #app-toast { bottom: auto; top: calc(var(--sat, 0px) + 56px); }

}
@media (min-width: 768px) {
    html.oru-ios-mobile-shell #panel-mode-write .inhwa-write-paper:has(.stationery-surface):not(:has(.stationery-sticker)),
    html.oru-ios-mobile-shell #panel-mode-write .inhwa-write-paper:has(.stationery-surface):not(:has(.stationery-sticker)) :is(#stationery-writing-surface, .stationery-surface, .stationery-canvas, .td-sheet),
    html.oru-ios-mobile-shell #panel-mode-write .inhwa-write-paper:has(#stationery-writing-surface[data-pending]),
    html.oru-ios-mobile-shell #panel-mode-write #stationery-writing-surface[data-pending] { display: flex; flex: 1 0 auto; flex-direction: column; }
    html.oru-ios-mobile-shell #panel-mode-write #stationery-writing-surface[data-pending] > #journal-body-text { flex: 1 0 auto; }
    html.oru-ios-mobile-shell #panel-mode-write .inhwa-write-paper:has(.stationery-surface[data-version="2"]):not(:has(.stationery-sticker)) .td-sheet { min-height: 0; }
    html.oru-ios-mobile-shell #panel-mode-write .inhwa-write-paper:has(.stationery-surface[data-version="2"]):not(:has(.stationery-sticker)) .td-entry { flex: 1 0 auto; }
    html.oru-ios-mobile-shell #panel-mode-write .inhwa-write-paper:has(.stationery-surface:not([data-version="2"])):not(:has(.stationery-sticker)) .stationery-paper { flex: 1 0 auto; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    html.oru-ios-mobile-shell body.inhwa-journal-write #panel-mode-write .inhwa-write-media,
    html.oru-ios-mobile-shell body.inhwa-journal-write #panel-mode-write #writing-dock { transition: none; }
}

/* UIKit identifies the iPad even in a narrow window. Its floating input
   assistant must never cover the only Save action; the fixed header owns it. */
html.oru-ios-mobile-shell.oru-ios-tablet #panel-mode-write .journal-write-header {
    padding-inline: calc(72px * var(--oru-ios-text-scale, 1));
    min-height: max(44px, calc(44px * var(--oru-ios-text-scale, 1)));
}
html.oru-ios-mobile-shell.oru-ios-tablet #panel-mode-write #panel-write-header-save {
    display: inline-flex; position: absolute; inset-inline-end: 0; top: 0;
    align-items: center; justify-content: center; min-width: 60px; min-height: 44px;
    height: 100%; padding: 6px 8px; border: 0; border-radius: 10px;
    background: var(--oru-primary); color: var(--oru-on-primary);
    font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
html.oru-ios-mobile-shell.oru-ios-tablet #panel-mode-write #panel-write-header-save:disabled { opacity: .55; }
html.oru-ios-mobile-shell.oru-ios-tablet #panel-mode-write #writing-dock .journal-write-actions { display: none; }