:root { color-scheme: dark; --ink:#f5f7ff; --muted:#a6afc3; --line:rgba(255,255,255,.12); --navy:#070a15; --panel:#10172c; --violet:#9a7cff; --cyan:#65dcff; font-family:"Paperlogy",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 86% 6%,rgba(111,76,230,.22),transparent 28rem),linear-gradient(180deg,#080c1b,#08101e 54%,#070a14); }
body::after { position:fixed; inset:0; z-index:-1; content:""; opacity:.14; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
img { display:block; width:100%; height:auto; }
a { color:inherit; }
b,strong { font-weight:700; }
.section-shell { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.mag-header { position:sticky; top:12px; z-index:20; width:min(1240px,calc(100% - 32px)); height:66px; margin:12px auto 0; padding:0 14px 0 17px; border:1px solid rgba(255,255,255,.1); border-radius:18px; display:flex; align-items:center; justify-content:space-between; background:rgba(7,11,24,.78); box-shadow:0 16px 50px rgba(0,0,0,.25); backdrop-filter:blur(22px); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand-mark { width:38px; height:38px; border:1px solid rgba(255,255,255,.5); border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.035)); font-weight:700; }
.brand b,.brand small { display:block; letter-spacing:.12em; }
.brand b { font-size:12.5px; }
.brand small { margin-top:3px; color:#99a4bb; font-size:10.5px; }
.mag-header nav { display:flex; gap:28px; }
.mag-header nav a { color:#aab3c8; font-size:11.5px; font-weight:700; text-decoration:none; }
.back-button { min-height:40px; padding:0 15px; border-radius:12px; display:inline-flex; align-items:center; gap:8px; color:#07101f; background:linear-gradient(120deg,#f7f4ff,#a8ecff); font-size:11px; font-weight:700; text-decoration:none; }
.hero { min-height:650px; padding:68px 0 76px; display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; gap:54px; }
.edition,.kicker { color:#c0b3ff; font-size:10.5px; font-weight:700; letter-spacing:.16em; }
.hero h1 { margin:18px 0 24px; font-size:clamp(44px,5.4vw,72px); line-height:1.05; letter-spacing:-.055em; }
.hero h1 em { color:transparent; background:linear-gradient(98deg,#fff,#b7a7ff 54%,#78e0ff); background-clip:text; font-style:normal; }
.lead { color:#b5bdd0; font-size:15px; line-height:1.9; word-break:keep-all; }
.meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:27px; }
.meta span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:#8f9bb3; background:rgba(255,255,255,.025); font-size:10.5px; }
.hero figure,.story-image,.wide-image,.guide figure { margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:#11182d; box-shadow:0 28px 70px rgba(0,0,0,.33); }
.hero figure img,.story-image img,.wide-image img,.guide figure img { aspect-ratio:16/10; object-fit:cover; }
figcaption { padding:10px 14px; color:#7f8aa1; background:rgba(6,9,19,.92); font-size:10.5px; line-height:1.55; }
.fact-strip { margin-bottom:86px; padding:22px 0; border-block:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.fact-strip div { padding:0 25px; }
.fact-strip div+div { border-left:1px solid var(--line); }
.fact-strip b,.fact-strip span { display:block; }
.fact-strip b { font-size:22px; letter-spacing:-.03em; }
.fact-strip span { margin-top:7px; color:#8995ad; font-size:10.5px; line-height:1.55; }
.story { padding:76px 0; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:52px; border-top:1px solid var(--line); }
.story-copy h2,.section-title h2 { margin:11px 0 20px; font-size:clamp(28px,3.4vw,43px); line-height:1.18; letter-spacing:-.045em; }
.story-copy>p:not(.kicker) { color:#aeb8cc; font-size:13.5px; line-height:1.9; word-break:keep-all; }
.source-note { margin-top:22px; padding:16px 18px; border-left:2px solid var(--cyan); background:rgba(89,204,246,.055); }
.source-note b,.source-note span { display:block; }
.source-note b { font-size:11.5px; }
.source-note span { margin-top:5px; color:#8e9ab2; font-size:10.5px; line-height:1.6; }
.timeline,.trend,.guide,.size-guide,.sources { padding:82px 0; border-top:1px solid var(--line); }
.section-title { margin-bottom:30px; }
.section-title.wide { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.section-title.wide>p { max-width:430px; margin:0 0 20px; color:#98a4ba; font-size:12.5px; line-height:1.7; word-break:keep-all; }
.timeline ol { margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); list-style:none; }
.timeline li { min-height:188px; padding:22px; border:1px solid var(--line); background:rgba(255,255,255,.022); }
.timeline li+li { border-left:0; }
.timeline time { color:#a995ff; font-size:11px; font-weight:700; letter-spacing:.12em; }
.timeline b { display:block; margin-top:31px; font-size:13px; line-height:1.45; }
.timeline p { margin:8px 0 0; color:#909bb2; font-size:10.5px; line-height:1.65; word-break:keep-all; }
.trend-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.trend-grid article { min-height:214px; padding:25px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.025); }
.trend-grid article>span { color:#a995ff; font-size:10.5px; font-weight:700; }
.trend-grid h3 { margin:19px 0 10px; font-size:17px; }
.trend-grid p { margin:0; color:#9ca7bd; font-size:12.5px; line-height:1.8; word-break:keep-all; }
.wide-image { margin-top:22px; }
.guide-layout { display:grid; grid-template-columns:.8fr 1.2fr; align-items:start; gap:28px; }
.guide figure { position:sticky; top:98px; }
.checklists { display:grid; gap:11px; }
.checklists section { padding:22px 24px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.checklists h3 { margin:0 0 13px; font-size:15px; }
.checklists ul { margin:0; padding-left:18px; color:#9eabc0; font-size:11.5px; line-height:1.8; }
.checklists li+li { margin-top:4px; }
.size-table { overflow:hidden; border:1px solid var(--line); border-radius:16px; }
.size-row { min-height:58px; padding:0 20px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr 1.5fr; align-items:center; gap:14px; color:#abb5c9; font-size:11.5px; }
.size-row.head { border-top:0; color:#7f8ba4; background:rgba(255,255,255,.035); font-size:10.5px; font-weight:700; letter-spacing:.07em; }
.size-row b { color:#edf2ff; }
.caution { margin:13px 0 0; color:#7f8ba2; font-size:10.5px; line-height:1.7; }
.sources ol { margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; list-style:none; }
.sources li { padding:16px 18px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.02); }
.sources a,.sources span { display:block; }
.sources a { color:#dce6f9; font-size:11.5px; font-weight:700; text-decoration:none; }
.sources a:hover { color:#82e4ff; }
.sources span { margin-top:6px; color:#7f8aa1; font-size:10.5px; }
.review-date { margin:18px 0 0; color:#758198; font-size:10.5px; }
.mag-footer { min-height:110px; padding:28px 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; color:#808aa0; font-size:10.5px; }
.mag-footer>span { font-weight:700; letter-spacing:.12em; }
.mag-footer div { display:flex; gap:18px; }
.mag-footer a { color:#919cb2; text-decoration:none; }
@media (max-width:900px) { .mag-header nav{display:none}.hero{grid-template-columns:1fr;gap:30px;min-height:0}.hero-copy{text-align:center}.meta{justify-content:center}.story{grid-template-columns:1fr}.timeline ol{grid-template-columns:repeat(2,1fr)}.timeline li:nth-child(3){border-left:1px solid var(--line)}.timeline li:nth-child(n+3){border-top:0}.guide-layout{grid-template-columns:1fr}.guide figure{position:static}.section-title.wide{display:block}.section-title.wide>p{margin-top:10px}.sources ol{grid-template-columns:1fr} }
@media (max-width:620px) { .section-shell{width:min(100% - 28px,540px)}.mag-header{top:8px;width:calc(100% - 16px);height:62px;margin-top:8px;padding-inline:12px}.brand b{font-size:11px}.brand small{font-size:10.5px}.back-button{min-height:37px;padding-inline:12px}.hero{padding:42px 0 52px}.hero h1{font-size:clamp(38px,12vw,52px)}.lead{font-size:13.5px}.fact-strip{margin-bottom:50px;padding:16px 0}.fact-strip div{padding:0 10px}.fact-strip b{font-size:17px}.fact-strip span{font-size:10.5px}.story,.timeline,.trend,.guide,.size-guide,.sources{padding:52px 0}.story{gap:28px}.timeline ol{grid-template-columns:1fr}.timeline li+li{border-left:1px solid var(--line);border-top:0}.trend-grid{grid-template-columns:1fr}.trend-grid article{min-height:0;padding:21px}.size-table{overflow-x:auto}.size-row{min-width:650px}.mag-footer{min-height:0;padding:24px 0;align-items:flex-start;flex-direction:column}.mag-footer div{flex-wrap:wrap} }
@media (max-width:380px) { .brand>span:last-child{display:none}.brand{gap:0} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }


/* POCA Magazine mobile editorial system — Paperlogy 10.5px minimum / weight 200–700 */
:root {
  --font-min:10.5px;
  --weight-light:200;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
}
body { font-weight:var(--weight-regular); }
.types,.design-note,.mag-faq { padding:82px 0; border-top:1px solid var(--line); }
.types-layout,.design-layout { display:grid; grid-template-columns:.92fr 1.08fr; align-items:start; gap:28px; }
.types figure,.design-layout figure { margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:#11182d; box-shadow:0 28px 70px rgba(0,0,0,.28); }
.types figure img,.design-layout figure img { aspect-ratio:16/10; object-fit:cover; }
.type-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.type-grid article,.design-copy section { padding:22px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.type-grid article>span,.design-copy section>span { color:#a995ff; font-size:var(--font-min); font-weight:var(--weight-bold); letter-spacing:.1em; }
.type-grid h3,.design-copy h3 { margin:13px 0 8px; font-size:15px; line-height:1.4; }
.type-grid p,.design-copy p { margin:0; color:#9eabc0; font-size:11.5px; line-height:1.75; word-break:keep-all; }
.term-row { margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.term-row div { padding:15px 17px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.018); }
.term-row b,.term-row span { display:block; }
.term-row b { font-size:11.5px; }
.term-row span { margin-top:5px; color:#8591a9; font-size:var(--font-min); line-height:1.55; }
.design-copy { display:grid; gap:11px; }
.design-copy .source-note { margin-top:0; }
.mag-faq details { margin-top:9px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.022); }
.mag-faq summary { padding:18px 20px; cursor:pointer; font-size:12.5px; font-weight:var(--weight-bold); line-height:1.45; }
.mag-faq details p { margin:0; padding:0 20px 19px; color:#9eabc0; font-size:11.5px; line-height:1.75; word-break:keep-all; }
.mag-faq summary::marker { color:#a995ff; }

@media (max-width:900px) {
  .types-layout,.design-layout { grid-template-columns:1fr; }
  .types figure,.design-layout figure { max-width:760px; }
}

@media (max-width:620px) {
  .section-shell { width:calc(100% - 32px); }
  .mag-header { border-radius:15px; }
  .brand-mark { width:36px; height:36px; }
  .back-button { font-size:var(--font-min); }
  .hero { padding:30px 0 46px; gap:24px; }
  .hero-copy { text-align:left; }
  .hero h1 { margin:14px 0 18px; font-size:clamp(36px,11vw,47px); line-height:1.08; }
  .lead { font-size:14.5px; line-height:1.75; }
  .meta { justify-content:flex-start; margin-top:20px; gap:6px; }
  .meta span { padding:6px 8px; }
  .hero figure,.story-image,.wide-image,.guide figure,.types figure,.design-layout figure { border-radius:17px; }
  figcaption { padding:9px 11px; font-size:var(--font-min); }
  .fact-strip { margin-bottom:42px; padding:0; grid-template-columns:1fr; border:1px solid var(--line); border-radius:15px; overflow:hidden; }
  .fact-strip div { min-height:68px; padding:13px 16px; display:grid; grid-template-columns:108px 1fr; align-items:center; gap:12px; }
  .fact-strip div+div { border-left:0; border-top:1px solid var(--line); }
  .fact-strip b { font-size:17px; }
  .fact-strip span { margin-top:0; font-size:11.5px; }
  .story,.timeline,.types,.trend,.design-note,.guide,.size-guide,.mag-faq,.sources { padding:46px 0; }
  .story-copy h2,.section-title h2 { margin:9px 0 16px; font-size:clamp(27px,8vw,34px); line-height:1.22; }
  .story-copy>p:not(.kicker) { font-size:14px; line-height:1.82; }
  .source-note { margin-top:17px; padding:14px 15px; }
  .source-note b { font-size:12px; }
  .source-note span { font-size:11.5px; }
  .timeline li { min-height:0; padding:18px; border-radius:0; }
  .timeline b { margin-top:13px; font-size:14px; }
  .timeline p { font-size:12px; line-height:1.72; }
  .section-title { margin-bottom:23px; }
  .section-title.wide>p { max-width:none; margin:7px 0 0; font-size:13px; line-height:1.72; }
  .type-grid { grid-template-columns:1fr; }
  .type-grid article,.design-copy section { padding:18px; }
  .type-grid h3,.design-copy h3 { font-size:15.5px; }
  .type-grid p,.design-copy p { font-size:13px; line-height:1.72; }
  .term-row { grid-template-columns:1fr; }
  .term-row div { padding:13px 15px; }
  .term-row b { font-size:12.5px; }
  .term-row span { font-size:11.5px; }
  .trend-grid article { padding:18px; border-radius:15px; }
  .trend-grid h3 { margin:12px 0 8px; font-size:16px; }
  .trend-grid p { font-size:13px; line-height:1.74; }
  .wide-image { margin-top:16px; }
  .guide-layout { gap:18px; }
  .checklists section { padding:18px; }
  .checklists h3 { font-size:15px; }
  .checklists ul { padding-left:17px; font-size:12.5px; line-height:1.75; }
  .size-table { border:0; border-radius:0; overflow:visible; display:grid; gap:9px; }
  .size-row { min-width:0; min-height:0; padding:16px; border:1px solid var(--line); border-radius:14px; grid-template-columns:1fr 1fr; gap:7px 12px; font-size:12.5px; background:rgba(255,255,255,.022); }
  .size-row.head { display:none; }
  .size-row b { grid-column:1/-1; margin-bottom:4px; font-size:14px; }
  .size-row span { display:grid; gap:3px; }
  .size-row span:nth-of-type(1)::before { content:"완성 크기"; }
  .size-row span:nth-of-type(2)::before { content:"300 PPI 기준"; }
  .size-row span:nth-of-type(3) { grid-column:1/-1; margin-top:5px; color:#8e9ab2; }
  .size-row span:nth-of-type(3)::before { content:"사용 메모"; }
  .size-row span::before { color:#78849c; font-size:var(--font-min); font-weight:var(--weight-bold); }
  .caution { margin-top:12px; font-size:11.5px; }
  .mag-faq summary { padding:16px; font-size:13px; }
  .mag-faq details p { padding:0 16px 16px; font-size:12.5px; }
  .sources li { padding:14px 15px; }
  .sources a { font-size:12px; line-height:1.55; }
  .sources span { font-size:11px; line-height:1.55; }
  .review-date { font-size:var(--font-min); line-height:1.6; }
  .mag-footer { font-size:11px; }
}

@media (max-width:380px) {
  .fact-strip div { grid-template-columns:96px 1fr; }
  .back-button { padding-inline:10px; }
}

/* Mobile FAQ: keep long Korean headings together and prevent orphan syllables. */
.mag-faq .section-title h2 { overflow-wrap:normal; word-break:keep-all; text-wrap:balance; }
.mag-faq summary { word-break:keep-all; overflow-wrap:break-word; }
@media (max-width:620px) {
  .mag-faq .section-title h2 { font-size:clamp(23px,6.4vw,29px); line-height:1.32; letter-spacing:-.055em; }
  .mag-faq details { margin-top:10px; }
  .mag-faq summary { padding:17px 18px; font-size:clamp(12px,3.3vw,14px); line-height:1.55; }
  .mag-faq,.sources { padding-block:40px; }
  .mag-faq .section-title { margin-bottom:20px; }
}

/* Consistent Korean heading wrapping across the entire magazine on mobile. */
.story-copy h2, .section-title h2, .hero h1, .type-grid h3, .trend-grid h3, .design-copy h3, .checklists h3 {
  word-break:keep-all;
  overflow-wrap:normal;
  text-wrap:balance;
}
@media (max-width:620px) {
  .story-copy h2, .section-title h2, .mag-faq .section-title h2 {
    font-size:clamp(23px,6.1vw,29px);
    line-height:1.36;
    letter-spacing:-.045em;
    word-break:keep-all;
    overflow-wrap:normal;
    text-wrap:balance;
  }
  .hero h1 { word-break:keep-all; text-wrap:balance; }
}


/* Timeline editorial image and explicit FAQ open/close controls. */
.timeline-image {
  margin:0 0 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:#11182d;
  box-shadow:0 22px 58px rgba(0,0,0,.28);
}
.timeline-image img { aspect-ratio:16/10; object-fit:cover; }
.mag-faq .title-line { display:inline; }
.mag-faq summary {
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  transition:color .18s ease,background-color .18s ease;
}
.mag-faq summary::-webkit-details-marker { display:none; }
.mag-faq summary:hover,.mag-faq details[open] summary { color:#f7f5ff; background:rgba(154,124,255,.045); }
.faq-question { min-width:0; }
.faq-toggle {
  min-width:68px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  color:#ae9aff;
  font-size:var(--font-min);
  font-weight:var(--weight-bold);
  white-space:nowrap;
}
.faq-toggle i {
  position:relative;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border:1px solid rgba(169,149,255,.46);
  border-radius:50%;
  background:rgba(154,124,255,.08);
}
.faq-toggle i::before,.faq-toggle i::after {
  position:absolute;
  top:50%;
  left:50%;
  width:9px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  content:"";
  transform:translate(-50%,-50%);
  transition:opacity .18s ease,transform .18s ease;
}
.faq-toggle i::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq-close-label { display:none; }
.mag-faq details[open] .faq-open-label { display:none; }
.mag-faq details[open] .faq-close-label { display:inline; }
.mag-faq details[open] .faq-toggle i::after { opacity:0; transform:translate(-50%,-50%) rotate(0); }
.mag-faq details p { border-top:1px solid rgba(255,255,255,.07); padding-top:16px; }

@media (max-width:620px) {
  .timeline-image { margin-bottom:12px; border-radius:16px; }
  .mag-faq .title-line { display:block; }
  .mag-faq .section-title h2 { font-size:clamp(22px,6vw,28px); line-height:1.28; }
  .mag-faq summary { gap:10px; }
  .faq-toggle { min-width:62px; gap:6px; }
  .faq-toggle i { width:22px; height:22px; flex-basis:22px; }
}
@media (max-width:360px) {
  .faq-open-label,.faq-close-label { display:none !important; }
  .faq-toggle { min-width:24px; }
}