@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

/* Shared editorial type and tactile controls across the journal and its stories. */
:root{
  --control-ink:#263d50;
  --control-edge:#b8c8d2;
  --control-depth:#aebec9;
  --control-shadow:#20394b24;
  --control-focus:#5377d8;
}
html{font-synthesis:none}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
:where(button,.contact-link,.enlarge,.bottom-nav a,.essay-nav a,.site-footer .author-actions a,.site-footer [data-copy-domain]){
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif;
  font-weight:650;
  letter-spacing:-.025em;
  line-height:1.45;
}
:where(h1,h2,h3){text-wrap:balance}
.logo,.brand,.small-mark{font-family:'Noto Sans KR','Malgun Gothic',sans-serif;font-weight:700;letter-spacing:-.055em}
.intro h1,.feature-story h2,.journal-heading h2,.post h3,#reading h2,.article-head h1,.essay-header h1,.legal-essay-container h2{
  font-family:'Noto Serif KR','Malgun Gothic',serif;
  letter-spacing:-.045em;
  word-break:keep-all;
}
.intro h1{font-weight:600;line-height:1.38}
.feature-story h2,.article-head h1,.essay-header h1{font-weight:600;line-height:1.48}
.journal-heading h2,.post h3,.legal-essay-container h2{font-weight:600;line-height:1.5}
.eyebrow,.kicker,.post-tag,.guide-cover-label{font-family:'Noto Sans KR','Malgun Gothic',sans-serif;font-weight:700;letter-spacing:.11em}
.legal-essay-container,.essay-nav{font-family:'Noto Sans KR','Malgun Gothic',sans-serif}
.legal-essay-container p,.legal-essay-container li{line-height:1.9}
.comic-story body{font-family:'Noto Sans KR','Malgun Gothic',sans-serif;letter-spacing:-.015em}
.comic-story h1,.comic-story h2{font-family:'Noto Serif KR','Malgun Gothic',serif;font-weight:600;letter-spacing:-.045em;line-height:1.45;word-break:keep-all}
.comic-story figcaption{line-height:1.65}

button{
  border:1px solid var(--control-edge);
  border-radius:10px;
  background:linear-gradient(180deg,#fff 0%,#f1f5f7 100%);
  color:var(--control-ink);
  min-height:40px;
  padding:8px 14px;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--control-depth),0 8px 15px var(--control-shadow);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease;
}
button:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 5px 0 var(--control-depth),0 13px 18px var(--control-shadow);filter:saturate(1.06)}
button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--control-depth),0 3px 8px var(--control-shadow)}
button:disabled{opacity:.55;box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--control-depth);cursor:not-allowed}
button:focus-visible,.contact-link:focus-visible,.enlarge:focus-visible,.bottom-nav a:focus-visible,.essay-nav a:focus-visible,.site-footer .author-actions a:focus-visible{
  outline:3px solid var(--control-focus);outline-offset:4px;
}

.write,.primary,.filter-row button.active,.shelf-tabs button[aria-pressed="true"]{
  border-color:#213b55;
  background:linear-gradient(180deg,#405b76 0%,#243e58 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 #ffffff59,0 3px 0 #172d43,0 10px 18px #182d4240;
}
.write:hover:not(:disabled),.primary:hover:not(:disabled),.filter-row button.active:hover:not(:disabled),.shelf-tabs button[aria-pressed="true"]:hover:not(:disabled){box-shadow:inset 0 1px 0 #ffffff70,0 5px 0 #172d43,0 14px 20px #182d4240}
.write:active:not(:disabled),.primary:active:not(:disabled),.filter-row button.active:active:not(:disabled),.shelf-tabs button[aria-pressed="true"]:active:not(:disabled){box-shadow:inset 0 1px 0 #ffffff59,0 1px 0 #172d43,0 4px 9px #182d4233}
.header nav button{padding:8px 13px;font-size:14px}
.filter-row button{min-height:40px}
.feature-photo,.post-cover{
  padding:0;overflow:hidden;border-color:#c5d1d8;
  background:#e9eff2;
  box-shadow:inset 0 1px 0 #ffffffaa,inset 0 -3px 0 #243e5855,0 4px 0 #b2c0c9,0 12px 22px #263e4a29;
}
.feature-photo:hover:not(:disabled),.post-cover:hover:not(:disabled){box-shadow:inset 0 1px 0 #ffffffaa,inset 0 -3px 0 #243e5855,0 6px 0 #b2c0c9,0 17px 25px #263e4a30}
.feature-photo:active:not(:disabled),.post-cover:active:not(:disabled){box-shadow:inset 0 1px 0 #ffffffaa,inset 0 -2px 0 #243e5855,0 1px 0 #b2c0c9,0 5px 12px #263e4a29}
.post-cover{min-height:0;border-radius:12px}
.feature-photo{border-radius:11px 0 0 11px}
.featured{border-radius:12px;box-shadow:0 3px 0 #d4dde2,0 15px 28px #253c4b14}
.feature-story h2 button,.post h3 button{font:inherit;text-align:left;padding:5px 8px;margin:-5px -8px;background:linear-gradient(180deg,#ffffffab,#e8eff2ad);border-color:#d7e1e6;box-shadow:inset 0 1px 0 #fff,0 2px 0 #c5d1d8,0 6px 12px #20394b12}
.feature-story h2 button:hover:not(:disabled),.post h3 button:hover:not(:disabled){box-shadow:inset 0 1px 0 #fff,0 4px 0 #c5d1d8,0 10px 16px #20394b1b}
.feature-story h2 button:active:not(:disabled),.post h3 button:active:not(:disabled){box-shadow:inset 0 1px 0 #fff,0 1px 0 #c5d1d8,0 3px 8px #20394b12}
.read-link{align-self:flex-start;border:1px solid #bccbd4;border-radius:9px;padding:10px 15px;background:linear-gradient(180deg,#fff,#e9f0f3);box-shadow:inset 0 1px 0 #fff,0 3px 0 #b1c1cb,0 9px 16px #20394b1c}
.close,#close-preview{min-width:42px;min-height:42px;padding:5px}
.closing a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid #c8d4db;border-radius:9px;background:#f9fbfc;box-shadow:0 3px 0 #bdcbd3,0 8px 13px #20394b17;text-decoration:none}

.contact-link,.enlarge,.bottom-nav a,.essay-nav a,.site-footer .author-actions a,.site-footer [data-copy-domain]{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:1px solid var(--control-edge);border-radius:9px;
  background:linear-gradient(180deg,#fff,#edf3f6);color:var(--control-ink);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--control-depth),0 8px 15px var(--control-shadow);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.contact-link:hover,.enlarge:hover,.bottom-nav a:hover,.essay-nav a:hover,.site-footer .author-actions a:hover,.site-footer [data-copy-domain]:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 5px 0 var(--control-depth),0 13px 18px var(--control-shadow)}
.contact-link:active,.enlarge:active,.bottom-nav a:active,.essay-nav a:active,.site-footer .author-actions a:active,.site-footer [data-copy-domain]:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--control-depth),0 3px 8px var(--control-shadow)}
.contact-link{padding:10px 22px;border-color:#233c55;background:linear-gradient(180deg,#46617b,#263f58);color:#fff;box-shadow:inset 0 1px 0 #ffffff70,0 3px 0 #172d43,0 10px 18px #182d4240}
.enlarge,.bottom-nav a,.essay-nav a{padding:10px 16px}
.site-footer .author-actions a{padding:10px 14px;font-size:14px}
.site-footer [data-copy-domain]{padding:8px 13px}
.site-footer a:hover{text-decoration:none}
.writing-layout .shelf-tabs button,.writing-layout #reload,.writing-layout .block-controls button{font-size:14px}
.writing-layout .shelf-tabs{gap:10px;padding-bottom:17px}
.writing-layout .shelf-item>button,.writing-layout .history-list>button{text-align:left}
.writing-layout .add-tools>button,.writing-layout .file-button{border-style:solid;background:linear-gradient(180deg,#fff,#edf4f0);box-shadow:inset 0 1px 0 #fff,0 3px 0 #aebfb4,0 8px 15px #28403420}
.writing-layout .file-button{display:inline-flex;align-items:center;min-height:44px;cursor:pointer}

@media(max-width:700px){
  .header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px 14px;align-items:center;padding:18px 6%}
  .header .logo{grid-column:1;grid-row:1;min-width:0;white-space:nowrap;font-size:24px}
  .header .write{grid-column:2;grid-row:1;margin:0;white-space:nowrap;padding:8px 12px;font-size:13px}
  .header nav{grid-column:1/-1;grid-row:2;margin:0;min-width:0}
  .feature-photo{border-radius:11px 11px 0 0}
  .header nav button{font-size:14px;white-space:nowrap}
  .filter-row button{min-height:40px;padding:7px 11px}
  .site-footer .author-actions a{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  button,.contact-link,.enlarge,.bottom-nav a,.essay-nav a,.site-footer .author-actions a,.site-footer [data-copy-domain]{transition:none}
}