:root {
            --accent: #1F3A2E;
--bg: #ffffff;
      --ink: #111111;
      --muted: #5a5a5a;
      --line: rgba(17,17,17,.16);
      --line-strong: rgba(17,17,17,.34);
      --shadow: 0 18px 50px rgba(0,0,0,.08);
      --radius: 20px;
      --max: 1080px;
      --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Apple SD Gothic Neo", "Noto Serif KR", "Nanum Myeongjo", serif;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      line-height: 1.6;
      letter-spacing: -0.2px;
    }

    a { color: inherit; text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* Layout */
    .wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
    .section { padding: 88px 0; border-top: 1px solid var(--line); }
    .section:first-of-type { border-top: none; }
    .grid2 { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; }
    .grid2.slim { grid-template-columns: 240px 1fr; }
    .side {
      padding-top: 10px;
      position: sticky;
      top: 86px;
      align-self: start;
    }
    .roman {
      font-family: var(--serif);
      font-size: 74px;
      line-height: 1;
      letter-spacing: 1px;
      margin: 0 0 12px 0;
    }
    .side h3 {
      margin: 0;
      font-family: var(--serif);
      font-weight: 600;
      font-size: 30px;
      letter-spacing: 0.2px;
    }
    .side p {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    /* Top nav */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.82);
      border-bottom: 1px solid var(--line);
    }
    .topbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      gap: 14px;
    }
    .brand {
      display: flex; align-items: center; gap: 10px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }
    .brand .mark {
      width: 34px; height: 34px; border-radius: 999px;
      border: 1px solid var(--line-strong);
      display: grid; place-items: center;
      font-family: var(--serif);
      font-weight: 700;
    }
    nav {
      display: flex;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    nav a {
      font-size: 13px;
      color: var(--muted);
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
    }
    nav a:hover {
      border-color: var(--line);
      color: var(--ink);
      text-decoration: none;
    }
    .cta {
      border: 1px solid var(--ink) !important;
      color: var(--ink) !important;
    }

    /* Hero */
    .hero {
      padding: 28px 0 56px;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 26px;
      align-items: center;
    }
    .hero-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: #fff;
    }
    .hero-card img {
      width: 100%;
      height: auto;
      display: block;
    }
    .hero-copy {
      padding: 12px 0;
    }
    .kicker {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      font-size: 13px;
      color: var(--muted);
      border: 1px solid var(--line);
      padding: 8px 12px;
      border-radius: 999px;
    }
    .kicker span.dot {
      width: 4px; height: 4px;
      background: var(--ink);
      border-radius: 999px;
      opacity: .45;
    }
    .hero h1 {
      font-family: var(--serif);
      font-weight: 700;
      font-size: clamp(30px, 3.2vw, 44px);
      letter-spacing: -0.4px;
      line-height: 1.2;
      margin: 16px 0 10px;
    }
    .hero p {
      color: var(--muted);
      margin: 0 0 20px;
      max-width: 52ch;
    }
    .hero-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: #fff;
      font-size: 14px;
      cursor: pointer;
    }
    .btn.primary {
      border-color: var(--ink);
      background: var(--ink);
      color: #fff;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0px); }

    /* Content blocks */
    .frame {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
      background: #fff;
    }
    .frame + .frame { margin-top: 16px; }
    .frame h4 {
      font-family: var(--serif);
      font-size: 22px;
      margin: 0 0 10px;
    }
    .frame p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .split {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: start;
    }
    .split .media {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
      box-shadow: var(--shadow);
    }
    .split .media img { width: 100%; display: block; height: auto; }

    /* Cards / lists */
    .cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 16px;
    }
    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      background: #fff;
    }
    .card h5 {
      margin: 0 0 6px;
      font-size: 16px;
      letter-spacing: -0.2px;
    }
    .card ul {
      margin: 10px 0 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 14px;
    }
    .card li { margin: 6px 0; }

    .books {
      display: grid;
      gap: 14px;
    }
    .book {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      align-items: center;
    }
    .book img {
      width: 120px;
      height: 80px;
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid var(--line);
    }
    .book .meta {
      display: grid;
      gap: 6px;
    }
    .book .title {
      font-weight: 700;
      letter-spacing: -0.2px;
    }
    .book .sub {
      font-size: 13px;
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .book .tags {
      margin-top: 8px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pill {
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      background: #fff;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 12px;
      align-items: stretch;
    }
    .step {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      background: #fff;
      position: relative;
      overflow: hidden;
    }
    .step .no {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 1.6px;
    }
    .step h5 {
      margin: 8px 0 10px;
      font-size: 15px;
    }
    .step p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }
    .step::after {
      content: "";
      position: absolute;
      top: 14px; right: 14px;
      width: 8px; height: 8px;
      border-radius: 999px;
      background: var(--ink);
      opacity: .25;
    }

    /* Footer */
    footer {
      padding: 48px 0 68px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: start;
    }
    .fine {
      font-size: 12px;
      color: rgba(17,17,17,.55);
    }

    /* Responsive */
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; }
      .grid2, .grid2.slim { grid-template-columns: 1fr; }
      .side { position: relative; top: 0; }
      .cards { grid-template-columns: 1fr; }
      .split { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr 1fr; }
      nav { display: none; }
      .mobile-nav {
        display: inline-flex;
        gap: 8px;
        align-items: center;
      }
    }
    @media (max-width: 520px) {
      .section { padding: 64px 0; }
      .roman { font-size: 56px; }
      .steps { grid-template-columns: 1fr; }
      .book { grid-template-columns: 1fr; }
      .book img { width: 100%; height: 160px; }
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .btn:hover { transform: none; }
    }

    /* subtle design additions */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.04), transparent 260px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
      background-size: 100% 100%, 48px 48px, 48px 48px;
      opacity:.18;
      z-index:-1;
    }
    .btn{ transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
    .btn:not(.primary){ background: transparent; color: var(--ink); }
    .btn:not(.primary):hover{ background: rgba(17,17,17,.06); }
    .side h3{ position:relative; display:inline-block; padding-bottom:10px; }
    .side h3::after{
      content:"";
      position:absolute;
      left:0; bottom:0;
      width:46px; height:1px;
      background: var(--line-strong);
    }
    .frame{ background: linear-gradient(#fff, #fff) padding-box,
                      linear-gradient(180deg, rgba(17,17,17,.18), rgba(17,17,17,.06)) border-box;
            border: 1px solid transparent; }
    footer .footer-copy{
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
      text-align:center;
    }
    /* palette update */
    .mark{ border-color: var(--accent) !important; color: var(--accent) !important; }
    nav a.insta{ color: var(--accent); font-weight: 600; }
    nav a.insta:hover{ text-decoration: underline; }
    .cta{ background:#fff; color:#111; border:1px solid #111; }
    .cta:hover{ background:rgba(255,255,255,.85); }

    /* subtle tint blocks to reduce 'too white' feel (uses accent with opacity, no new colors) */
    .section:nth-of-type(even){
      background: rgba(31,58,46,.04);
    }
    .section:nth-of-type(even) .wrap{
      padding-top: 56px;
      padding-bottom: 56px;
    }

    /* footer */
    .site-footer{
      background: var(--ink);
      color: rgba(255,255,255,.86);
      border-top: 1px solid rgba(255,255,255,.12);
      padding: 22px 0;
    }
    .footer-inner{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    .footer-brand{
      font-weight:700;
      letter-spacing:-0.01em;
      color:#fff;
    }
    .footer-copy{
      margin-top:8px;
      font-size:12px;
      color: rgba(255,255,255,.68);
    }
    .footer-links{
      display:flex;
      gap:10px;
      align-items:center;
      font-size:13px;
    }
    .footer-links a{ color:#fff; text-decoration: none; }
    .footer-links a:hover{ text-decoration: underline; }
    .sep{ color: rgba(255,255,255,.42); }

    @media (max-width: 720px){
      .footer-inner{ align-items:flex-start; }
    }

  
.card-grid--three{justify-content:center;}
@media (max-width:900px){.card-grid{grid-template-columns:1fr;}.card-grid .card:nth-child(3){grid-column:auto;}}
}
.card-grid .card:nth-child(3){grid-column:1 / -1;}



/* --- Added (v2) --- */
.brand .mark-img{
  width:34px;height:34px;border-radius:999px;object-fit:cover;
  border:1px solid var(--line-strong);
  display:block;
}
.hero-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55));
}
.hero-logo-img{
  width:min(320px, 70%);
  height:auto;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
}
.card-media{
  width:100%;
  height:160px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.6);
  margin-bottom:14px;
}
.img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);
  letter-spacing:0.08em;
  color:rgba(0,0,0,0.45);
  background:
    radial-gradient(circle at 20% 20%, rgba(174,129,75,0.12), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(28,61,53,0.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
}
.gallery{
  padding:72px 0;
  background:linear-gradient(180deg, transparent, rgba(174,129,75,0.08) 20%, transparent 85%);
}
.gallery h2{ font-family:var(--serif); font-size:28px; margin:0 0 10px; }
.gallery-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}
.gallery-slot{
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.55);
  min-height:180px;
}
.gallery-slot:nth-child(1){ grid-column:span 7; min-height:260px; }
.gallery-slot:nth-child(2){ grid-column:span 5; min-height:260px; }
.gallery-slot:nth-child(3){ grid-column:span 4; }
.gallery-slot:nth-child(4){ grid-column:span 4; }
.gallery-slot:nth-child(5){ grid-column:span 4; }
@media (max-width: 860px){
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-slot{ grid-column:auto !important; min-height:200px !important; }
}