/* =====================================================================
   DESIGN TOKENS
   Primary accent : #2e5090  (deep academic navy)
   Hover/active   : #1e3a6e
   Light tint     : #eef2f9
   ===================================================================== */

/* ── Global ── */
html,
body {
  background: #fff;
}

/* Korean long-form pages: keep the English site identity, but give Korean
   prose a calmer scholarly texture. */
html[lang="ko"] body {
  font-family: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  color: #222;
  word-break: keep-all;
  overflow-wrap: break-word;
}
html[lang="ko"] .header,
html[lang="ko"] .navbar,
html[lang="ko"] .footer {
  font-family: Raleway, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html[lang="ko"] .main-description h1,
html[lang="ko"] .surface-meta,
html[lang="ko"] .button,
html[lang="ko"] table {
  font-family: "Noto Sans KR", Raleway, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}
html[lang="ko"] .container > h3,
html[lang="ko"] .container > h4,
html[lang="ko"] .container > h5,
html[lang="ko"] .container > h6 {
  font-family: "Noto Serif KR", "AppleMyungjo", "Nanum Myeongjo", serif;
  font-weight: 600;
  letter-spacing: 0;
  color: #1f252b;
}
html[lang="ko"] p,
html[lang="ko"] li {
  line-height: 1.85;
}
html[lang="ko"] .container > p:not(.surface-meta),
html[lang="ko"] .container > ul,
html[lang="ko"] .container > ol,
html[lang="ko"] .container > blockquote,
html[lang="ko"] .docs-section p:not(.surface-meta),
html[lang="ko"] .docs-section li {
  font-family: "Noto Serif KR", "AppleMyungjo", "Nanum Myeongjo", serif;
}
html[lang="ko"] .container > p:not(.surface-meta) {
  font-size: 1.58rem;
  line-height: 1.9;
  margin-bottom: 2.2rem;
}
html[lang="ko"] h3 {
  line-height: 1.38;
}
html[lang="ko"] h4,
html[lang="ko"] h5 {
  line-height: 1.45;
}
html[lang="ko"] table {
  font-size: 1.22rem;
  line-height: 1.6;
  word-break: keep-all;
}
html[lang="ko"] th,
html[lang="ko"] td {
  vertical-align: top;
}
html[lang="ko"] .citation-note p {
  font-family: "Noto Sans KR", Raleway, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.12rem;
  line-height: 1.55;
  margin-bottom: 0.45rem;
}
html[lang="ko"] .citation-note p:last-child {
  margin-bottom: 0;
}

h4 {
  letter-spacing: .06rem;
  font-weight: 600;
  color: #1a1a1a;
}
/* Section heading accent line */
.docs-section h4 {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid #2e5090;
  margin-bottom: 2.4rem;
}

.container {
  max-width: 820px;
}

/* ── Header ── */
.header {
  margin-top: 56px;
  margin-bottom: 52px;
  text-align: left;
}

/* Profile photo: circular crop, subtle shadow */
.profile-photo {
  border-radius: 50%;
  width: 110px;
  height: 110px;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0,0,0,0.13);
  display: block;
  margin: 0 auto;
}

.main-description h1 {
  margin-bottom: 2px;
  font-size: 3rem;
  color: #111;
}
.main-description p {
  margin-bottom: 1px;
}
.header-title {
  font-weight: 600;
  font-size: 1.55rem;
  color: #2e5090;
  margin-bottom: 0 !important;
}
.header-affiliation {
  font-size: 1.4rem;
  color: #555;
  margin-bottom: 2px !important;
}
.header-email {
  font-size: 1.3rem;
  color: #777;
  margin-bottom: 4px !important;
}
.header-social a {
  color: #555;
  margin-right: 10px;
  font-size: 1.8rem;
  text-decoration: none;
  transition: color 0.2s;
}
.header-social a:hover {
  color: #2e5090;
}
/* Social brand colors */
.header-social a[aria-label="Facebook"],
.footer-social a[aria-label="Facebook"] { color: #1877F2; }
.header-social a[aria-label="Facebook"]:hover,
.footer-social a[aria-label="Facebook"]:hover { color: #0d5bba; }
.header-social a[aria-label="YouTube"],
.footer-social a[aria-label="YouTube"] { color: #FF0000; }
.header-social a[aria-label="YouTube"]:hover,
.footer-social a[aria-label="YouTube"]:hover { color: #cc0000; }
/* Tistory SVG icon sizing */
.header-social a[aria-label="Tistory"] svg,
.footer-social a[aria-label="Tistory"] svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}

/* ── Paper buttons ── */
.paper {
  margin-bottom: 20px;
}
.paper .title {
  /* no uppercase */
}
.paper p {
  margin-bottom: 2px;
}
.paper-buttons {
  margin-top: 5px;
}
.paper .button {
  display: inline-block;
  height: 25px;
  padding: 0 18px;
  font-weight: 400;
  line-height: 25px;
  text-transform: none;
  font-size: 1.1rem;
  border-color: #2e5090;
  color: #2e5090;
  transition: background 0.18s, color 0.18s;
}
.paper .button:hover {
  background: #2e5090;
  color: #fff;
  border-color: #2e5090;
}

/* ── Section layout ── */
.section-header {
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: .2rem;
  font-weight: 600;
}
.docs-section {
  border-top: 1px solid #e8e8e8;
  padding: 3.8rem 0;
  margin-bottom: 0;
}

/* ── Footer ── */
.footer {
  text-align: center;
  color: rgba(0,0,0,0.4);
  border-top: 1px solid #eee;
  padding: 15px 0 40px 0;
  margin-bottom: 0;
}
.footer-social a {
  color: rgba(0,0,0,0.35);
  margin: 0 5px;
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-social a:hover {
  color: #2e5090;
}

/* ── Navbar ── */
.navbar {
  display: block;
}
.title-subtitle h3 {
  margin-bottom: 0px;
}
.title-subtitle h5 {
  color: rgba(0,0,0,0.60);
}
.image {
  text-align: center;
}

/* ── Research Interests chips ── */
.research-interests-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.4rem;
}
.ri-chip {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  color: #fff;
  letter-spacing: .02rem;
}
.ri-jurisprudence { background: #2e5090; }
.ri-dignity       { background: #6b4fa0; }
.ri-justice       { background: #3a7d44; }
.ri-kant          { background: #b05a1e; }
.ri-expressivism  { background: #1a7a8a; }
.ri-ai            { background: #a03030; }
.ri-education     { background: #1a6690; }
.ri-normativity   { background: #5a6e8a; }

/* ── Public knowledge surfaces ── */
.knowledge-hero {
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7f9fd 0%, #eef4fb 100%);
  padding: 24px 26px;
  margin: 0 0 24px 0;
}
.knowledge-hero h3 {
  margin-bottom: 8px;
  color: #18345f;
}
.knowledge-hero p {
  font-size: 1.45rem;
  line-height: 1.65;
  color: #333;
}
.surface-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 14px;
}
.surface-card {
  border: 1px solid #e4e8ef;
  border-radius: 8px;
  padding: 18px 18px 16px 18px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(30, 58, 110, 0.05);
}
.surface-card h5 {
  margin-bottom: 6px;
  color: #1e3a6e;
}
.surface-card p {
  margin-bottom: 9px;
  color: #444;
}
.surface-meta {
  color: #777;
  font-size: 1.15rem;
  letter-spacing: .02rem;
  text-transform: uppercase;
}
.surface-card .button,
.knowledge-hero .button,
.surface-actions .button {
  display: inline-block;
  height: 28px;
  padding: 0 15px;
  line-height: 28px;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: none;
  border-color: #2e5090;
  color: #2e5090;
}
.surface-card .button:hover,
.knowledge-hero .button:hover,
.surface-actions .button:hover {
  background: #2e5090;
  color: #fff;
}
.surface-note {
  border-left: 3px solid #2e5090;
  background: #f8fafc;
  padding: 10px 14px;
  color: #444;
}
.citation-note {
  border-left-width: 2px;
  background: #fbfcfe;
  padding: 8px 12px;
  margin: 1.2rem 0 2.6rem 0;
}
.surface-list {
  margin-left: 1.7rem;
}
.surface-list li {
  margin-bottom: 7px;
}
.surface-actions {
  margin-top: 12px;
}

/*  ================ Publications – enhanced styling  ================ */

/* paper card */
.paper {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.paper:last-child {
  border-bottom: none;
}

/* year + venue meta line */
.paper-meta {
  font-size: 1.2rem;
  color: #888;
  margin-bottom: 3px;
}
.paper-year {
  font-weight: 600;
  color: #555;
  margin-right: 6px;
}

/* category badge */
.paper-category {
  display: inline-block;
  font-size: 1.0rem;
  font-weight: 600;
  color: #fff;
  background: #8e9eab;
  border-radius: 3px;
  padding: 1px 7px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: .03rem;
}
.paper-category.cat-법이론   { background: #4a90d9; }
.paper-category.cat-인간존엄 { background: #7b68ae; }
.paper-category.cat-정의론   { background: #5aab6b; }
.paper-category.cat-칸트     { background: #c47d3e; }
.paper-category.cat-AI\ 윤리 { background: #c0392b; }
.paper-category.cat-법교육   { background: #2e86ab; }
.paper-category.cat-글쓰기   { background: #2d8a6c; }

/* citation badge */
.paper-cite {
  display: inline-block;
  font-size: 1.0rem;
  color: #888;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}
.paper-cite i { margin-right: 3px; }

/* keyword tags */
.paper-keywords {
  margin-top: 5px;
  margin-bottom: 4px;
}
.kw-tag {
  display: inline-block;
  font-size: 1.0rem;
  color: #555;
  background: #f4f4f4;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  padding: 1px 7px;
  margin: 2px 2px 2px 0;
}

/* abstract toggle */
.abstract-toggle {
  display: inline-block;
  font-size: 1.1rem;
  cursor: pointer;
  color: #2e5090;
  border: none;
  background: none;
  padding: 0;
  margin-top: 4px;
  text-decoration: none;
}
.abstract-toggle:hover { text-decoration: underline; }
.abstract-toggle .arrow { font-size: 0.9rem; margin-left: 2px; }

.abstract-body {
  display: none;
  margin-top: 8px;
  padding: 10px 14px;
  background: #f9f9f9;
  border-left: 3px solid #ddd;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #444;
}
.abstract-body.open { display: block; }

/* publications filter tabs */
.pub-filter-bar {
  margin-bottom: 18px;
}
.pub-filter-bar .filter-btn {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 3px 12px;
  margin: 0 4px 4px 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  color: #555;
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.8;
  height: auto;
}
.pub-filter-bar .filter-btn.active,
.pub-filter-bar .filter-btn:hover {
  color: #fff;
  background: #2e5090;
  border-color: #2e5090;
}

/*  ================ Project styling  ================ */
.project-container {
  margin-bottom: 30px;
}
.project-image-container {
  border: 1px solid rgba(0,0,0,0.2);
  padding: 3px;
  transition: 0.3s;
}
.project-image-container:hover {
  transition: 0.3s;
}
.project-image-container:hover img {
  opacity: 0.4;
}
.project-caption {
  padding: 3px;
}

/* Larger than phone */
@media (min-width: 550px) {
  .header {
    margin-top: 5rem; }
}

/* Larger than tablet */
@media (min-width: 750px) {
  /* Navbar */
  .navbar + .docs-section {
    border-top-width: 0; }
  .navbar,
  .navbar-spacer {
    display: block;
    width: 100%;
    height: 6.5rem;
    background: #fff;
    z-index: 99;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; }
  .navbar-spacer {
    display: none; }
  .navbar > .container {
    width: 100%; }
  .navbar-list {
    list-style: none;
    margin-bottom: 0; }
  .navbar-item {
    position: relative;
    float: left;
    margin-bottom: 0; }
  .navbar-link {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-right: 35px;
    text-decoration: none;
    line-height: 6.5rem;
    color: #222; }
  .navbar-link.active {
    color: #2e5090; }
  .has-docked-nav .navbar {
    position: fixed;
    top: 0;
    left: 0; }
  .has-docked-nav .navbar-spacer {
    display: block; }
  /* Re-overiding the width 100% declaration to match size of % based container */
  .has-docked-nav .navbar > .container {
    width: 80%; }

  /* Popover */
  .popover.open {
    display: block;
  }
  .popover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    top: 92%;
    left: -50%;
    -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
       -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
            filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); }
  .popover-item:first-child .popover-link:after, 
  .popover-item:first-child .popover-link:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  .popover-item:first-child .popover-link:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px; }
  .popover-item:first-child .popover-link:before {
    border-color: rgba(238, 238, 238, 0);
    border-bottom-color: #eee;
    border-width: 11px;
    margin-left: -11px; }
  .popover-list {
    padding: 0;
    margin: 0;
    list-style: none; }
  .popover-item {
    padding: 0;
    margin: 0; }
  .popover-link {
    position: relative;
    color: #222;
    display: block;
    padding: 8px 20px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.0rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .1rem; }
  .popover-item:first-child .popover-link {
    border-radius: 4px 4px 0 0; }
  .popover-item:last-child .popover-link {
    border-radius: 0 0 4px 4px;
    border-bottom-width: 0; }
  .popover-link:hover {
    color: #fff;
    background: #2e5090; }
  .popover-link:hover,
  .popover-item:first-child .popover-link:hover:after {
    border-bottom-color: #2e5090; }
}

@media (min-width: 750px) {
  .surface-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Timeline: military category (centre-right, muted) ── */
.timeline li .direction-m {
  width: 45%;
  float: right;
  clear: right;
}
.timeline li .direction-m .flag {
  background: #8a9db5;
  color: #fff;
}
.timeline li .direction-m .flag:before {
  right: auto;
  left: -15px;
  border-right: 15px solid #8a9db5;
  border-left: 0;
}
.timeline li .direction-m .time-wrapper {
  left: auto;
  right: -60px;
}

/* ── Mobile: stack header vertically below ~550 px ── */
@media (max-width: 549px) {
  .header .three.columns,
  .header .nine.columns {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .profile-photo {
    margin: 0 auto 16px auto;
  }
  .header-social a {
    font-size: 2rem;
    margin-right: 12px;
  }
  .docs-section h4 {
    display: block;
  }
  .research-interests-grid {
    justify-content: center;
  }
}

/* Personal hub: one identity, clear destinations, independent services. */
[hidden] { display: none !important; }
html { scroll-padding-top: 8rem; }
:where(a, button, input, summary):focus-visible { outline: 3px solid #2e5090; outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: -100px; padding: 12px 18px; background: #fff; color: #18345f; z-index: 110; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
.main-description h1 a { color: inherit; text-decoration: none; }
.name-ko { font-size: 1.6rem; color: #5b6574; white-space: nowrap; }
.navbar { position: sticky; top: 0; height: auto; z-index: 99; background: #fff; border-top: 1px solid #e0e5eb; border-bottom: 1px solid #e0e5eb; }
.navbar > .container { width: 100%; padding: 0; }
.navbar-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.navbar-item { float: none; margin: 0; }
.navbar-link { display: block; padding: 14px 5px; margin: 0; min-height: 24px; line-height: 24px; font-size: 1.25rem; letter-spacing: .035em; text-transform: none; font-weight: 600; color: #303c4d; text-decoration: none; }
.navbar-link:hover, .navbar-link[aria-current="page"] { color: #2e5090; text-decoration: underline; text-underline-offset: 6px; }
.navbar .navbar-list, .navbar .navbar-link { font-family: Raleway, "Noto Sans KR", "Helvetica Neue", Arial, sans-serif; }
.navbar-link { white-space: nowrap; }
.start-here { padding: 38px 0 28px; }
.eyebrow { color: #53617a; font-size: 1.2rem; font-weight: 600; letter-spacing: .08em; margin: 0 0 12px; }
.start-here h2 { font-size: 3.4rem; line-height: 1.22; letter-spacing: -.035em; color: #18345f; margin-bottom: 12px; }
.start-intro { color: #4b5564; font-size: 1.6rem; }
.entry-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.entry-paths > a { display: flex; flex-direction: column; border-top: 2px solid #9eafc6; padding: 15px 0; color: #243e66; text-decoration: none; }
.entry-paths > a:hover { border-color: #2e5090; }
.entry-paths > a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.entry-paths strong { font-size: 1.55rem; line-height: 1.6; }
.entry-paths strong span { float: right; }
.entry-paths > a > span { color: #546174; font-size: 1.3rem; margin-top: 6px; }
.quick-workshops { margin: 10px 0 0; padding: 16px 0 0; border-top: 1px solid #e0e5eb; font-size: 1.35rem; }
.quick-workshops a { color: #244779; font-weight: 600; }
.quick-workshops > span { color: #53617a; display: inline-block; margin-left: 5px; }
.footer-destinations { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 1.25rem; padding: 8px 0 18px; }
.footer-destinations a { color: #244779; }
.footer-destinations > span { color: #5b6574; }
.publication-tools label { font-size: 1.35rem; }
#publication-search { width: 100%; min-height: 44px; font-size: 1.4rem; }
#publication-count { color: #53617a; font-size: 1.3rem; margin-bottom: 20px; }
.pub-filter-bar .filter-btn { min-height: 44px; padding: 8px 14px; font-size: 1.3rem; }
.paper-abstract { margin: 10px 0; }
.paper-abstract > summary { display: list-item; width: fit-content; min-height: 24px; padding: 10px 4px; font-size: 1.3rem; }
.paper-abstract[open] .abstract-body { display: block; }
.paper-abstract .abstract-body { font-size: 1.4rem; line-height: 1.75; }
.paper .paper-buttons .button { min-height: 36px; height: auto; line-height: 24px; padding: 5px 12px; font-size: 1.15rem; white-space: normal; }
.teaching-intro { padding: 42px 0 22px; max-width: 640px; }
.teaching-intro h2 { color: #18345f; font-size: 3.7rem; line-height: 1.4; letter-spacing: -.04em; }
.teaching-intro > p:not(.eyebrow) { color: #4b5564; font-size: 1.6rem; line-height: 1.9; }
.teaching-paths { display: grid; grid-template-columns: 1.15fr 1fr; border: 1px solid #d5deeb; }
.teaching-path { padding: 28px; background: #f2f5fa; min-width: 0; }
.course-path { background: #fff; border-left: 1px solid #d5deeb; }
.teaching-path h3 { font-size: 2.3rem; letter-spacing: -.02em; color: #18345f; }
.teaching-path p { font-size: 1.45rem; line-height: 1.85; }
.teaching-path .access-label { font-family: "Noto Sans KR", sans-serif; font-size: 1.2rem; color: #405572; margin-bottom: 12px; }
.destination-link { display: inline-block; min-height: 24px; padding: 10px 0; color: #244779; font-weight: 600; font-family: "Noto Sans KR", sans-serif; }
.teaching-path .destination-host { color: #596778; font-family: sans-serif; font-size: 1.15rem; overflow-wrap: anywhere; margin: 2px 0 0; }
.teaching-resources { padding: 40px 0 12px; }
.teaching-resources > h3 { font-size: 2.2rem; }
.resource-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid #e0e5eb; }
.resource-row h4 { font-size: 1.65rem; margin: 0 0 8px; letter-spacing: 0; }
.resource-row p { margin: 0; font-size: 1.4rem; color: #546174; }
.resource-row > a { flex-shrink: 0; padding: 10px 0; font-size: 1.3rem; color: #244779; }
.resource-row code { white-space: normal; overflow-wrap: anywhere; margin-left: 0; }
.connection-notice { color: #596778; font-size: 1.2rem; flex: 0 0 135px; }
.boundary-note { border-top: 1px solid #e0e5eb; padding-top: 18px; color: #596778; font-size: 1.25rem; }
.timeline { max-width: 100%; }
@media (max-width: 800px) {
  .timeline { padding-top: 0; }
  .timeline:before { display: none; }
  .timeline li { border-left: 2px solid #d5deeb; padding: 14px 0 14px 18px; }
  .timeline li .direction-l, .timeline li .direction-r, .timeline li .direction-m { float: none; width: 100%; text-align: left; }
  .timeline .flag-wrapper { text-align: left; }
  .timeline .flag { display: inline-block; box-sizing: border-box; max-width: 100%; }
  .timeline .flag:before, .timeline .flag:after { display: none; }
  .timeline li .time-wrapper { position: static; float: none; display: block; margin-top: 8px; }
  .timeline .desc { margin-left: 0; }
}
html[lang="ko"] main > h3, html[lang="ko"] main > h4 { font-weight: 600; letter-spacing: 0; }
html[lang="ko"] main > p:not(.surface-meta) { font-size: 1.58rem; line-height: 1.9; }
@media (max-width: 749px) {
  html { scroll-padding-top: 11rem; }
  .navbar-item { width: 33.333%; text-align: center; }
  .navbar-link { padding: 10px 2px; font-size: 1.2rem; letter-spacing: 0; }
  .entry-paths { grid-template-columns: 1fr; gap: 0; }
  .entry-paths > a { padding: 12px 0; border-top-width: 1px; }
  .entry-paths > a > span { margin-top: 2px; }
  .start-here h2 { font-size: 2.9rem; }
  .teaching-paths { grid-template-columns: 1fr; }
  .course-path { border-left: 0; border-top: 1px solid #d5deeb; }
  .resource-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .connection-notice { flex-basis: auto; }
}
@media (max-width: 549px) {
  .header { margin: 24px 0; }
  .header .row { display: flex; align-items: center; gap: 18px; }
  .header .three.columns { width: 74px; flex-shrink: 0; }
  .header .nine.columns { flex: 1; min-width: 0; text-align: left; }
  .profile-photo { width: 74px; height: 74px; margin: 0; }
  .main-description h1 { font-size: 2.3rem; }
  .name-ko { display: block; font-size: 1.3rem; margin: 3px 0 5px; }
  .header-title, .header-affiliation { font-size: 1.2rem; line-height: 1.6; }
  .header-email { font-size: 1.15rem; overflow-wrap: anywhere; }
  .header-social { display: flex; flex-wrap: wrap; }
  .header-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: 0 4px 0 0; font-size: 1.8rem; }
  .start-here { padding-top: 28px; }
  .start-intro { font-size: 1.45rem; }
  .quick-workshops > span { margin-left: 0; }
  .teaching-intro { padding-top: 28px; }
  .teaching-intro h2 { font-size: 3.1rem; }
  .teaching-path { padding: 24px; }
}