/* PREMERA KOREA — 표면을 다루는 자료의 판면.
 *
 * PREMERA 는 두껍게 덮는 코팅이 아니라 표면 자체를 바꾸는 계열이다 —
 * 솔젤과 나노, 대부분 투명하고, 대부분 원래 소재가 그대로 보인다.
 * 그래서 판면도 덮지 않는다. 배경은 거의 흰색, 구획은 색면이 아니라
 * 가는 선과 여백으로 나눈다.
 *
 * 강조색은 옥색 하나. 기재(基材) 구분 — 금속·콘크리트·목재·석재 — 에만
 * 쓰고, 그 밖에는 먹과 회색으로 끝낸다. 투명한 제품을 설명하는 페이지에
 * 색을 겹겹이 바르면 설명과 화면이 어긋난다.
 */

:root {
  color-scheme: light;

  --ink: #16191a;
  --ink-2: #545c5f;
  --ink-3: #868e91;

  --jade: #0f6b63;
  --jade-deep: #084a44;
  --jade-soft: #e5f1ef;

  --amber: #8a6318;        /* 주의·제약 조건 전용 */
  --amber-soft: #f8f1e2;

  --paper: #fcfdfd;
  --paper-2: #f4f7f7;
  --paper-3: #e9eeee;
  --rule: #dde3e3;
  --rule-strong: #bcc5c5;

  --sans: Pretendard, Pretendard Variable, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 42rem;
  --pad: clamp(1.15rem, 4vw, 3.5rem);
  --gap: clamp(1rem, 2.4vw, 1.75rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e9edec;
    --ink-2: #a8b1b0;
    --ink-3: #7d8685;
    --jade: #57b3a8;
    --jade-deep: #a8ded6;
    --jade-soft: #11302d;
    --amber: #d0a659;
    --amber-soft: #2a2113;
    --paper: #0f1212;
    --paper-2: #161a1a;
    --paper-3: #1d2222;
    --rule: #2a3030;
    --rule-strong: #3c4443;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(.975rem, .94rem + .18vw, 1.05rem);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.34; letter-spacing: -.021em; font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jade); text-underline-offset: .18em; }
a:hover { color: var(--jade-deep); }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 2px; }

code, .code { font-family: var(--code); font-size: .89em; letter-spacing: -.01em; color: var(--ink-2); }

.wrap { max-width: 71rem; margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 50rem; }

.skip { position: absolute; left: -9999px; background: var(--jade); color: #fff; padding: .6rem 1rem; z-index: 99; }
.skip:focus { left: .5rem; top: .5rem; }

/* ── 머리띠 ─────────────────────────────────────────────────────────────── */
.top { border-bottom: 1px solid var(--rule); background: rgba(252,253,253,.92); backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 20; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top { background: rgba(15,18,18,.92); } }
.top-in { display: flex; align-items: center; gap: 1rem; min-height: 3.7rem; }
.brand { display: inline-flex; align-items: baseline; gap: .5rem; font-weight: 700; font-size: 1.02rem; letter-spacing: .04em; text-decoration: none; color: var(--ink); margin-inline-end: auto; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand i { font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .12em; color: var(--jade); text-transform: uppercase; }
.top nav { display: flex; gap: 1.05rem; align-items: center; }
.top nav a { font-size: .89rem; font-weight: 500; color: var(--ink-2); text-decoration: none; padding-block: .3rem; border-bottom: 2px solid transparent; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--jade); }
@media (max-width: 54rem) {
  .top-in { flex-wrap: wrap; gap: .4rem 1rem; padding-block: .55rem; min-height: 0; }
  .brand { margin-inline-end: 0; }
  .top nav {
    order: 3; width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); padding-bottom: .15rem; gap: 1rem;
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; }
}

/* ── 표제 ───────────────────────────────────────────────────────────────── */
.head { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 3.5vw, 2.5rem); }
.head h1 { font-size: clamp(1.85rem, 1.2rem + 2.8vw, 3.15rem); font-weight: 600; max-width: 21ch; }
.head .lede { margin-top: 1.05rem; font-size: clamp(1.02rem, .98rem + .38vw, 1.22rem); color: var(--ink-2); max-width: 48ch; }
.head-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.7rem; }
.eyebrow { font-size: .71rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--jade); margin: 0 0 .75rem; }
.crumbs { font-size: .83rem; color: var(--ink-3); margin: 0 0 1.1rem; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--jade); text-decoration: underline; }

/* ── 단면 ───────────────────────────────────────────────────────────────── */
.sec { padding-block: clamp(2.25rem, 5.5vw, 4rem); }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); max-width: 46rem; }
.sec-head h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); }
.sec-head p { color: var(--ink-2); margin-top: .7rem; }

.body { max-width: var(--measure); min-width: 0; }
.body > h2 { font-size: clamp(1.3rem, 1.15rem + .8vw, 1.65rem); margin: 2.6em 0 .75em; scroll-margin-top: 5rem; }
.body > h2:first-child { margin-top: 0; }
.body > h3 { font-size: 1.06rem; font-weight: 600; margin: 2em 0 .55em; color: var(--jade-deep); scroll-margin-top: 5rem; }
.body ul, .body ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.body li { margin-bottom: .45em; }
.body li::marker { color: var(--jade); }

/* ── 기재별 표지 — 이 사이트의 주된 분류축 ──────────────────────────────── */
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 44rem) { .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card { border: 1px solid var(--rule); background: var(--paper); padding: 1.25rem 1.3rem 1.35rem; display: flex; flex-direction: column; }
a.card { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.card:hover { border-color: var(--jade); box-shadow: 0 1px 0 var(--jade); }
.card .kicker { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--jade); }
.card h3 { font-size: 1.05rem; margin: .35rem 0 .45rem; }
.card p { color: var(--ink-2); font-size: .92rem; margin: 0; }
.card .more { margin-top: .85rem; font-size: .85rem; font-weight: 600; color: var(--jade); }

/* 제품 한 줄 — 이름 / 포뮬러 / 용도 */
.plist { border-top: 1px solid var(--rule); }
.prow {
  display: grid; gap: .15rem 1.25rem; padding: .95rem 0;
  border-bottom: 1px solid var(--rule); align-items: baseline;
}
@media (min-width: 46rem) { .prow { grid-template-columns: 15rem 9rem minmax(0, 1fr); } }
.prow .pn { font-weight: 700; letter-spacing: -.01em; }
.prow .pf { font-size: .84rem; color: var(--jade); font-weight: 600; }
.prow .pu { font-size: .92rem; color: var(--ink-2); }

/* ── 표 ─────────────────────────────────────────────────────────────────── */
.t-wrap { overflow-x: auto; max-width: 100%; margin: 1.6rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 34rem; }
caption { caption-side: top; text-align: left; font-size: .82rem; color: var(--ink-3); padding-bottom: .6rem; }
th, td { padding: .65rem .85rem .65rem 0; text-align: left; vertical-align: top; line-height: 1.6; }
thead th { font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--jade-deep); border-bottom: 2px solid var(--jade); white-space: nowrap; }
tbody tr td, tbody tr th { border-bottom: 1px solid var(--rule); }
tbody th { font-weight: 600; white-space: nowrap; }
td.n { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* ── 상자 ───────────────────────────────────────────────────────────────── */
.note, .warn { margin: 1.6rem 0; padding: 1rem 1.15rem; border-left: 2px solid var(--jade); background: var(--jade-soft); font-size: .95rem; }
.note b, .warn b { display: block; margin-bottom: .3rem; font-size: .85rem; color: var(--jade-deep); }
.warn { border-left-color: var(--amber); background: var(--amber-soft); }
.warn b { color: var(--amber); }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }
.src { font-size: .8rem; color: var(--ink-3); margin: -.7rem 0 1.5rem; }

/* ── 숫자판 ─────────────────────────────────────────────────────────────── */
.figs { display: grid; gap: var(--gap); margin: 1.7rem 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fig { border-top: 2px solid var(--jade); padding-top: .7rem; }
.fig b { display: block; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.fig span { display: block; font-size: .8rem; color: var(--ink-2); margin-top: .2rem; line-height: 1.45; }

/* ── 버튼 ───────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-size: .95rem; font-weight: 600; padding: .72rem 1.3rem; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn-1 { background: var(--jade); color: #fff; }
.btn-1:hover, .btn-1:visited { color: #fff; }
.btn-1:hover { background: var(--jade-deep); }
.btn-2 { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn-2:hover, .btn-2:visited { color: var(--ink); }
.btn-2:hover { border-color: var(--jade); background: var(--paper-2); }
.btn-w { width: 100%; }

/* ── 문답 ───────────────────────────────────────────────────────────────── */
.qa details { border-bottom: 1px solid var(--rule); }
.qa details:first-of-type { border-top: 1px solid var(--rule); }
.qa summary { font-weight: 600; padding: 1rem 2rem 1rem 0; cursor: pointer; list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: .15rem; top: .85rem; font-size: 1.3rem; font-weight: 300; color: var(--jade); }
.qa details[open] summary::after { content: "\2013"; }
.qa .a { padding-bottom: 1.1rem; color: var(--ink-2); }
.qa .a p:last-child { margin-bottom: 0; }

/* ── 폼 ─────────────────────────────────────────────────────────────────── */
.form { border: 1px solid var(--rule); background: var(--paper-2); padding: clamp(1.15rem, 3.5vw, 1.9rem); }
.f { margin-bottom: 1rem; }
.f label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .32rem; }
.f label .opt { font-weight: 400; color: var(--ink-3); }
.in, .sel, .ta { width: 100%; font: inherit; font-size: .97rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 3px; padding: .62rem .72rem; }
.ta { resize: vertical; min-height: 7rem; line-height: 1.7; }
.sel {
  appearance: none; padding-right: 2.1rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--jade) 50%),
                    linear-gradient(135deg, var(--jade) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.in:focus, .sel:focus, .ta:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.in::placeholder, .ta::placeholder { color: var(--ink-3); }
.f2 { display: grid; gap: 0 var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) { .f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.msg { padding: .85rem 1rem; margin-bottom: 1rem; font-size: .93rem; border-left: 3px solid; }
.msg-ok { border-color: var(--jade); background: var(--jade-soft); color: var(--jade-deep); }
.msg-no { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }

.cf-turnstile { margin-bottom: 1rem; max-width: 100%; overflow-x: auto; }
.spin { display: inline-block; width: 1em; height: 1em; margin-right: .45em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -.15em; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .spin { animation-duration: 1.6s !important; }
}

/* ── 본 사이트로 보내는 띠 ──────────────────────────────────────────────── */
.origin { border: 1px solid var(--rule); border-left: 2px solid var(--jade); background: var(--paper-2); padding: clamp(1.15rem, 3vw, 1.7rem); margin: clamp(2rem, 5vw, 3rem) 0 0; }
.origin h2 { font-size: 1.12rem; margin-bottom: .45rem; }
.origin p { color: var(--ink-2); font-size: .95rem; max-width: 52ch; }
.origin .btn { margin-top: .35rem; }

/* ── 꼬리 ───────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule); padding-block: clamp(2rem, 5vw, 3rem); font-size: .9rem; color: var(--ink-2); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
/* 링크 칸이 둘일 수도 셋일 수도 있다. 고정 3칸 그리드로 두면 칸을 늘릴 때마다
   CSS 를 같이 고쳐야 해서, 개수에 따라 알아서 접히는 플렉스로 둔다. */
.foot-grid { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; }
.foot-grid > :first-child { flex: 1 1 20rem; }
.foot-grid > * { flex: 0 1 11rem; }
.foot h4 { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--jade); text-decoration: underline; }
.foot-note { max-width: 46ch; line-height: 1.7; }
.foot-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .83rem; color: var(--ink-3); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }