/* =========================================================
   STUDY DESK — design tokens
   subject: a study session reimagined as a train journey —
            every day of studying is one ride on the "Study
            Express": you punch a ticket, board a focus
            session, and ride toward today's goal station.
            Warm cream ticket-paper, deep rail-navy cover,
            a punched amber ticket accent, ink-stamp red for
            calls to action, a steel-blue for the tiny engine
            mark.
   signature: a locomotive medallion in the sidebar; a
              perforated ticket-stub seam where the cover meets
              the log page; amber D-day ticket tags; a station-
              clock focus dial with real tick marks; a torn
              boarding-ticket and receding rail line drifting
              behind every screen.
   ========================================================= */

:root{
  --sky-top:    #FBF1E0;
  --sky-bottom: #F2DEB8;
  --paper:      #FBF4E6;   /* cream ticket-paper page background  */
  --panel:      #FFFDF8;   /* ticket card / panel surface         */
  --stub:       #17324E;   /* deep rail-navy — ticket cover        */
  --stub-deep:  #0A1C2E;

  --grid-line:  rgba(23,50,78,0.05);

  --ink:        #2A2118;
  --ink-soft:   #6E5D45;
  --ink-faint:  #AC9C7B;

  --accent:      #D9732B;  /* ticket amber — primary               */
  --accent-ink:  #B85A1D;
  --accent-soft: rgba(217,115,43,0.10);

  --frost:       #F3DBAE;  /* pale ticket-paper highlight          */
  --frost-strong:#E8B978;

  --needle:      #C43B2E;  /* ink-stamp red — CTA / urgent         */
  --needle-ink:  #A32E23;
  --needle-soft: rgba(196,59,46,0.12);

  --compass-red: #C43B2E;  /* engine mark — headlamp accent         */
  --compass-blue:#2E5F8A;  /* engine mark — cabin-window accent     */

  --redpen:      #C43B2E;
  --redpen-soft: rgba(196,59,46,0.10);

  --silver:      #D8B26B;  /* brass rivet / ticket rule            */
  --silver-deep: #A98A48;

  --highlighter: 217,115,43;

  --line:       #EAD8B6;
  --line-strong:#DCC091;

  --radius: 12px;
  --radius-lg: 16px;

  --font-ui:     'PretendardVariable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-signage:'Cinzel', var(--font-ui);
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  padding:26px;
  background:
    radial-gradient(1100px 500px at 88% -8%, rgba(255,255,255,0.9), transparent 60%),
    linear-gradient(160deg, var(--sky-top), var(--sky-bottom));
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.mono{ font-family: var(--font-mono); }
::selection{ background: var(--needle); color:#fff; }

/* ---------------------------------------------------------
   Layout frame — the log book itself
--------------------------------------------------------- */
.frame{
  position:relative;
  z-index:1;
  display:flex;
  min-height: calc(100vh - 52px);
  background: var(--panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px rgba(16,50,80,0.16), 0 2px 6px rgba(16,50,80,0.08);
  overflow:hidden;
}

/* ---------------------------------------------------------
   Sidebar — the ticket cover: deep rail-navy, a jagged
   perforated seam torn against the log page, one brass
   locomotive medallion instead of a logo.
--------------------------------------------------------- */
.sidebar{
  position:relative;
  width:236px;
  flex:0 0 236px;
  background: linear-gradient(180deg, var(--stub), var(--stub-deep));
  color: #fff;
  padding: 30px 20px 20px 26px;
  display:flex;
  flex-direction:column;
  min-height:100%;
  clip-path: polygon(
    0 0, 100% 0, 100% 4%, calc(100% - 12px) 7%, 100% 10%,
    calc(100% - 12px) 15%, 100% 18%, calc(100% - 12px) 23%, 100% 26%,
    calc(100% - 12px) 31%, 100% 34%, calc(100% - 12px) 39%, 100% 42%,
    calc(100% - 12px) 47%, 100% 50%, calc(100% - 12px) 55%, 100% 58%,
    calc(100% - 12px) 63%, 100% 66%, calc(100% - 12px) 71%, 100% 74%,
    calc(100% - 12px) 79%, 100% 82%, calc(100% - 12px) 87%, 100% 90%,
    calc(100% - 12px) 95%, 100% 98%, 100% 100%, 0 100%
  );
}
.sidebar::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(143,210,237,0.10) 50%, transparent 70%);
  background-size: 250% 250%;
  animation: auroraShift 11s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes auroraShift{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position:100% 50%; } }
body.motion-off .sidebar::after{ animation:none; }
.spine{ display:none; }

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:26px;
  padding-bottom:20px;
  border-bottom:1px dashed rgba(255,255,255,0.18);
}
.brand-mark{
  width:46px; height:46px;
  flex:0 0 auto;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
}
.compass-svg{ width:100%; height:100%; overflow:visible; }
.compass-needle{ fill: var(--needle); transform-origin: 32px 32px; animation: needleSway 5s ease-in-out infinite; }
body.motion-off .compass-needle{ animation:none; }
@keyframes needleSway{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }

.brand-title{
  font-family: var(--font-signage);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:1.6px;
  color: #fff;
}
.brand-sub{
  font-size:8.5px;
  font-family: var(--font-mono);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color: var(--frost-strong);
  margin-top:5px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px 10px 14px;
  font-family: var(--font-ui);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.1px;
  color: rgba(255,255,255,0.56);
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav a:hover{
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.nav a.active{
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-weight:700;
}
.nav a.active::before{
  /* trail pennant flag */
  content:"";
  position:absolute;
  left:-13px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid var(--needle);
  animation: pennantPop .22s ease;
}
@keyframes pennantPop{ from{ transform:translateY(-50%) scale(0) translateX(-4px); opacity:0; } to{ transform:translateY(-50%) scale(1); opacity:1; } }
.nav a{ animation: navIn .35s ease both; }
.nav a:nth-child(1){ animation-delay:.02s; } .nav a:nth-child(2){ animation-delay:.05s; }
.nav a:nth-child(3){ animation-delay:.08s; } .nav a:nth-child(4){ animation-delay:.11s; }
.nav a:nth-child(5){ animation-delay:.14s; } .nav a:nth-child(6){ animation-delay:.17s; }
.nav a:nth-child(7){ animation-delay:.20s; } .nav a:nth-child(8){ animation-delay:.23s; }
@keyframes navIn{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.nav a.active .nav-tab{
  color: var(--stub);
  background: var(--frost-strong);
  border-color: var(--frost-strong);
}
.nav-tab{
  font-family: var(--font-mono);
  font-size:10px;
  font-weight:700;
  color: rgba(255,255,255,0.4);
  width:20px; height:20px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.22);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}

.sidebar-foot{
  margin-top:auto;
  padding-top:20px;
}
.sidebar-foot::before{
  /* punched ticket edge — a dotted perforation line */
  content:"";
  display:block;
  height:10px;
  margin-bottom:12px;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.55) 0, rgba(255,255,255,0.55) 3px,
    transparent 3px, transparent 11px);
  opacity:.55;
}
.sidebar-foot .annotation{
  font-family: var(--font-mono);
  font-size:9px;
  letter-spacing:.2px;
  color: rgba(255,255,255,0.42);
  display:block;
  padding:0;
  background:none;
  border-radius:0;
}

/* ---------------------------------------------------------
   Main / the log page
--------------------------------------------------------- */
.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background: var(--paper);
}

.topbar{
  height:58px;
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 40px;
  border-bottom:1px solid var(--line);
  background: var(--panel);
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar-tag{
  font-family: var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--line-strong);
  padding:4px 9px;
  border-radius:4px;
  background: var(--accent-soft);
}
.topbar-date{
  font-family: var(--font-mono);
  font-size:12.5px;
  color: var(--ink-soft);
  letter-spacing:0.4px;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1px;
  color:#1B7A52;
  background: rgba(27,122,82,0.09);
  border:1px solid rgba(27,122,82,0.24);
  padding:5px 11px;
  border-radius:5px;
}
.status-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#1B7A52;
  box-shadow:0 0 0 2px rgba(27,122,82,0.18);
  animation: dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ box-shadow:0 0 0 2px rgba(27,122,82,0.18); }
  50%{ box-shadow:0 0 0 5px rgba(27,122,82,0.05); }
}
.pill{
  font-family: var(--font-mono);
  font-size:11.5px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding:5px 12px;
  border-radius: 5px;
  border:1px solid rgba(30,127,191,0.2);
}

.content{
  flex:1;
  position:relative;
  padding: 36px 48px 80px 48px;
  background: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 64px);
  overflow-x:hidden;
  overflow-y:auto;
}
.content::before{ content:none; }

/* ---------------------------------------------------------
   Ambient layer — a red/blue compass needle circling a search
   ring: departure-board, "off on a trip" energy instead of a
   quiet watermark.
--------------------------------------------------------- */
.content-sky{
  /* Absolutely positioned within the scrolling .content panel, so it
     scrolls away with the page instead of staying pinned in place. */
  position:absolute;
  inset:0;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
}

/* Engine mark — a small red/blue locomotive badge riding along
   with the ticket stub, like a maker's mark stamped on the paper */

/* Torn boarding-pass ticket stub — sits top-right, tilted like a
   ticket tucked in a pocket. Carries all the "moving train" feel
   on its own now: a slow opacity breathe plus a gentle rock/sway,
   like it's tucked in a pocket on a train that's underway. */
.content-sky .c-ticket{
  position:absolute;
  top:9%; right:4%;
  width:220px; height:100px;
  opacity:.55;
  animation: ticketBreathe 7s ease-in-out infinite, ticketRock 3.4s ease-in-out infinite;
}
.content-sky .c-ticket-mark{ transform: translate(6px,6px) rotate(-4deg); transform-origin:104px 44px; }
.content-sky .c-ticket-body{ fill: var(--paper); stroke: var(--stub); stroke-width:1.4; }
.content-sky .c-ticket-notch{ fill: var(--panel); }
.content-sky .c-ticket-perf{ stroke: var(--stub); stroke-width:1.2; stroke-dasharray:2 3; }
.content-sky .c-ticket-label{ font-family: var(--font-mono); font-size:7px; letter-spacing:2px; fill: var(--ink-soft); }
.content-sky .c-ticket-route{ font-family: var(--font-signage); font-size:13px; font-weight:700; fill: var(--stub); }
.content-sky .c-ticket-rule{ stroke: var(--silver); stroke-width:1; stroke-dasharray:1 3; }
.content-sky .c-ticket-barcode rect{ fill: var(--stub); }
.content-sky .c-ticket-num{ font-family: var(--font-mono); font-size:6px; letter-spacing:1px; fill: var(--stub); text-anchor:middle; }
@keyframes ticketBreathe{ 0%,100%{ opacity:.45; } 50%{ opacity:.65; } }
@keyframes ticketRock{ 0%,100%{ transform: translateX(0) rotate(0deg); } 50%{ transform: translateX(3px) rotate(0.8deg); } }
body.motion-off .content-sky .c-ticket{ animation:none; opacity:.55; }

.content-sky .c-rose{
  position:absolute;
  right:-70px; bottom:-190px;
  width:320px; height:320px;
  opacity:.045;
  animation: roseSpin 150s linear infinite;
  transform-origin:center;
}
@keyframes roseSpin{ to{ transform:rotate(360deg); } }
body.motion-off .content-sky .c-rose{ animation:none; }

.view{ position:relative; z-index:1; }

.view{
  display:none;
  max-width: 780px;
  animation: fadeIn 0.2s ease;
}
.view.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none; } }

.view-title{
  font-family: var(--font-signage);
  font-size:20px;
  font-weight:600;
  letter-spacing:0.8px;
  margin: 0 0 4px 0;
  color: var(--ink);
  display:flex;
  align-items:center;
  gap:10px;
}
.view-title::before{
  content:"";
  width:9px; height:9px;
  border-radius:1px;
  background: var(--accent);
  transform: rotate(45deg);
  flex:0 0 auto;
}
.view-date{
  font-family: var(--font-mono);
  font-size:12px;
  color: var(--ink-soft);
  margin:0 0 26px 0;
}

/* ---------------------------------------------------------
   Blocks — log-page panels, iced top edge
--------------------------------------------------------- */
.block{
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 24px 26px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(17,58,92,0.05);
}
.block:last-child{ margin-bottom:0; }
.block-label{
  font-family: var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color: var(--ink-faint);
  margin-bottom:14px;
}
.block-label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:14px;
}
.block-label-row .block-label{ margin-bottom:0; }

.split{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:0 16px;
}
.split .block{ padding-top:22px; transition: transform .18s ease, box-shadow .18s ease; }
.split .block:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(17,58,92,0.11); }

.text-link{
  font-size:12px;
  color: var(--accent-ink);
  font-weight:700;
}
.text-link:hover{ text-decoration:underline; }

.hint{
  font-size:12px;
  color: var(--ink-faint);
  margin-top:8px;
}

/* ---------------------------------------------------------
   Progress
--------------------------------------------------------- */
.progress-row{
  display:flex;
  align-items:center;
  gap:14px;
}
.progress-track{
  position:relative;
  flex:1;
  height:10px;
  background: var(--paper);
  border:1px solid var(--line);
  border-radius:99px;
}
.progress-fill{
  height:100%;
  border-radius:99px;
  background: linear-gradient(90deg, var(--accent-ink), var(--accent), var(--frost-strong));
  width:0%;
  transition: width 0.5s cubic-bezier(.34,1.1,.64,1);
  position:relative;
  overflow:hidden;
}
.mini-progress .progress-track{ overflow:hidden; }

/* Route marker — a little locomotive that rides along the fill,
   tracking progress toward today's goal; a small flag pin marks
   the goal station fixed at the finish line */
.progress-marker{
  position:absolute;
  top:50%; left:0%;
  width:26px; height:17px;
  transform: translate(-50%,-50%);
  transition: left 0.6s cubic-bezier(.34,1.4,.64,1);
  pointer-events:none;
  z-index:2;
}
.progress-marker svg{
  width:100%; height:100%; overflow:visible;
  animation: trainChug .55s ease-in-out infinite;
}
.progress-marker rect,
.progress-marker circle:not(.marker-train-eye){ fill: var(--stub); }
.progress-marker .marker-train-eye{ fill: var(--needle); }
body.motion-off .progress-marker svg{ animation:none; }
@keyframes trainChug{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1px); } }
.progress-marker.arrived{ animation: markerArrive .5s ease; }
@keyframes markerArrive{
  0%{   transform: translate(-50%,-50%) scale(1) rotate(0); }
  45%{  transform: translate(-50%,-50%) scale(1.35) rotate(8deg); }
  100%{ transform: translate(-50%,-50%) scale(1) rotate(0); }
}
.progress-goal-flag{
  position:absolute;
  top:50%; right:2px;
  width:13px; height:18px;
  transform: translateY(-88%);
  pointer-events:none;
}
.progress-goal-flag svg{ width:100%; height:100%; overflow:visible; }
.progress-goal-flag line{ stroke: var(--stub); stroke-width:1.4; }
.progress-goal-flag path{ fill: var(--needle); }
.progress-fill::after{
  content:"";
  position:absolute; top:0; bottom:0;
  left:-30%;
  width:30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: shineSweep 2.6s ease-in-out infinite;
}
@keyframes shineSweep{ 0%{ left:-30%; } 100%{ left:130%; } }
.progress-num{
  font-family: var(--font-mono);
  font-size:14px;
  font-weight:700;
  min-width:44px;
  text-align:right;
  color: var(--accent-ink);
}

.big-mono{
  font-family: var(--font-mono);
  font-size:32px;
  font-weight:700;
  color: var(--ink);
  letter-spacing:0.5px;
}

/* ---------------------------------------------------------
   Checklists
--------------------------------------------------------- */
.check-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
}
.check-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px dashed var(--line);
  font-size:14px;
  transition: background 0.1s ease;
}
.check-list.large li{ padding:12px 0; font-size:15px; }
.check-list input[type=checkbox]{
  width:16px; height:16px;
  accent-color: var(--accent);
  flex:0 0 auto;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.check-list input[type=checkbox]:checked{ transform: scale(1.18); }
.check-list .todo-text{ flex:1; transition: color .2s ease; }
.check-list li.done .todo-text{
  color: var(--ink-faint);
  text-decoration: line-through;
}
#todoList li{ animation: itemIn .28s ease both; }
@keyframes itemIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }

/* Ticket stamp — a brief gold flash across a row the moment it's
   checked off, like an inspector's punch hitting the ticket */
.check-list li.just-done{ animation: ledgerStamp .5s ease; }
@keyframes ledgerStamp{
  0%{   background: rgba(224,160,48,0.28); }
  100%{ background: transparent; }
}
.check-list .todo-del{
  opacity:0;
  color: var(--redpen);
  font-size:12px;
  cursor:pointer;
  padding:2px 6px;
}
.check-list li:hover .todo-del{ opacity:1; }
.empty-row{
  color: var(--ink-faint);
  font-size:13px;
  padding:14px 0;
}
.empty-row::before{
  content:"◇";
  display:inline-block;
  margin-right:7px;
  color: var(--frost-strong);
  animation: emptyFloat 2.6s ease-in-out infinite;
}
@keyframes emptyFloat{
  0%,100%{ transform: translateY(0); }
  50%{     transform: translateY(-3px); }
}
body.motion-off .empty-row::before{ animation:none; }

/* ---------------------------------------------------------
   Tables — the ticket ledger: clean cream-white rows, an
   amber-tinted stub column at the end
--------------------------------------------------------- */
.table{
  position:relative;
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  background: var(--panel);
  border-radius:10px;
  border:1px solid var(--line);
  overflow:hidden;
}
.table th{
  text-align:left;
  font-family: var(--font-mono);
  font-size:10px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color: var(--ink-faint);
  font-weight:700;
  padding: 12px 12px 10px;
  border-bottom:2px solid var(--line-strong);
  background: var(--accent-soft);
}
.table td{
  padding: 13px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  color: var(--ink);
  font-family: var(--font-mono);
}
.table th:last-child,
.table td:last-child{
  border-left:1px solid var(--line-strong);
  background: var(--accent-soft);
}
.table td.empty-row:last-child{
  border-left:none;
  background:transparent;
}
.table.has-actions th:last-child,
.table.has-actions td:last-child{
  border-left:none;
  background:transparent;
  width:32px;
}
.table.has-actions th:nth-last-child(2),
.table.has-actions td:nth-last-child(2){
  border-left:1px solid var(--line-strong);
  background: var(--accent-soft);
}
.table tbody tr{ transition: background 0.1s ease; }
#subjectsTable tbody tr, #scheduleTable tbody tr, #notesTable tbody tr{ animation: rowIn .25s ease both; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.table tbody tr:hover{ background-color: rgba(var(--highlighter), 0.045); }
.table tbody tr:last-child td{ border-bottom:none; }
.table td.mono, .table th.mono{ font-family:var(--font-mono); }
.table .empty-row{ color: var(--ink-faint); font-family: var(--font-ui); }
.row-del{
  color: var(--ink-faint);
  font-size:12px;
  cursor:pointer;
  opacity:0;
}
.row-del:hover{ color: var(--redpen); }
.table tbody tr:hover .row-del{ opacity:1; }
.mini-progress{
  display:flex;
  align-items:center;
  gap:8px;
}
.mini-progress .progress-track{ width:80px; height:6px; }
.mini-progress .progress-fill::after{ display:none; }

/* ---------------------------------------------------------
   Forms / inputs / buttons
--------------------------------------------------------- */
.input, .select, .textarea{
  font-family: inherit;
  font-size:14px;
  color: var(--ink);
  background: var(--panel);
  border:1px solid var(--line-strong);
  border-radius: 8px;
  padding:9px 12px;
  outline:none;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30,127,191,0.14);
}
.add-row{
  display:flex;
  gap:10px;
  margin-bottom:20px;
  align-items:center;
}
.add-row.wrap{ flex-wrap:wrap; }
.add-row .input{ flex:1; }
.input-num{ width:90px; flex:0 0 auto; }
.input-date{ width:150px; flex:0 0 auto; }

.btn{
  font-family: var(--font-ui);
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  padding:9px 18px;
  border-radius: 8px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.96); }
.btn-primary{
  background: var(--needle);
  color:#fff;
  box-shadow: 0 3px 10px rgba(217,80,59,0.3);
}
.btn-primary:hover{ background: var(--needle-ink); box-shadow: 0 5px 16px rgba(217,80,59,0.4); }

/* Idle beacon — the main call-to-action gently glows while it
   waits, like a platform signal lamp, so the page never reads as frozen */
#focusStartBtn, .btn-primary.beacon{
  animation: ctaBeacon 3.2s ease-in-out infinite;
}
@keyframes ctaBeacon{
  0%,100%{ box-shadow: 0 3px 10px rgba(217,80,59,0.3); }
  50%{     box-shadow: 0 3px 10px rgba(217,80,59,0.3), 0 0 0 6px rgba(224,160,48,0.16); }
}
body.motion-off #focusStartBtn, body.motion-off .btn-primary.beacon{ animation:none; }

.btn-quiet{
  background:transparent;
  color: var(--accent-ink);
  border-color: var(--line-strong);
}
.btn-quiet:hover{ background: var(--accent-soft); }
.btn-outline{
  background:transparent;
  color: var(--redpen);
  border-color: rgba(217,80,59,0.35);
}
.btn-outline:hover{ background: var(--redpen-soft); }

a.btn{ display:inline-block; }

/* ---------------------------------------------------------
   Focus timer — a real station-clock dial, complete with tick
   marks, not just a bare progress ring
--------------------------------------------------------- */
.focus-wrap{
  text-align:center;
  padding: 36px 0 16px 0;
}
.focus-subject-label{
  display:block;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: var(--ink-faint);
  margin-bottom:8px;
}
.focus-wrap .select{
  min-width:220px;
  margin-bottom:32px;
}
.focus-timer{
  font-family: var(--font-mono);
  font-size:44px;
  font-weight:700;
  color: var(--ink);
  letter-spacing:0.5px;
  line-height:1;
}
.focus-caption{
  margin-top:10px;
  font-size:13px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color: var(--ink-soft);
}
.focus-rule{
  width:100px;
  height:1px;
  background: var(--line-strong);
  margin: 28px auto;
}
.focus-controls{
  display:flex;
  gap:12px;
  justify-content:center;
}
.focus-controls .btn{ min-width:120px; padding:12px 20px; }
#focusElapsedHint{ margin-top:22px; }

/* ---------------------------------------------------------
   Notes
--------------------------------------------------------- */
.notes-toolbar{
  display:flex;
  gap:10px;
  margin-bottom:18px;
}
.notes-toolbar .input{ flex:1; }
.note-title-input{
  font-family: var(--font-signage);
  font-size:19px;
  font-weight:600;
  letter-spacing:0.3px;
  border:none;
  background:transparent;
  padding:8px 0;
  width:100%;
  margin-bottom:6px;
  color: var(--ink);
}
.note-subject-select{
  margin-bottom:16px;
}
.textarea{
  width:100%;
  min-height:340px;
  resize:vertical;
  line-height:1.7;
  font-size:14.5px;
}
.note-editor-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
}
.back-link{ display:inline-block; margin-bottom:16px; }

/* ---------------------------------------------------------
   Stats chart (plain divs, no libraries)
--------------------------------------------------------- */
.chart{
  display:flex;
  align-items:flex-end;
  gap:14px;
  height:170px;
  padding-top:10px;
}
.chart-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  gap:8px;
}
.chart-val{
  font-family:var(--font-mono);
  font-size:10.5px;
  color: var(--ink-soft);
}
.chart-bar{
  width:100%;
  max-width:32px;
  background: linear-gradient(180deg, var(--frost-strong), var(--accent));
  border-radius:4px 4px 0 0;
  min-height:2px;
}
.chart-bar.today{ background: linear-gradient(180deg, #EFC488, var(--needle)); }
.chart-day{
  font-size:11px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.stats-summary th{
  text-transform:none;
  font-size:13px;
  color: var(--ink-soft);
  font-weight:600;
  font-family: var(--font-ui);
  width:220px;
  background: var(--panel);
  letter-spacing:0;
  border-bottom:1px dashed var(--line);
}
.stats-summary td{ font-family:var(--font-mono); font-size:14.5px; font-weight:700; color: var(--accent-ink); border-bottom:1px dashed var(--line); }
.stats-summary tr:last-child th,
.stats-summary tr:last-child td{ border-bottom:none; }

.danger-block{ margin-top:20px; }

/* ---------------------------------------------------------
   Toggle row (Settings → 배경 애니메이션)
--------------------------------------------------------- */
.toggle-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  color: var(--ink);
  cursor:pointer;
  user-select:none;
}
.toggle-row input[type="checkbox"]{
  width:17px; height:17px;
  accent-color: var(--accent);
  cursor:pointer;
}

/* ---------------------------------------------------------
   Signature: printed annotation
--------------------------------------------------------- */
.annotation{
  font-family: var(--font-mono);
  color: var(--accent-ink);
  font-size:11.5px;
  letter-spacing:.2px;
  display:inline-block;
  padding:3px 9px;
  background: var(--accent-soft);
  border-radius:5px;
}
.hint.annotation{ margin-top:10px; }

/* ---------------------------------------------------------
   Signature: D-day pennant — a small trail flag; urgent
   dates fly the needle-red flag
--------------------------------------------------------- */
.dday-stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border:1px solid rgba(30,127,191,0.22);
  border-radius:3px 8px 8px 3px;
  padding:3px 10px 3px 12px;
  position:relative;
}
.dday-stamp::before{
  content:"";
  position:absolute; left:-4px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%;
  background: var(--accent);
}
.dday-stamp.urgent{
  color: #fff;
  background: var(--needle);
  border-color: var(--needle);
}
.dday-stamp.urgent::before{ background: var(--needle-ink); }

/* ---------------------------------------------------------
   Focus dial — a station-clock dial with real tick marks around
   the rim, stamp-red progress arc
--------------------------------------------------------- */
.focus-dial{
  --dial-pct: 0;
  width:270px; height:270px;
  margin:0 auto;
  border-radius:50%;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(closest-side, var(--panel) 74%, transparent 75% 100%),
    conic-gradient(var(--line-strong) calc(var(--dial-pct) * 1%), transparent 0);
  box-shadow: 0 0 0 1px var(--line), inset 0 0 0 8px var(--panel);
  transition: background 0.2s linear;
}
.focus-dial::before{
  content:"";
  position:absolute; inset:6px;
  border-radius:50%;
  background-image: repeating-conic-gradient(var(--line-strong) 0deg 1deg, transparent 1deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, black 93%, black 100%);
          mask: radial-gradient(closest-side, transparent 92%, black 93%, black 100%);
  animation: dialTickDrift 140s linear infinite;
}
@keyframes dialTickDrift{ to{ transform: rotate(360deg); } }
body.motion-off .focus-dial::before{ animation:none; }

/* Idle breathing — the dial reads as a live compass even before a
   session starts, waiting for a heading */
.focus-dial:not(.running):not(.paused){
  animation: dialIdleBreathe 4.5s ease-in-out infinite;
}
@keyframes dialIdleBreathe{
  0%,100%{ box-shadow:0 0 0 1px var(--line), inset 0 0 0 8px var(--panel), 0 0 0 0 rgba(11,74,69,0.08); }
  50%{     box-shadow:0 0 0 1px var(--line), inset 0 0 0 8px var(--panel), 0 0 16px 4px rgba(11,74,69,0.1); }
}
body.motion-off .focus-dial:not(.running):not(.paused){ animation:none; }

.focus-dial .focus-timer{ color: var(--ink); position:relative; z-index:1; }
.focus-dial.running{
  background:
    radial-gradient(closest-side, var(--panel) 74%, transparent 75% 100%),
    conic-gradient(var(--accent) calc(var(--dial-pct) * 1%), var(--line) 0);
  animation: dialPulseRun 2.4s ease-in-out infinite;
}
.focus-dial.paused{
  background:
    radial-gradient(closest-side, var(--panel) 74%, transparent 75% 100%),
    conic-gradient(var(--needle) calc(var(--dial-pct) * 1%), var(--line) 0);
  animation: dialPulsePaused 2.4s ease-in-out infinite;
}
@keyframes dialPulseRun{
  0%,100%{ box-shadow:0 0 0 1px var(--line), inset 0 0 0 8px var(--panel), 0 0 0 0 rgba(30,127,191,0.3); }
  50%{ box-shadow:0 0 0 1px var(--line), inset 0 0 0 8px var(--panel), 0 0 20px 6px rgba(30,127,191,0.22); }
}
@keyframes dialPulsePaused{
  0%,100%{ box-shadow:0 0 0 1px var(--line), inset 0 0 0 8px var(--panel), 0 0 0 0 rgba(217,80,59,0.28); }
  50%{ box-shadow:0 0 0 1px var(--line), inset 0 0 0 8px var(--panel), 0 0 16px 5px rgba(217,80,59,0.18); }
}

.bump{ display:inline-block; animation: bumpPulse .45s ease; }
@keyframes bumpPulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.22); color: var(--needle-ink); }
  100%{ transform:scale(1); }
}

/* ---------------------------------------------------------
   Toast — a small platform announcement
--------------------------------------------------------- */
.toast-wrap{
  position:fixed;
  right:24px; bottom:24px;
  z-index:80;
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  pointer-events:none;
}
.toast{
  font-family: var(--font-mono);
  font-size:12.5px;
  color:#fff;
  background: var(--stub);
  border:1px solid rgba(255,255,255,0.16);
  padding:10px 16px;
  border-radius:8px;
  box-shadow: 0 12px 28px rgba(16,50,80,0.3);
  opacity:0;
  transform: translateY(10px) scale(0.96);
  transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  max-width:280px;
}
.toast::before{ content:"◆ "; color: var(--frost-strong); }
.toast.show{ opacity:1; transform:translateY(0) scale(1); }
@media (max-width:860px){ .toast-wrap{ right:12px; bottom:12px; } }

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 860px){
  .split{ grid-template-columns:1fr; }
  .sidebar{ width:76px; flex-basis:76px; padding:22px 8px; clip-path:none; }
  .brand-text, .nav-label, .sidebar-foot{ display:none; }
  .brand{ justify-content:center; }
  .nav a{ justify-content:center; }
  .nav-tab{ width:auto; }
  .content{ padding:26px 18px; }
  .topbar-tag{ display:none; }
  .status-chip{ display:none; }
  .focus-dial{ width:210px; height:210px; }
  .focus-timer{ font-size:34px; }
  body{ padding:0; }
  .frame{ border-radius:0; min-height:100vh; }
  /* the floating ticket / rail-line / wheel decoration was drifting
     on top of the page title on narrow screens — keep it desktop-only */
  .content-sky{ display:none; }
}