/*
  Phi Brain — styles on top of ../style-kit/theme.css

  §1 holds every token (color, type, layout). Rules below use only those
  tokens; keep the palette minimal — extend a token before adding a
  one-off value.
*/

/* ---------- 1. Tokens ---------- */

/* Color — white ground + 4 tones. Nothing on the page uses any other color. */
:root{
  --bg:#fff;
  --ink:#333;     /* primary text, Tab1, hover/active text, the one filled button */
  --gray:#999;    /* all secondary text: Tab2, meta, hints, placeholder, footer */
  --line:#ededed; /* borders, text selection */
  --fill:#f5f5f5; /* quiet surfaces: nav hover box, input, chips, search hover */
  /* ?v= busts the OS/browser's cursor-bitmap cache, which can keep showing an old
     image after this file's content changes even with the page cache cleared —
     bump this number whenever cursor-arrow.svg, cursor-pointer.svg or cursor-text.svg changes. */
  --phi-cursor:url("cursor-arrow.svg?v=3") 0 1;
  --phi-cursor-pointer:url("cursor-pointer.svg?v=10") 0 1;
  --phi-cursor-text:url("cursor-text.svg?v=1") 0 7;
}

/* Style-kit compatibility: theme.css ships 17 color names. Fold them onto
   the 4 tones above so its components (search, drawer, footer) render in
   the same palette. New rules should not use these names. */
:root{
  --c-ink:var(--ink);--c-copy:var(--ink);--c-selection-fg:var(--ink);
  --c-body:var(--gray);--c-muted:var(--gray);--c-faint:var(--gray);--c-faintest:var(--gray);--c-placeholder:var(--gray);
  --c-border:var(--line);--c-border-soft:var(--line);--c-border-panel:var(--line);--c-selection-bg:var(--line);--c-chip-bg-hover:var(--line);
  --c-surface:var(--fill);--c-hover-bg:var(--fill);--c-chip-bg:var(--fill);--c-footer-bg:var(--fill);
}

/* Type — one face (Pretendard, code included) at one size (theme.css's
   12/10/8pt scale collapses to 10pt) */
:root{--fs-base:10pt;--fs-sm:10pt;--fs-xs:10pt}

/* Layout — one left edge. The nav label is the anchor: the sidebar gutter
   plus the tab's own horizontal padding. Logo and footer pad to that x. */
:root{
  --nav-gutter:32px;
  --tab-pad-x:12px;
  --tab2-indent:16px;
  --text-start:calc(var(--nav-gutter) + var(--tab-pad-x));
}

/* Shape — one radius for every soft control (nav tabs, pills, rows, the
   primary button). On these ~31px boxes it reads as a full pill.
   --radius-sm is only for inline code, which should read as code, not a tag. */
:root{--radius:20px;--radius-sm:4px}

/* ---------- 2. Header: logo + wordmark, search, profile ---------- */
.toolbar{display:flex;align-items:center;gap:24px;padding:16px 32px 16px var(--text-start)}
.brand-lockup{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.brand-logo{height:25px;width:25px;display:block}
/*
  wordmark.png has ~2.4% top / ~12.7% bottom padding baked into its own
  canvas (measured from the source pixels), while logo.png has none — so
  matching CSS heights alone would NOT align their visible ink top/bottom.
  brand-word-wrap clips a slightly taller, upward-shifted render of the
  wordmark so its actual glyph ink fills the same 25px box edge-to-edge
  as the logo, per the reference lockup.
*/
.brand-word-wrap{height:25px;overflow:hidden;display:block}
.brand-word{height:29.43px;width:auto;display:block;margin-top:-0.7px}
.profile-trigger{margin-left:auto}

/* ---------- 3. Side nav ---------- */
.app-body{display:flex;align-items:flex-start}

/* 300px: room for the longest course label ("IAE_Interviewing as
   Exploration", ~187px) plus the Tab2 indent, the tab padding and the
   10px hover shift, without wrapping. */
.side-nav{width:300px;flex:0 0 300px;padding:32px 24px 40px var(--nav-gutter)}
.nav-group,.nav-list{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.nav-group+.nav-group{margin-top:16px}

/*
  Tab1 = section (Journaling / General / Course), Tab2 = item under it.
  Hover follows the style kit's reveal-list: the tab slides 10px right,
  an arrow fades in to the left of the label, and a fill box hugs the
  label through its own padding. The squircle corner falls back to a
  plain --radius where corner-shape isn't supported. Also reused for
  link rows in the content column (resume lists).
*/
.nav-tab{position:relative;display:block;white-space:nowrap;text-align:left;padding:6px var(--tab-pad-x);border-radius:var(--radius);corner-shape:squircle;transition:transform 340ms var(--ease-out),background 140ms,color 140ms}
.nav-tab::before{content:'→';position:absolute;right:100%;top:50%;margin-right:8px;color:var(--ink);opacity:0;transform:translate(-3px,-50%);transition:opacity 140ms,transform 140ms}
.nav-tab:hover,.nav-tab:focus-visible,.nav-tab.active{transform:translateX(10px);background:var(--fill);color:var(--ink)}
.nav-tab:hover::before,.nav-tab:focus-visible::before,.nav-tab.active::before{opacity:1;transform:translate(0,-50%)}

.tab1{font-weight:700;color:var(--ink);letter-spacing:-.16px}
/* the topmost sidebar label only (General/Course group headers stay at base size) */
.nav-tab[data-view="journal"]{font-size:12pt}
.tab2{color:var(--gray);margin-left:var(--tab2-indent)}
.nav-code{font-weight:700}

/* General/Course become an accordion only once the sidebar stacks to
   mobile (below); on the wide layout the JS keeps them permanently open
   and a click does nothing, so no marker or caret should ever show. */
.nav-accordion>summary{list-style:none;cursor:pointer}
.nav-accordion>summary::-webkit-details-marker{display:none}
.nav-accordion[open] .caret{transform:rotate(180deg)}
.nav-caret{display:none;margin-left:auto}

@media(max-width:860px){
  .app-body{flex-direction:column}
  .side-nav{width:100%;flex:none;padding:20px 24px}
  .nav-group,.nav-list{flex-direction:row;flex-wrap:wrap;gap:6px}
  .nav-accordion{flex-direction:column;flex-wrap:nowrap}
  .nav-accordion>summary{display:flex;align-items:center}
  .nav-caret{display:inline-block}
  .tab1{width:100%}
  .tab2{margin-left:0}
  .nav-tab:hover,.nav-tab:focus-visible,.nav-tab.active{transform:none}
  .nav-tab::before{display:none}
}

/* ---------- 4. Content ---------- */
/* sidebar stays pinned at its fixed width; this column takes the rest
   of the row and centers its own (max-width-capped) content within it */
.shell{flex:1;min-width:0;max-width:680px;margin:0 auto;padding:40px 32px 100px}
.prototype-note{color:var(--gray);margin:0 0 32px}

/*
  Pill — the content column's quiet control: gray text, fill on hover,
  same radius as the nav. Pills sit with their *text* on the column edge;
  .pill-start / .pill-end pull the box out by its padding so the fill
  bleeds past the edge instead of indenting the label.
*/
.pill{display:inline-flex;align-items:center;gap:4px;padding:6px var(--tab-pad-x);border-radius:var(--radius);corner-shape:squircle;color:var(--gray);white-space:nowrap;transition:background 140ms,color 140ms}
.pill:hover,.pill:focus-visible,.pill[aria-pressed="true"],.pill[aria-expanded="true"]{background:var(--fill);color:var(--ink)}
.pill-start{margin-left:calc(-1 * var(--tab-pad-x))}
.pill-end{margin-right:calc(-1 * var(--tab-pad-x))}
/* square pill for a single glyph (month steps, format tools) — a circle on hover */
.pill-icon{width:28px;height:28px;justify-content:center;padding:0}
.pill-icon:disabled{opacity:.35;cursor:default;background:none}
.caret{color:var(--gray);transition:transform 340ms var(--ease-out)}
.field-label{color:var(--gray)}
.field-hint{color:var(--gray);margin:10px 0 0}

/* ---- journal: context ---- */
.journal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.journal-heading{margin:0;font-weight:700;color:var(--ink)}
/* Journaling's own title only (Future Item/Assignment Manage share .journal-heading) — 2pt larger, true black */
#journal-heading{font-size:12pt;color:#000}
.date-field{position:relative;display:inline-block}
#date-field{margin:14px 0 0}

/* date picker — a floating card in the page's own vocabulary: pill
   steps, circular day cells that fill on hover, ink for the chosen day */
.datepicker{position:absolute;top:calc(100% + 8px);right:calc(-1 * var(--tab-pad-x));z-index:30;width:264px;padding:14px 12px 10px;background:var(--bg);border-radius:var(--radius);corner-shape:squircle;box-shadow:var(--shadow-float)}
.dp-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 8px 8px}
.dp-title{font-weight:700;color:var(--ink)}
.dp-steps{display:flex;gap:2px}
.dp-week,.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}
.dp-week span{color:var(--gray);padding:4px 0}
.dp-day{width:32px;height:32px;margin:1px 0;border-radius:50%;color:var(--ink);font-variant-numeric:tabular-nums;transition:background 140ms,color 140ms}
.dp-day:hover,.dp-day:focus-visible{background:var(--fill);outline:0}
.dp-day[data-today]{font-weight:700}
.dp-day[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.dp-day:disabled{color:var(--gray);opacity:.45;cursor:default;background:none}
.dp-foot{display:flex;justify-content:flex-end;margin-top:6px;padding-right:var(--tab-pad-x)}

.title-input{display:block;width:100%;margin:14px 0 0;padding:6px 0 6px var(--tab-pad-x);border:0;background:none;color:#000}
.title-input::placeholder{color:#000}
.title-input:focus-visible{outline:0}

.courses{margin:14px 0 0}
.course-chips{display:flex;flex-wrap:wrap;gap:2px;margin:8px 0 0}
.course-chips .pill[aria-pressed="true"]{font-weight:700}

/* ---- journal: the one document ---- */
.editor-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:10px;border-top:1px solid var(--line)}
.editor-tools{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.tool-sep{width:1px;height:12px;background:var(--line);margin:0 6px}

/* format bar — glyph buttons for the dragged text; pressed = current selection has it */
.format-bar{display:flex;align-items:center;gap:2px;margin:4px 0 0 -9px}
.format-bar b{font-weight:700}
.format-bar i{font-style:italic;font-synthesis:style}
.ico-quote{width:10px;height:12px;border-left:2px solid currentColor;background:linear-gradient(currentColor,currentColor) 3px 3px/7px 1px no-repeat,linear-gradient(currentColor,currentColor) 3px 8px/5px 1px no-repeat}
.ico-code{letter-spacing:-.5px}

/* course menu — same floating card as the date picker */
.journal{position:relative}
.course-menu{position:absolute;z-index:30;width:248px;padding:6px;background:var(--bg);border-radius:var(--radius);corner-shape:squircle;box-shadow:var(--shadow-float)}
.cm-item{display:block;width:100%;text-align:left;white-space:nowrap;padding:5px 10px;border-radius:var(--radius);corner-shape:squircle;color:var(--gray);transition:background 140ms,color 140ms}
.cm-item:hover,.cm-item:focus-visible{background:var(--fill);color:var(--ink);outline:0}
.cm-item[aria-selected="true"]{color:var(--ink)}
.cm-item .nav-code{color:var(--ink)}

.editor{position:relative;min-height:300px;padding:18px 0 28px;color:var(--ink);line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
/* the live editor only — not .archive-preview, which should size to its
   content. Long entries scroll inside their own box instead of pushing the
   과목/날짜 controls above out of easy reach as the page grows. */
#editor{max-height:55vh;overflow-y:auto;overscroll-behavior:contain}
.editor:focus-visible{outline:0}
.editor.is-empty::before{content:attr(data-placeholder);position:absolute;top:18px;left:0;color:var(--gray);pointer-events:none}
/* headings are fill pills (same shape as the controls) so the 4F
   structure reads apart from the writing; the text lines up with the
   body copy and the fill bleeds left by the pill padding */
.editor h3{position:relative;width:fit-content;margin:22px 0 6px calc(-1 * var(--tab-pad-x));padding:4px var(--tab-pad-x);border-radius:var(--radius);corner-shape:squircle;background:var(--fill);color:var(--ink)}
/* the negative left margin above assumes overflow:visible, bleeding into the
   shell's own padding — but #editor's scroll container (overflow-y:auto also
   forces overflow-x:auto per spec, since one axis can't stay 'visible' while
   the other isn't) clips that bleed instead, cutting the pill's left edge.
   .archive-preview never had matching padding to bleed into either. Both
   just sit flush instead. */
#editor h3,#editor .course-box,.archive-preview h3,.archive-preview .course-box{margin-left:0}
.editor>h3:first-child,.editor>.course-box:first-child{margin-top:0}
/* hovering a 4F pill brings its guiding question in from a blur, to the right */
.editor h3[data-guide]::after{content:attr(data-guide);position:absolute;left:100%;top:50%;margin-left:12px;transform:translateY(-50%);white-space:nowrap;color:var(--gray);opacity:0;filter:blur(6px);pointer-events:none;transition:opacity 340ms var(--ease-out),filter 340ms var(--ease-out)}
.editor h3[data-guide]:hover::after{opacity:1;filter:blur(0)}
.editor p{margin:0}
/* course box — an outlined pill (vs the 4F fill pill) marking which course the
   lines below belong to; click it to pick from the course menu */
.course-box{width:fit-content;margin:12px 0 4px calc(-1 * var(--tab-pad-x) - 1px)}
.cb-btn,.course-tag{display:inline-flex;align-items:center;gap:4px;padding:3px var(--tab-pad-x);border:1px solid var(--line);border-radius:var(--radius);corner-shape:squircle;color:var(--ink);transition:background 140ms}
.cb-btn:hover,.cb-btn:focus-visible,.course-box.is-open .cb-btn{background:var(--fill)}
.course-box[data-course=""] .cb-btn{color:var(--gray)}
/* typing styles from the format bar */
.editor b,.editor strong{font-weight:700}
.editor i,.editor em{font-style:italic;font-synthesis:style}
.editor blockquote{margin:6px 0;padding:0 0 0 12px;border-left:2px solid var(--gray)}
.editor code{background:var(--fill);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1px 5px}
.editor ul{margin:0;padding-left:18px}
.editor ul.checklist{list-style:none;padding-left:22px}
.editor ul.checklist>li{position:relative}
.editor ul.checklist>li::before{content:'';position:absolute;left:-22px;top:.45em;width:9px;height:9px;border:1px solid var(--gray);border-radius:50%;cursor:pointer;transition:background 140ms,border-color 140ms}
.editor ul.checklist>li[data-done]{color:var(--gray);text-decoration:line-through}
.editor ul.checklist>li[data-done]::before{background:var(--ink);border-color:var(--ink)}

/* Future Item에 등록하기 — a quiet pill on the Future Item box's row, flush right */
.fi-register{display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.fi-register input{accent-color:var(--ink);width:10px;height:10px;margin:0}
.journal-foot{flex-wrap:wrap}
.journal-foot .save-status{margin-right:auto}

/* ---- journal: save state + next action ---- */
.journal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--line)}
.save-status{margin:0;color:var(--gray);display:flex;align-items:center;gap:8px}
.save-status.is-busy::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gray);animation:pulse 1s var(--ease-inout) infinite alternate}
.save-status.is-error{color:var(--ink)}
@keyframes pulse{from{opacity:.25}to{opacity:1}}

/* the one deliberately filled control on the page — everything else stays quiet */
.btn-primary{background:var(--ink);color:var(--bg);padding:8px 18px;border-radius:var(--radius);corner-shape:squircle;white-space:nowrap;transition:transform 200ms var(--ease-out),opacity 140ms}
.btn-primary:hover{opacity:.85}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.4;cursor:default;transform:none}

/* ---- resume: small disclosure rows under the editor ---- */
.resume{margin-top:56px}
.resume-row summary{list-style:none;cursor:pointer}
.resume-row summary::-webkit-details-marker{display:none}
.resume-summary{display:flex;align-items:center;gap:10px;padding:6px var(--tab-pad-x);margin:0 calc(-1 * var(--tab-pad-x));border-radius:var(--radius);corner-shape:squircle;color:var(--ink);transition:background 140ms}
.resume-summary:hover,.resume-summary:focus-visible{background:var(--fill)}
.resume-summary>span:first-child{margin-right:auto}
.resume-count{color:var(--gray);font-variant-numeric:tabular-nums}
.resume-row[open] .caret{transform:rotate(180deg)}
/* room on the left for the nav-tab hover arrow inside the clipped accordion */
.resume-list{list-style:none;margin:0;padding:4px 0 10px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.resume-list .ri-title{color:var(--ink)}
.resume-list .ri-meta{color:var(--gray);margin-left:8px}
.todo-list li{padding:6px var(--tab-pad-x);color:var(--gray)}
.todo-list .nav-code{color:var(--ink);margin-right:8px}
.resume-hint{padding-left:calc(24px + var(--tab-pad-x));margin:0 0 12px}

/* ---------- Future Items ---------- */
.view-future{position:relative}
.future-hint{margin:6px 0 0}

/* toolbar: filters on the left, sort pinned to the far right, one row —
   sits between the General/임시 top row and the course grid */
.fi-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 16px calc(-1 * var(--tab-pad-x))}
.fi-filters{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.fi-filter[aria-pressed="true"]{font-weight:700}
.f-count{margin-left:5px;color:var(--gray);font-weight:400;font-variant-numeric:tabular-nums}
/* sort: one-shot rearrange buttons for the course grid, hidden while a single box is filtered */
.fi-sort{display:flex;align-items:center}

/* composer: a card, not a single-line bar — membership chips (다룬 과목 style,
   but single-pick), an optional due date+time row, then the action field */
.fi-composer{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:14px 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);corner-shape:squircle;transition:border-color 140ms}
.fi-composer:focus-within{border-color:var(--gray)}
.fi-scope-chips{margin:0}
.fi-input{min-height:calc(2 * 1.5em + 12px);padding:6px 0;border:0;background:none;color:var(--ink);font:inherit;resize:vertical}
.fi-input::placeholder{color:var(--gray)}
.fi-input:focus-visible{outline:0}
.fi-due-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--gray)}
.fi-due-toggle{display:flex;align-items:center;gap:6px}
.fi-due-toggle input{margin:0}

/* time picker: the same .datepicker card as the date picker, but three
   scrollable columns (오전/오후, 시, 분) of .cm-item options instead of a grid */
.tp-panel{width:auto}
.tp-panel .dp-foot{justify-content:space-between}
.tp-cols{display:flex;gap:2px}
.tp-col{display:flex;flex-direction:column;gap:1px;width:56px;max-height:190px;overflow-y:auto;text-align:center}
.tp-col .cm-item{text-align:center}
.tp-col .cm-item[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.fi-composer .btn-primary{align-self:flex-end}

/* General+임시 share a fixed top row (half width each), rendered into their own
   slot above the filter/sort toolbar — not part of the course grid below. */
.fi-top-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px}

/* boxes: a hairline frame, no shadow; 임시 is dashed because it's not a place yet.
   The section labels and the "+ 박스 추가" tile always span the full row; the
   drag-orderable course/custom boxes fall into a 4-per-row grid. */
.fi-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.fi-list>.fi-section-label,.fi-list>.fi-box-add,.fi-list>.fi-box:only-child{grid-column:1/-1}
.fi-section-label{margin:12px 0 -4px;color:var(--gray)}
.fi-box{padding:10px 14px 8px;border:1px solid var(--line);border-radius:var(--radius);corner-shape:squircle;transition:background 140ms,outline-color 140ms}
.fi-box.is-temp{border-style:dashed}
.fi-box[draggable="true"]{cursor:grab}
.fi-box.box-drag-src{opacity:.4}
.fi-box.box-drop-over{outline:1px solid var(--ink);background:var(--fill)}
.fi-box-head{display:flex;align-items:center;gap:10px;min-height:28px}
.fi-box-title{margin:0;color:var(--ink);overflow-wrap:anywhere}
.fi-box-name-edit{flex:1;min-width:0;padding:3px 0;border:0;border-bottom:1px solid var(--gray);background:none;color:var(--ink)}
.fi-box-name-edit:focus-visible{outline:0}
/* 즐겨찾기 별표: 사용자가 준 SVG 두 장(옅은 회색/#333333 채움)을 그대로 쓴다 —
   기본은 회색 별, 즐겨찾기된 것만 검게 칠한 별로 바뀐다. Journal Archive
   카드의 즐겨찾기 별표도 이 클래스를 그대로 재사용한다 */
.fi-box-fav{flex:0 0 auto;margin-left:auto;width:15px;height:14px;background:url('assets/star-gray.svg') center/contain no-repeat;transition:opacity 140ms}
.fi-box-fav:hover{opacity:.75}
.fi-box-fav.is-fav{background-image:url('assets/star-black.svg')}
.fi-box-fav.is-fav:hover{opacity:.85}
.fi-box-more{margin-right:-6px}
.fi-box-hint,.fi-box-empty{margin:2px 0 6px;color:var(--gray)}

/* the "+ 박스 추가" tile: a button when idle, a name field once clicked */
.fi-box-add{background:none;font:inherit;border-style:dashed;color:var(--gray);display:flex;align-items:center;justify-content:center;min-height:64px;transition:background 140ms,color 140ms}
.fi-box-add:not(.is-editing){cursor:pointer}
.fi-box-add:hover{background:var(--fill);color:var(--ink)}
.fi-box-add-input{width:100%;max-width:200px;padding:3px 0;border:0;border-bottom:1px solid var(--gray);background:none;color:var(--ink);text-align:center}
.fi-box-add-input:focus-visible{outline:0}

.fi-rows{list-style:none;margin:0;padding:0}
.fi-row{display:flex;flex-direction:column;gap:4px;min-height:32px;padding:2px 0}
.fi-row[draggable="true"]{cursor:grab}
.fi-row.is-drag-src{opacity:.4}
/* flex-wrap so the 3 action icons drop to their own line under the text in
   narrow boxes instead of squeezing .fi-text down to character-by-character
   wrapping (same class of bug the deadline badge had before it got its own line) */
.fi-row-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fi-check{appearance:none;flex:0 0 10px;width:10px;height:10px;margin:0;border:1px solid var(--gray);border-radius:50%;cursor:pointer;transition:background 140ms,border-color 140ms}
.fi-check:hover{background:var(--fill)}
.fi-check:checked{background:var(--ink);border-color:var(--ink)}
.fi-check:focus-visible{outline:1px solid var(--gray);outline-offset:3px}
.fi-text{flex:1;min-width:80px;color:var(--ink);overflow-wrap:anywhere}
.fi-row.is-done .fi-text{color:var(--gray);text-decoration:line-through}
/* deadline: a small boxed badge on its own line, indented to sit under the
   text (checkbox width 10px + .fi-row-main gap 10px = 20px). No badge at all
   when there's no due date — the clock icon button is how you add one. */
.fi-due{align-self:flex-start;margin-left:20px;padding:2px 6px;border-radius:var(--radius-sm);background:var(--fill);font-size:8pt;color:var(--gray);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:pointer}
.fi-row.is-overdue .fi-due{color:var(--ink);font-weight:700}
.fi-edit{flex:1;min-width:0;padding:3px 0;border:0;border-bottom:1px solid var(--gray);background:none;color:var(--ink)}
.fi-edit:focus-visible{outline:0}
.fi-edit-btn,.fi-due-btn{flex:0 0 auto}
.fi-delete{flex:0 0 auto;margin-right:-6px}
/* 시계 아이콘을 누르면 뜨는 마감 팝오버 — 작성 카드의 날짜/시간 pill을 그대로
   옮겨 담은 뜬 카드(course-menu와 같은 float 카드 스타일) */
.fi-due-pop{position:absolute;z-index:30;display:flex;gap:8px;padding:6px;background:var(--bg);border-radius:var(--radius);corner-shape:squircle;box-shadow:var(--shadow-float)}
/* dragging one activity onto another (same box) reorders instead of moving boxes */
.fi-row.row-drop-over{outline:1px dashed var(--ink);outline-offset:2px}

.fi-done{margin-top:4px}
.fi-done summary{list-style:none;cursor:pointer}
.fi-done summary::-webkit-details-marker{display:none}
.fi-done-summary{display:inline-flex;align-items:center;gap:8px;padding:4px var(--tab-pad-x);margin-left:calc(-1 * var(--tab-pad-x));border-radius:var(--radius);corner-shape:squircle;color:var(--gray);transition:background 140ms,color 140ms}
.fi-done-summary:hover,.fi-done-summary:focus-visible{background:var(--fill);color:var(--ink)}
.fi-done[open] .caret{transform:rotate(180deg)}

/* drag: every valid destination is outlined; the one under the pointer fills */
.is-dragging [data-drop].drop-ok{outline:1px dashed var(--gray);outline-offset:2px}
.is-dragging [data-drop].drop-over{outline:1px solid var(--ink);background:var(--fill)}

/* menu extras (the card itself is .course-menu) */
.cm-head{margin:4px 10px 4px;color:var(--gray)}
.cm-note{margin-left:6px;color:var(--gray)}
.cm-sep{height:1px;margin:4px 8px;background:var(--line)}
.cm-item[aria-checked="true"]{color:var(--ink);font-weight:700}

/* toast: bottom-centre card for undo / retry / where it went */
.toast-wrap{position:fixed;left:0;right:0;bottom:24px;z-index:50;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.toast{display:flex;align-items:center;gap:10px;max-width:100%;padding:6px 6px 6px 18px;background:var(--bg);border-radius:var(--radius);corner-shape:squircle;box-shadow:var(--shadow-float);color:var(--ink);pointer-events:auto}
.toast.is-error .toast-msg{font-weight:700}
.toast-act{color:var(--ink);background:var(--fill)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:860px){
  .fi-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .fi-list{grid-template-columns:1fr}
  .fi-top-row{grid-template-columns:1fr}
}

/* wider than the shared .shell column. Assignment Manage tracks a 12-row
   grid; Future Item's 4-per-row course grid benefits from even more room,
   so it gets a wider cap of its own; Journaling and Journal Archive share
   the same 900px cap (2026-09-13). */
.shell:has(.view-journal:not([hidden])){max-width:900px}
.shell:has(.view-assignment:not([hidden])){max-width:920px}
.shell:has(.view-future:not([hidden])){max-width:1500px}
.shell:has(.view-archive:not([hidden])){max-width:900px}

/* ---------- Assignment Manage ---------- */
/* a table, not a card list — this screen tracks a grid (course × kind), so it reads as one */
.am-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}
.am-week-nav{display:flex;align-items:center;gap:8px}
.am-week-label{color:var(--ink);font-variant-numeric:tabular-nums}
.am-status-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--gray)}
.am-progress{margin:10px 0 0;color:var(--gray);font-variant-numeric:tabular-nums}
.am-backend-hint{margin:16px 0;color:var(--ink)}
.am-backend-hint code{background:var(--fill);border-radius:var(--radius-sm);padding:1px 5px}

.am-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:14px}
.am-table th:first-child,.am-table td:first-child{width:38%}
.am-table th{text-align:left;color:var(--gray);font-weight:400;padding:6px var(--tab-pad-x);border-bottom:1px solid var(--line)}
/* the status button carries its own left padding (an extra --tab-pad-x) so its
   dot sits one --tab-pad-x further right than a plain header — match it here */
.am-table th:not(:first-child){padding-left:calc(var(--tab-pad-x) * 2)}
.am-table td{padding:8px var(--tab-pad-x);border-bottom:1px solid var(--line);vertical-align:middle}
.am-table tr:last-child td{border-bottom:none}
.am-course-name{color:var(--ink);padding:4px var(--tab-pad-x);margin-left:calc(-1 * var(--tab-pad-x));border-radius:var(--radius);corner-shape:squircle;transition:background 140ms}
.am-course-name:hover{background:var(--fill)}

.am-cell{display:inline-flex;align-items:center;gap:6px}
.am-status{display:inline-flex;align-items:center;gap:6px;color:var(--gray);border-radius:var(--radius);corner-shape:squircle;padding:4px var(--tab-pad-x);transition:background 140ms,color 140ms}
.am-status:hover{background:var(--fill);color:var(--ink)}
.am-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--gray);flex:0 0 9px}
.am-dot-confirmed_mail,.am-dot-confirmed_manual{background:var(--ink);border-color:var(--ink)}
.am-dot-not_applicable{border-style:dashed}
.am-dot-conflict{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 2px var(--fill)}
.am-shortcut{color:var(--gray);padding:2px 4px;border-radius:var(--radius-sm)}
.am-shortcut:hover{color:var(--ink);background:var(--fill)}

.am-detail{position:fixed;right:32px;bottom:32px;width:320px;max-width:calc(100vw - 32px);max-height:70vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);corner-shape:squircle;padding:18px;box-shadow:var(--shadow-float);z-index:20}
.am-detail-close{position:absolute;top:10px;right:10px;color:var(--gray)}
.am-detail-title{margin:0 18px 8px 0;font-size:1em;color:var(--ink)}
.am-detail-status{display:flex;align-items:center;gap:6px;margin:0 0 10px;color:var(--ink)}
.am-conflict{color:var(--ink);background:var(--fill);border-radius:var(--radius-sm);padding:8px 10px;margin:0 0 10px}
.am-detail-fields{margin:0 0 10px;font-size:.95em}
.am-detail-fields dt{color:var(--gray);margin-top:6px}
.am-detail-fields dd{margin:0;color:var(--ink)}
.am-links{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
.am-detail-actions{display:flex;flex-wrap:wrap;gap:6px}

@media(max-width:640px){
  .am-table,.am-table thead,.am-table tbody,.am-table tr,.am-table td{display:block}
  .am-table thead{display:none}
  .am-table tr{padding:8px 0;border-bottom:1px solid var(--line)}
  .am-table td{border-bottom:none;padding:2px 0}
  .am-detail{left:16px;right:16px;bottom:16px;width:auto;max-width:none}
}

/* ---------- Journal Archive ---------- */
.view-archive{position:relative} /* positions #archive-menu, same as .view-future */
.archive-hint{margin:6px 0 16px}
#archive-filters{margin-bottom:10px}
/* each row is its own <details> dropdown, not nested in a section-level one —
   drop resume-list's accordion indent and stretch rows to the full width so
   the summary's title/meta/caret spacing (margin-right:auto trick) works */
.archive-list{padding-left:0;align-items:stretch}
/* .resume-list sets display:flex, which otherwise beats the [hidden]
   attribute's UA-stylesheet display:none at equal specificity */
#archive-list[hidden]{display:none}
.archive-empty{color:var(--gray);padding:6px 0}
.archive-entry .accordion-content{padding:0 0 12px}
/* reuses .editor's heading/list/quote/code styling for the saved body, minus
   the live editor's own height reservation and inner padding */
.archive-preview{min-height:0;padding:0 0 10px}

/* course filter → card grid instead of the All list: one card per journal
   date that has that course, showing only that course's content. Same box
   language as Future Item's .fi-box, doubled up (2 per row instead of 4,
   taller padding) since a journal excerpt needs more room than a to-do line. */
.archive-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#archive-cards[hidden]{display:none}
.archive-card{padding:20px 24px 16px;border:1px solid var(--line);border-radius:var(--radius);corner-shape:squircle;transition:background 140ms}
.archive-card.is-fav{background:var(--fill)}
.archive-card-head{margin-bottom:4px}
.archive-card-body{padding-bottom:0}
@media(max-width:720px){.archive-cards{grid-template-columns:1fr}}

/* "수정하기" moves the live Journaling composer into #archive-compose-slot
   in place — #archive-browse (filters+list/cards) hides while it's shown */
#archive-compose-slot .archive-back{margin-bottom:16px}

/* ---------- 5. Footer: flush left with the logo and nav labels ---------- */
/* theme.css pads it max(32px,6vw) on a gray fill; pin it to --text-start
   on the page's own white, all three lines in the secondary tone */
.site-footer{padding-left:var(--text-start);padding-right:32px;background:none}
.site-footer,.footer-identity p,.footer-identity .footer-copyright,.footer-social a{color:var(--gray)}
.footer-social a:hover{color:var(--ink)}
@media(max-width:700px){.site-footer{padding-left:24px;padding-right:24px}}

/* Desktop pointer: preserve text, disabled and drag-specific system cursors. */
@media (pointer:fine){
  html,body{cursor:var(--phi-cursor),auto}
  button:not(:disabled),a,summary,label,select:not(:disabled),input[type="checkbox"]:not(:disabled),[role="button"]{cursor:var(--phi-cursor-pointer),pointer}
  input[type="text"],input[type="search"],textarea,[contenteditable="true"]{cursor:var(--phi-cursor-text),text}
  /* these repeat selectors that set a plain `cursor:pointer` elsewhere with
     higher specificity than the generic rule above (class beats element,
     or it's a ::before pseudo-element the rule above can't reach) */
  .resume-row summary,.fi-done summary,.nav-accordion>summary,.fi-register,.editor ul.checklist>li::before,.fi-box-add:not(.is-editing){cursor:var(--phi-cursor-pointer),pointer}
}