.column-dysmenorrhea {
  --dys-ink: #1f3d3a;
  --dys-green: #247860;
  --dys-teal: #006c78;
  --dys-dark: #3c605a;
  --dys-soft: #5a96a2;
  --dys-base: #f8f8f6;
  --dys-mist: #eef2f2;
  --dys-warm: #e8e4e2;
  --dys-sub: #555550;
  --dys-line: #d7dfdc;
  background: var(--dys-base);
  color: var(--dys-ink);
}

.column-dysmenorrhea * { box-sizing: border-box; }
.column-dysmenorrhea .preview-ribbon { position: fixed; z-index: 1001; right: 18px; bottom: 18px; padding: .58rem .85rem; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: rgba(31,61,58,.92); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; box-shadow: 0 8px 24px rgba(31,61,58,.16); backdrop-filter: blur(8px); }
.column-dysmenorrhea .nav { background: rgba(248,248,246,.92); }

/* 머리: 왼쪽 글, 오른쪽 정사각형 사진 (사이트 칼럼 공통 틀) */
.column-dysmenorrhea .column-article__header.dys-head { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(1.6rem,4vw,3.2rem); align-items: end; width: min(100%,1120px); max-width: none; margin: 0 auto; padding: clamp(2.2rem,5vw,3.4rem) clamp(1.1rem,4vw,2.4rem) clamp(1.4rem,3vw,2rem); }
.dys-head h1 { letter-spacing: -.045em; word-break: keep-all; }
.dys-cover { margin: 0; }
.column-dysmenorrhea .dys-cover img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1/1 !important; object-fit: cover; border-radius: 4px; }
@media (max-width: 820px) { .column-dysmenorrhea .column-article__header.dys-head { grid-template-columns: 1fr; } .dys-cover { max-width: 420px; } }

/* 절 번호: 사이트 공통 .column-section-label을 따른다 */
.column-dysmenorrhea .dys-label { margin: 0 0 .85rem; letter-spacing: .07em; }

.dys-night { margin: 0 0 clamp(3.6rem,6vw,5rem); padding: clamp(1.3rem,3vw,1.8rem); border-radius: 16px; background: var(--dys-ink); color: #fff; }
.dys-night__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.dys-night__top span { font-size: .71rem; font-weight: 800; letter-spacing: .12em; opacity: .68; }
.dys-night__top time { font-size: 1.1rem; font-weight: 800; }
.dys-night__line { display: grid; grid-template-columns: repeat(4,1fr); gap: .45rem; margin: 0; padding: 0; list-style: none; }
.dys-night__line li { position: relative; min-height: 112px; margin: 0; padding: 2.7rem .72rem .72rem; border-radius: 12px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.86); font-size: .77rem; line-height: 1.5; }
.dys-night__line li::before { content: attr(data-step); position: absolute; top: .72rem; left: .72rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: .66rem; font-weight: 800; }
.dys-night__line li + li::after { content: "→"; position: absolute; left: -.42rem; top: 45%; color: rgba(255,255,255,.5); }
.dys-night__caption { margin: 1rem 0 0; color: rgba(255,255,255,.66); font-size: .76rem; line-height: 1.65; }

.dys-shell { align-items: start; }
.dys-article { min-width: 0; }

/* 먼저 답하면: 한 변 색 막대 없이 옅은 바탕으로만 가른다 */
.dys-answer { margin: 0 0 2.4rem; padding: clamp(1.4rem,3vw,2rem); border-radius: 16px; background: var(--dys-mist); }
.dys-answer small { color: var(--dys-teal); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.dys-answer strong { display: block; margin: .7rem 0 .65rem; color: var(--dys-ink); font-size: clamp(1.08rem,2.2vw,1.25rem); line-height: 1.6; letter-spacing: -.025em; word-break: keep-all; }
.column-dysmenorrhea .dys-answer p { margin: 0; color: var(--dys-sub); font-size: .92rem; line-height: 1.85; }

/* 본문 절: 소제목 크기·색은 사이트 공통(.column-article__content h2)을 따른다 */
.column-dysmenorrhea .column-article__content > .dys-section { margin-bottom: clamp(3.6rem,6vw,5rem); scroll-margin-top: 110px; }
.column-dysmenorrhea .dys-section h2 { max-width: 700px; margin-bottom: 1.4rem; word-break: keep-all; }
.dys-section h3 { color: var(--dys-ink); letter-spacing: -.025em; }
.column-dysmenorrhea .dys-section > p { margin: 0 0 1.7rem; line-height: 2; word-break: keep-all; }
.dys-section sup { margin-left: .12em; font-size: .66em; line-height: 0; }
.dys-section sup a { color: var(--dys-teal); font-weight: 700; text-decoration: none; }
.dys-quote { margin: 2rem 0 2.4rem; padding: 1rem 1.15rem; border-radius: 12px; background: #f1f5f4; color: var(--dys-dark); font-size: .98rem; font-weight: 650; line-height: 1.85; }

/* 자료 판: 흰 바탕, 얇은 테두리. 칸은 옅은 바탕 */
.dys-plate { margin: 2.4rem 0 2.8rem; padding: clamp(1.2rem,3.4vw,1.9rem); border: 1px solid var(--dys-line); border-radius: 16px; background: #fff; }
.dys-plate__cap { margin: 0 0 1.3rem; }
.dys-plate__cap span { display: block; margin-bottom: .35rem; color: var(--dys-teal); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.dys-plate__cap strong { display: block; color: var(--dys-ink); font-size: clamp(1rem,2.2vw,1.12rem); line-height: 1.5; letter-spacing: -.025em; word-break: keep-all; }
.column-dysmenorrhea .dys-note { margin: 1.1rem 0 0; color: #66706f; font-size: .76rem; line-height: 1.7; word-break: keep-all; }

.dys-mechanism { display: grid; grid-template-columns: repeat(4,1fr); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.column-dysmenorrhea .dys-mechanism li { position: relative; min-height: 124px; margin: 0; padding: .9rem; border-radius: 12px; background: var(--dys-base); line-height: 1.55; }
.dys-mechanism li + li::before { content: "→"; position: absolute; left: -.46rem; top: 48%; color: var(--dys-soft); font-weight: 800; }
.dys-mechanism b { display: block; margin-bottom: .55rem; color: var(--dys-teal); font-size: .78rem; }
.dys-mechanism span { color: var(--dys-ink); font-size: .84rem; font-weight: 650; line-height: 1.55; }

.dys-sleep { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 2rem 0 2.4rem; }
.dys-sleep article { padding: 1rem 1.1rem; border: 1px solid var(--dys-line); border-radius: 12px; background: #fff; }
.dys-sleep small { color: var(--dys-teal); font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.dys-sleep strong { display: block; margin: .3rem 0 .4rem; font-size: 1.05rem; }
.column-dysmenorrhea .dys-sleep p { margin: 0; color: var(--dys-sub); font-size: .82rem; line-height: 1.65; }

.dys-routes { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }
.dys-routes article { position: relative; min-height: 140px; padding: 1rem 1.1rem; border-radius: 12px; background: var(--dys-base); }
.dys-routes article::after { content: attr(data-mark); position: absolute; right: .9rem; top: .65rem; color: rgba(90,150,162,.22); font-size: 2rem; font-weight: 900; }
.dys-routes b { display: block; max-width: 85%; margin-bottom: .45rem; font-size: .92rem; line-height: 1.45; }
.column-dysmenorrhea .dys-routes p { margin: 0; color: var(--dys-sub); font-size: .8rem; line-height: 1.65; }

.dys-interpret { display: grid; grid-template-columns: 1fr 1.2fr; gap: .7rem; }
.dys-interpret__word { display: grid; place-items: center; min-height: 190px; padding: 1rem; border-radius: 12px; background: var(--dys-ink); color: #fff; text-align: center; }
.dys-interpret__word span { display: block; font-size: .68rem; letter-spacing: .12em; opacity: .62; }
.dys-interpret__word strong { display: block; margin-top: .5rem; font-size: 1.35rem; }
.dys-interpret__list { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.dys-interpret__list div { padding: .85rem; border-radius: 12px; background: var(--dys-base); }
.dys-interpret__list b { display: block; color: var(--dys-teal); font-size: .74rem; }
.dys-interpret__list span { display: block; margin-top: .25rem; color: var(--dys-sub); font-size: .78rem; line-height: 1.55; }

.dys-table-wrap { overflow-x: auto; }
.dys-table { width: 100%; min-width: 610px; border-collapse: separate; border-spacing: 0 .42rem; }
.dys-table th, .dys-table td { padding: .86rem .9rem; text-align: left; font-size: .8rem; line-height: 1.55; }
.dys-table thead th { color: var(--dys-dark); font-size: .72rem; letter-spacing: .03em; }
.dys-table tbody th { border-radius: 10px 0 0 10px; background: var(--dys-base); color: var(--dys-ink); }
.dys-table tbody td { background: var(--dys-base); color: var(--dys-sub); }
.dys-table tbody td:last-child { border-radius: 0 10px 10px 0; }

.dys-questions { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem; counter-reset: question; }
.dys-questions div { position: relative; padding: 1rem 1rem 1rem 3.2rem; border-radius: 12px; background: var(--dys-base); color: var(--dys-ink); font-size: .84rem; font-weight: 650; line-height: 1.55; counter-increment: question; }
.dys-questions div::before { content: counter(question,decimal-leading-zero); position: absolute; left: 1rem; top: 1rem; color: var(--dys-teal); font-size: .76rem; font-weight: 850; }

.dys-care { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin: 2rem 0 2.4rem; }
.dys-care article { padding: 1.05rem; border: 1px solid var(--dys-line); border-radius: 12px; background: #fff; }
.dys-care i { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .9rem; border-radius: 50%; background: var(--dys-mist); color: var(--dys-teal); font-size: .72rem; font-style: normal; font-weight: 800; }
.column-dysmenorrhea .dys-care h3 { margin: 0 0 .5rem; font-size: .96rem; }
.column-dysmenorrhea .dys-care p { margin: 0; color: var(--dys-sub); font-size: .8rem; line-height: 1.7; }

.dys-track { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .6rem; margin: 0; }
.dys-track div { display: flex; min-width: 0; min-height: 112px; padding: .9rem .72rem .82rem; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: var(--dys-base); text-align: center; }
.dys-track b { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 10px; background: var(--dys-teal); color: #fff; font-size: .86rem; letter-spacing: .03em; }
.dys-track span { display: block; margin-top: .62rem; color: var(--dys-ink); font-size: .74rem; font-weight: 700; line-height: 1.5; }

/* FAQ·참고자료: 77·78호와 같은 모양 */
.column-dysmenorrhea .column-article__content .dys-faq { margin: clamp(3.6rem,6vw,5rem) 0 0; padding: 0; }
.dys-faq h2 { margin-bottom: 1.3rem; }
.dys-faq details { border-top: 1px solid var(--dys-line); }
.dys-faq details:last-of-type { border-bottom: 1px solid var(--dys-line); }
.dys-faq summary { position: relative; padding: 1.1rem 2.4rem 1.1rem 0; color: var(--dys-ink); font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; }
.dys-faq summary::-webkit-details-marker { display: none; }
.dys-faq summary::after { content: "+"; position: absolute; right: .3rem; top: 1rem; color: var(--dys-teal); font-size: 1.2rem; font-weight: 400; }
.dys-faq details[open] summary::after { content: "–"; }
.column-dysmenorrhea .dys-faq details p { margin: 0 0 1.3rem; color: var(--dys-sub); line-height: 1.95; }

.column-dysmenorrhea .column-article__content .dys-sources { min-width: 0; margin: clamp(2.8rem,5vw,3.8rem) 0 0; padding: 1.1rem 1.3rem 1rem; overflow: hidden; border-radius: 14px; background: #f1f0ee; }
.column-dysmenorrhea .column-article__content .dys-sources h2 { margin: 0 0 .6rem; color: var(--dys-ink); font-size: .82rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.dys-sources ol { min-width: 0; margin: 0; padding-left: 1.3rem; color: #6b7473; font-size: .7rem; line-height: 1.55; }
.column-dysmenorrhea .dys-sources li { min-width: 0; margin: 0 0 .4rem; padding: 0; font-size: inherit; line-height: inherit; overflow-wrap: anywhere; }
.dys-sources a { color: var(--dys-teal); font-size: inherit; overflow-wrap: anywhere; }

@media (max-width: 680px) {
  .dys-night__line { grid-template-columns: 1fr 1fr; }
  .dys-night__line li + li::after { display: none; }
  .dys-mechanism { grid-template-columns: 1fr 1fr; }
  .dys-mechanism li + li::before { display: none; }
  .dys-sleep, .dys-routes, .dys-interpret, .dys-questions { grid-template-columns: 1fr; }
  .dys-interpret__list { grid-template-columns: 1fr 1fr; }
  .dys-care { grid-template-columns: 1fr; }
  .dys-track { grid-template-columns: repeat(2,1fr); }
  .dys-track div:last-child { grid-column: 1/-1; }
}

@media (max-width: 420px) {
  .dys-mechanism, .dys-interpret__list { grid-template-columns: 1fr; }
  .column-dysmenorrhea .preview-ribbon { right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) { .column-dysmenorrhea * { scroll-behavior: auto !important; } }