/* =====================================================================
샵오브코리아 리뷰 매거진 — 「큐레이터의 기준」(낙관·닥지 그늘 이식본)
.mag- scope only · 신규폰트 0 · 외부자산 0 · 모바일 우선 · 전역 * 미사용
v3 (2026-06-27): 3균일탭 네비 · PC 스케일 축소 · AI 고지문
===================================================================== */
.mag-root{
--paper:#f1ede6; /* 한지 그레이지 */
--porcelain:#faf8f4; /* 백자 면 */
--dak:#e7ddc6; /* 닥지 그늘 */
--ink:#221d1c; /* 먹 */
--crimson:#b82647; /* 주묵 = 유일 잉크 */
--crimson-deep:#9e1f3c;
--crimson-soft:#c98a93;
--ash:#8a817b; /* 재 */
--line:rgba(184,38,71,.18);
--line-soft:rgba(34,29,28,.10);
--wash:rgba(184,38,71,.06);
--shadow:0 14px 30px -18px rgba(34,29,28,.45);
--radius:14px;
--radius-sm:9px;
--maxw:1180px;
--measure:38em;
--gap:clamp(14px,1.8vw,22px);
background:var(--paper);
color:var(--ink);
font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
line-height:1.65;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.mag-root *{box-sizing:border-box;}
.mag-root img{display:block;max-width:100%;}
.mag-root a{color:inherit;text-decoration:none;}
.mag-root ul{margin:0;padding:0;list-style:none;}
.mag-wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px) 84px;}
/* ---------- Focus & motion ---------- */
.mag-root a:focus-visible,
.mag-root button:focus-visible,
.mag-root label:focus-visible{
outline:2px solid var(--crimson);
outline-offset:3px;
border-radius:5px;
}
@media (prefers-reduced-motion:reduce){
.mag-root *{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
.mag-card:hover,.mag-prod:hover{transform:none;}
}
/* ---------- 낙관 인장 (시그니처) ---------- */
.mag-seal{color:var(--crimson);flex:0 0 auto;}
.mag-seal svg{display:block;}
/* ---------- Sticky nav (3 균일 탭) ---------- */
.mag-nav{
--crimson:#b82647;--crimson-deep:#9e1f3c;--ash:#8a817b;
--line:rgba(184,38,71,.18);--line-soft:rgba(34,29,28,.10);--wash:rgba(184,38,71,.06);
--porcelain:#faf8f4;--ink:#221d1c;--maxw:1180px;
font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
position:sticky;top:0;z-index:40;
background:rgba(241,237,230,.94);
-webkit-backdrop-filter:saturate(150%) blur(8px);
backdrop-filter:saturate(150%) blur(8px);
border-bottom:1px solid var(--line);
}
/* 저사양/blur 미지원 폴백 — 불투명도 상향 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.mag-nav{background:rgba(241,237,230,.98);}
}
.mag-nav__tabs{
max-width:var(--maxw);margin:0 auto;padding:0;list-style:none;
display:grid;grid-template-columns:repeat(3,1fr);
}
.mag-nav__tabs li{list-style:none;margin:0;padding:0;}
.mag-nav__tab{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
text-align:center;text-decoration:none;min-height:52px;padding:8px 8px;
font-weight:700;color:var(--ink);
border-bottom:2px solid transparent;border-right:1px solid var(--line-soft);
transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.mag-nav__tab:last-child{border-right:0;}
.mag-nav__label{font-size:clamp(12px,2.5vw,14px);letter-spacing:-.01em;line-height:1.25;}
.mag-nav__count{font-size:clamp(10.5px,2vw,11.5px);font-weight:700;color:var(--ash);letter-spacing:.02em;}
.mag-nav__tab:hover{background:var(--wash);}
.mag-nav__tab.is-active{color:var(--crimson);background:var(--wash);border-bottom-color:var(--crimson);}
.mag-nav__tab.is-active .mag-nav__count{color:var(--crimson);}
/* ---------- AI 작성 고지 (모든 글/목록 상단) ---------- */
.mag-notice{
display:flex;gap:11px;align-items:flex-start;
background:var(--porcelain);border:1px solid var(--line-soft);
border-left:3px solid var(--crimson);border-radius:var(--radius-sm);
padding:12px 15px;margin:16px 0 0;
}
.mag-notice__badge{
flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;
color:#fff;background:var(--crimson);border-radius:5px;padding:3px 7px;margin-top:1px;
}
.mag-notice__text{margin:0;font-size:12.5px;line-height:1.65;color:var(--ash);}
.mag-notice__text strong{color:var(--crimson-deep);font-weight:700;}
@media (min-width:760px){.mag-notice__text{font-size:13px;}}
/* ---------- Masthead ---------- */
.mag-masthead{padding:clamp(16px,2.2vw,24px) 0 4px;}
.mag-masthead__kicker{
display:inline-flex;align-items:center;gap:8px;
font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--crimson);
margin:0 0 10px;
}
.mag-masthead__kicker::before{content:"";width:22px;height:3px;background:var(--crimson);border-radius:2px;}
.mag-masthead__title{
font-size:clamp(19px,2.2vw,24px);font-weight:800;
letter-spacing:-.025em;line-height:1.2;margin:0 0 8px;
}
.mag-masthead__lede{
font-size:clamp(13px,1.2vw,14.5px);color:var(--ash);
line-height:1.65;max-width:58ch;margin:0;
}
/* ---------- 표지 기사 (이미지 우선 + 닥지 패널 + 낙관 + 크림슨 띠지) ---------- */
.mag-cover{
margin:clamp(14px,2vw,22px) 0 clamp(22px,3vw,34px);
background:var(--dak);
border:1px solid var(--line-soft);
border-top:3px solid var(--crimson); /* 크림슨 띠지 */
border-radius:var(--radius);
overflow:hidden;
}
.mag-cover__media{display:block;background:#e7e1d8;overflow:hidden;}
.mag-cover__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease;}
.mag-cover:hover .mag-cover__media img{transform:scale(1.02);}
.mag-cover__body{
background:var(--porcelain);
margin:-22px 14px 0; /* 닥지 위로 백자 패널 떠오름 */
padding:20px 18px 22px;
border-radius:var(--radius);
position:relative;
}
.mag-cover__eyebrow{
display:flex;align-items:center;gap:8px;
margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--crimson);
}
.mag-cover__title{
margin:0 0 10px;
font-size:clamp(1.35rem,2.9vw,2rem);
font-weight:800;line-height:1.16;letter-spacing:-.03em;color:var(--ink);
text-wrap:balance;
}
.mag-cover__title a{transition:color .18s ease;}
.mag-cover__title a:hover{color:var(--crimson-deep);}
.mag-cover__summary{
margin:0 0 14px;max-width:50ch;
font-size:clamp(.88rem,1.2vw,.96rem);line-height:1.72;color:#3f3936;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mag-cover__foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.mag-cover__read{
font-size:13px;font-weight:700;color:var(--crimson);
display:inline-flex;align-items:center;gap:6px;
border-bottom:1.5px solid transparent;padding-bottom:1px;
transition:gap .15s ease,border-color .15s ease;
}
.mag-cover__read:hover{gap:9px;border-bottom-color:var(--crimson);}
@media (min-width:860px){
.mag-cover{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);}
.mag-cover__media{order:2;height:100%;}
.mag-cover__media img{aspect-ratio:auto;height:100%;min-height:220px;max-height:300px;}
.mag-cover__body{order:1;margin:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2.2vw,32px);}
}
/* ---------- 키워드 칩 ---------- */
.mag-keys{display:flex;flex-wrap:wrap;gap:6px;}
.mag-key{
display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.01em;
color:var(--crimson);background:var(--wash);
border:1px solid var(--line);border-radius:100px;padding:4px 10px;line-height:1.4;
}
/* ---------- Section heads ---------- */
.mag-sec{margin:clamp(20px,3vw,34px) 0 0;}
.mag-sec__head{
display:flex;align-items:baseline;justify-content:space-between;
gap:16px;padding-bottom:12px;
border-bottom:2px solid var(--ink);margin-bottom:var(--gap);
}
.mag-sec__title{font-size:clamp(16px,1.8vw,20px);font-weight:800;letter-spacing:-.02em;}
.mag-sec__note{font-size:12.5px;color:var(--ash);white-space:nowrap;}
/* ---------- 매거진 그리드 (비대칭) ---------- */
.mag-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);}
@media (min-width:600px){.mag-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:980px){
.mag-grid{grid-template-columns:repeat(3,1fr);}
.mag-card--wide{grid-column:span 2;}
}
.mag-card{
display:flex;flex-direction:column;overflow:hidden;
background:var(--porcelain);border:1px solid var(--line-soft);
border-radius:var(--radius);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.mag-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line);}
.mag-card__media{aspect-ratio:4/3;overflow:hidden;background:#e7e1d8;}
@media (min-width:980px){.mag-card__media{aspect-ratio:16/10;}.mag-card--wide .mag-card__media{aspect-ratio:16/9;}}
.mag-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.mag-card:hover .mag-card__media img{transform:scale(1.03);}
.mag-card__body{display:flex;flex-direction:column;flex:1;padding:14px 15px 16px;}
.mag-card__title{
font-size:clamp(15px,1.4vw,17px);font-weight:700;
letter-spacing:-.02em;line-height:1.34;margin:2px 0 7px;color:var(--ink);
transition:color .18s ease;
}
@media (min-width:980px){.mag-card--wide .mag-card__title{font-size:clamp(18px,1.9vw,22px);}}
.mag-card:hover .mag-card__title{color:var(--crimson-deep);}
.mag-card__summary{
font-size:13px;color:#4a4340;line-height:1.65;margin:0 0 12px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mag-card .mag-keys{margin-top:auto;}
/* ---------- 하단 리스팅 = 안목의 색인 ---------- */
.mag-list{margin-top:6px;}
.mag-row{
display:grid;
grid-template-columns:64px 1fr;
grid-template-areas:"axis axis" "media main" "date date";
gap:6px 14px;align-items:start;
padding:16px 2px;border-bottom:1px solid var(--line-soft);
transition:background .14s ease;
}
.mag-row:first-child{border-top:1px solid var(--line-soft);}
.mag-row:hover{background:var(--wash);}
.mag-row__axis{ /* ash 톤으로 가라앉힌 색인어 (데이터 의존 리스크 완화) */
grid-area:axis;display:flex;align-items:center;gap:7px;min-width:0;
font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ash);
}
.mag-row__axis .mag-row__tick{width:3px;height:13px;flex:none;background:var(--crimson);border-radius:2px;}
.mag-row__axis span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mag-row__media{
grid-area:media;width:64px;height:64px;flex:none;
overflow:hidden;border-radius:var(--radius-sm);background:#e7e1d8;
}
.mag-row__media img{width:100%;height:100%;object-fit:cover;}
.mag-row__main{grid-area:main;min-width:0;}
.mag-row__title{
display:block;font-size:15.5px;font-weight:700;
letter-spacing:-.01em;line-height:1.4;margin-bottom:4px;color:var(--ink);
transition:color .18s ease;
}
.mag-row:hover .mag-row__title{color:var(--crimson-deep);}
.mag-row__summary{
font-size:13px;color:var(--ash);margin-bottom:8px;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.mag-row__date{grid-area:date;font-size:12px;color:var(--ash);letter-spacing:.02em;white-space:nowrap;}
@media (min-width:760px){
.mag-row{
grid-template-columns:clamp(120px,15vw,160px) 72px 1fr auto;
grid-template-areas:"axis media main date";
align-items:center;gap:18px;padding:15px 2px;
}
.mag-row__axis{min-width:0;} /* 긴 라벨 ellipsis 폴백 보장 */
.mag-row__media{width:72px;height:72px;}
.mag-row__title{font-size:16px;}
.mag-row__summary{font-size:13px;}
}
/* ---------- 더보기 (서버 페이지네이션 링크 · JS 0) ---------- */
.mag-more{text-align:center;margin:28px 0 6px;}
.mag-more__link{
display:inline-flex;align-items:center;gap:9px;
font-size:14px;font-weight:700;color:var(--crimson);
border:1.5px solid var(--crimson);border-radius:100px;padding:11px 26px;
transition:background .2s ease,color .2s ease;
}
.mag-more__link:hover{background:var(--crimson);color:#fff;}
/* =====================================================================
상세 읽기 페이지
===================================================================== */
.mag-article{max-width:760px;margin:0 auto;padding:clamp(20px,3vw,40px) clamp(16px,4vw,28px) 64px;}
.mag-back{
display:inline-flex;align-items:center;gap:8px;
font-size:14px;font-weight:700;color:var(--ash);transition:color .15s ease;
}
.mag-back:hover{color:var(--crimson);}
.mag-article__head{margin:16px 0 0;}
.mag-article__eyebrow{
display:flex;align-items:center;gap:8px;
margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--crimson);
}
.mag-article__title{
font-size:clamp(23px,3.1vw,32px);font-weight:800;
letter-spacing:-.03em;line-height:1.2;margin:0 0 16px;text-wrap:balance;
}
.mag-article__meta{
display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
font-size:13px;color:var(--ash);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:12px 0;margin:0 0 clamp(18px,3vw,28px);
}
.mag-article__meta .mag-keys{margin-left:auto;}
.mag-article__meta-dot{color:var(--crimson-soft);}
/* 본문 (body_html) — 액센트 1종(h2 좌측 룰)만, 위계 보존 */
.mag-body{font-size:17px;line-height:1.85;color:#2c2624;}
.mag-body p{margin:0 0 1.25em;}
.mag-body h2{
font-size:clamp(19px,2.2vw,24px);font-weight:800;
letter-spacing:-.02em;line-height:1.3;margin:1.8em 0 .6em;
padding-left:14px;border-left:3px solid var(--crimson);
}
.mag-body h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:1.5em 0 .5em;}
.mag-body ul{margin:0 0 1.35em;padding-left:0;}
.mag-body ul li{position:relative;padding-left:22px;margin-bottom:.55em;list-style:none;}
.mag-body ul li::before{ /* 담주 점 — 크림슨 반복 회피(단일 시그니처 보존) */
content:"";position:absolute;left:4px;top:.62em;
width:6px;height:6px;background:var(--crimson-soft);border-radius:50%;
}
.mag-body ol{margin:0 0 1.35em;padding-left:1.3em;}
.mag-body ol li{margin:.4em 0;}
.mag-body img{border-radius:12px;margin:1.5em auto;}
.mag-body a{color:var(--crimson);text-decoration:underline;text-underline-offset:3px;}
.mag-body strong{font-weight:800;}
.mag-body blockquote{
margin:1.5em 0;padding:4px 0 4px 20px;
border-left:3px solid var(--crimson-soft);color:#4a4340;font-style:normal;
}
/* ---- 본문 내 상품 — 실제 클래스 보정 (§5.4 #3 · dev 확인) ----
실데이터 body_html 마크업:
…
![]()
이름