/* C3: original photographic brand assets and measured interaction principles.
 * The reading layout and type metrics stay in style.css/mobile.css.
 * Reference evidence: docs/실측/일본카페_UX_재조사_260912_*.md.
 */
body {
  --cafe-accent: var(--skin-cafe-rose);
  --cafe-accent-soft: var(--skin-cafe-rose-soft);
  --cafe-accent-line: var(--skin-cafe-rose-line);
  --cafe-paper: var(--skin-cafe-surface);
  --cafe-focus: var(--skin-cafe-focus);
}
body.dark {
  --cafe-accent: var(--skin-cafe-night-rose);
  --cafe-accent-soft: var(--skin-cafe-night-rose-soft);
  --cafe-accent-line: var(--skin-cafe-night-rose);
  --cafe-paper: var(--skin-night-surface);
  --cafe-focus: var(--skin-night-link);
}

/* A clear logo and a quiet edge carry the brand; text and photos keep their room. */
.dchead, .header-top {
  background: linear-gradient(90deg, var(--skin-sky) 0%, var(--skin-sky) 48%, var(--cafe-accent-soft) 100%) left bottom / 100% 4px no-repeat var(--bg);
}
body.dark .dchead, body.dark .header-top {
  background: linear-gradient(90deg, var(--skin-night-nav), var(--skin-night-primary-deep), var(--cafe-accent-soft)) left bottom / 100% 4px no-repeat var(--bg);
}
.gnb_bar, .nav { box-shadow: inset 0 -1px 0 var(--cafe-accent-line); }
.gnb_list > li > a.on, .menu-scroll-lst > li.on > a {
  background: var(--cafe-accent-soft);
  color: var(--skin-nav-ink);
  box-shadow: inset 0 -3px 0 var(--cafe-accent);
}
body.dark .gnb_list > li > a.on, body.dark .menu-scroll-lst > li.on > a {
  background: var(--cafe-accent-soft);
  color: var(--skin-white);
}
.side .content_box { border-color: var(--line); }
.side .content_box .tit, .side .content_box .box_tit,
.gall-group > .lg-tit-box, .gall-group .gall-tit-box {
  background-image: linear-gradient(90deg, var(--cafe-accent-line), transparent 72%);
  background-position: left bottom;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}
.lg-tit-box { background-color: var(--cafe-paper); border-bottom-color: var(--cafe-accent-line); }
body.dark .lg-tit-box { background-color: var(--cafe-paper); }
.livebest-tab .best.on, .time_best .tablist .on, .tab_comm .on,
.ob-cell.time_best .tab.on, .pgnum strong, .pageing .now, .pageing .now_num,
.bottom_paging_box em, .paging .sel, .paging a[aria-current="page"] {
  color: var(--cafe-accent);
}
.livebest-tab .best.on, .time_best .tablist .on, .tab_comm .on {
  text-decoration: underline;
  text-decoration-color: var(--cafe-accent-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.hot-gall-tit, .hot-gall .tit, .badge-notice {
  background-color: var(--cafe-accent-soft);
  color: var(--cafe-accent);
}
.grid.roll .lb { background-color: var(--cafe-accent-soft); color: var(--cafe-accent); }
.time_best .con_head { border-bottom-color: var(--cafe-accent-line); }
.gi_banner img { border-radius: 8px; }
.gall_info { background-color: var(--cafe-paper); }
.foot { background-color: var(--cafe-paper); }
.footer .ft-top { background-color: var(--cafe-paper); }
.footer .ft-top, .footer .ft-top a, .footer .ft-top button { color: var(--fg); }
.cmt_write_box .btn_blue, .cmt-submit, .cmt_submit, .btn-comment-write {
  border-color: var(--cafe-accent);
}
.all-comment-tit .btn-comment-write { background-color: var(--cafe-accent-soft); color: var(--cafe-accent); border-color: var(--cafe-accent-line); }

/* Feedback is color/outline only, so pointer and keyboard use never shifts rows. */
:where(a, button, summary, input, textarea, select, [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--cafe-focus);
  outline-offset: 2px;
}
.note-editable:focus-visible { outline: 2px solid var(--cafe-focus); outline-offset: -2px; }
:where(button, summary, .tab, .tab_btn, .tab_comm a, .livebest-tab a, .gnb_list a, .menu-scroll-lst a, .depthbox a, .btn-fill, .btn_white, .btn-write, .btn-form, .btn-pwd, .btn-lgrey, .btn-blue, .paging a, .pageing a) {
  transition: color var(--skin-motion-feedback) ease-out, background-color var(--skin-motion-feedback) ease-out, border-color var(--skin-motion-feedback) ease-out, box-shadow var(--skin-motion-feedback) ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .gnb_list > li > a:hover, .menu-scroll-lst > li > a:hover, .depthbox a:hover {
    background-color: var(--cafe-accent-soft);
    color: var(--cafe-accent);
  }
  .tab_comm a:hover, .livebest-tab a:hover, .time_best .tablist a:hover,
  .bottom_paging_box a:hover, .paging a:hover, .pageing a:hover { color: var(--cafe-accent); }
  .btn-fill:hover, .btn-write:hover, .btn-blue:hover, .btn-form:hover, .wrt-submit:hover {
    box-shadow: inset 0 0 0 2px var(--cafe-accent-line);
  }
  .con-grid button:hover { border-color: var(--cafe-accent-line); background-color: var(--cafe-accent-soft); }
}
:where(button, summary, .tab_btn, .tab_comm a, .livebest-tab a, .gnb_list a, .menu-scroll-lst a, .depthbox a, .paging a, .pageing a):active {
  box-shadow: inset 0 0 0 2px var(--cafe-accent-line);
}
.con-tab[aria-pressed="true"] { color: var(--cafe-accent); border-bottom-color: var(--cafe-accent); }
.con-grid button:active { background-color: var(--cafe-accent-soft); }
.gnb-more[open] > .btn_depth { background-color: var(--cafe-accent-soft); color: var(--cafe-accent); --on-navy: var(--cafe-accent); }
.depthbox { border-color: var(--cafe-accent-line); box-shadow: var(--skin-cafe-shadow); }
.gnb-more[open] .depthbox { animation: cafe-panel-in var(--skin-motion-panel) var(--skin-motion-ease); }
.main-visit .vst-lst:not([hidden]) { box-shadow: var(--skin-cafe-shadow); border-color: var(--cafe-accent-line); }
[data-mvisit-toggle][aria-expanded="true"] { color: var(--cafe-accent); }
@keyframes cafe-panel-in { from { opacity: 0; } to { opacity: 1; } }

/* Loading keeps the old content readable. Errors stay inside the same block. */
[data-fetch-block] { position: relative; }
[data-fetch-block][aria-busy="true"], [data-con-layer][aria-busy="true"] {
  cursor: progress;
  box-shadow: inset 0 3px 0 var(--cafe-accent-line);
}
.fetch-feedback {
  position: absolute;
  z-index: 4;
  top: 38px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 16px);
  padding: 8px 10px;
  border: 1px solid var(--cafe-accent-line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--skin-cafe-shadow);
  font-size: 12px;
}
[data-fetch-retry], [data-con-retry] {
  width: auto;
  height: auto;
  padding: 2px 6px;
  border: 1px solid var(--cafe-accent-line);
  border-radius: 4px;
  background: var(--cafe-accent-soft);
  color: var(--cafe-accent);
  font: inherit;
  cursor: pointer;
}
.con-grid button[data-con-retry] {
  width: auto;
  height: auto;
  background-image: none;
  background-color: var(--cafe-accent-soft);
  border-color: var(--cafe-accent-line);
}
@media (prefers-reduced-motion: reduce) {
  :where(a, button, summary, input, textarea, select), .gnb-more[open] .depthbox {
    transition: none;
    animation: none;
  }
}