/* Journal (blog) — shared by ko / en. Loaded after style.css; uses its variables. */

/* list */
.jr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px;}
.jr-card{display:block;color:var(--black);text-decoration:none;background:#fff;border:1px solid var(--line);transition:transform .35s,box-shadow .35s;}
.jr-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(42,33,29,.35);}
.jr-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--ivory);}
.jr-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s;}
.jr-card:hover .jr-card-img img{transform:scale(1.04);}
.jr-card-body{padding:22px 24px 26px;}
.jr-card .cat{display:block;font-family:var(--font-display);font-size:11.5px;letter-spacing:.08em;color:var(--gold-deep);text-transform:uppercase;margin-bottom:10px;}
.jr-card h3{font-size:1.08rem;font-weight:700;line-height:1.45;letter-spacing:-.01em;}
.jr-card p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--muted);}
@media (max-width:960px){.jr-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.jr-grid{grid-template-columns:1fr;gap:20px;}}

/* article */
.jr-article{padding:calc(var(--header-h) + 48px) 0 72px;}
.jr-wrap{max-width:780px;}
.jr-crumb{font-family:var(--font-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.jr-crumb a{color:var(--gold-deep);text-decoration:none;}
.jr-crumb span{margin:0 8px;opacity:.5;}
.jr-article h1{margin-top:18px;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;line-height:1.35;letter-spacing:-.02em;color:var(--black);}
.jr-meta{margin-top:16px;font-size:14px;color:var(--muted);}
.jr-hero{margin:32px 0 0;aspect-ratio:16/9;overflow:hidden;background:var(--ivory);}
.jr-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.jr-tldr{margin-top:36px;padding:24px 28px;background:var(--ivory-light);border-left:3px solid var(--gold);}
.jr-tldr-k{display:block;font-family:var(--font-display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px;font-weight:600;}
.jr-tldr p{font-size:17px;line-height:1.8;color:var(--black);}
.jr-tldr strong,.jr-body strong{color:var(--black);font-weight:700;}
.jr-body h2,.jr-faq h2{margin-top:56px;font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--black);}
.jr-body h3{margin-top:30px;font-size:1.1rem;font-weight:700;color:var(--black);}
.jr-body p{margin-top:14px;font-size:16.5px;line-height:1.9;color:var(--black-soft);}
.jr-body ul,.jr-body ol{margin:14px 0 0;padding-left:1.3em;}
.jr-body ul{list-style:disc;}
.jr-body ol{list-style:decimal;}
.jr-body li{margin-top:8px;font-size:16.5px;line-height:1.8;color:var(--black-soft);}
.jr-body figure{margin:30px 0 0;}
.jr-body figure img{width:100%;display:block;}
.jr-body figcaption{margin-top:10px;font-size:13px;color:var(--muted);}
.jr-body figure img{height:auto;}
.jr-crop{overflow:hidden;}
.jr-body p.jr-note{font-size:14px;color:var(--muted);}
.jr-table-wrap{margin-top:20px;overflow-x:auto;}
.jr-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6;min-width:520px;}
.jr-table th,.jr-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.jr-table thead th{background:var(--black);color:var(--white);font-weight:600;font-size:14px;}
.jr-table tbody th{font-weight:700;color:var(--black);white-space:nowrap;background:var(--ivory-light);}
.jr-table td{color:var(--black-soft);}
.jr-qa{padding:22px 0;border-bottom:1px solid var(--line);}
.jr-faq h2 + .jr-qa{margin-top:18px;border-top:2px solid var(--black);}
.jr-qa h3{font-size:1.05rem;font-weight:700;line-height:1.55;color:var(--black);}
.jr-qa p{margin-top:8px;font-size:16px;line-height:1.85;color:var(--black-soft);}
.jr-author{margin-top:48px;padding:22px 26px;border:1px solid var(--line);font-size:14px;line-height:1.8;color:var(--muted);}
.jr-author strong{display:block;color:var(--black);font-size:15px;margin-bottom:4px;}
.jr-back{margin-top:36px;}
@media (max-width:640px){
  .jr-tldr{padding:20px 20px;}
  .jr-tldr p,.jr-body p,.jr-body li{font-size:16px;}
}