/* =====================================================================
   ms-paper.css  -  마인솔루션 "겹친 색종이" 상단 배경 체계 (사진 없이 HTML·CSS 로 그림)
   ---------------------------------------------------------------------
   북극성: 책상 위에 평평한 색종이가 비스듬히 겹쳐 있고, 소품이 하나 놓여 있다.
           색은 사이트 한 팔레트(6색)만, 페이지마다 종이 각도·겹침·소품·색 비중을 바꾼다.
   - 공용 /css/style.css 와 layouts/front.php 는 건드리지 않는다. 이 파일은 각 뷰가 따로 불러 쓴다.
   - 공용 CSS 함정(body text-align:center, div/p 14px·140%, 모바일 16px !important,
     h1 150% !important, a:link #000·hover underline)은 html body .msp-hero ... 선택자로 덮는다.
   - .menu_bak 과 같은 요소에 같이 쓰지 않는다(공용 모바일 규칙이 높이·배경을 !important 로 바꾼다).
   - 그림 요소는 전부 aria-hidden 인 .msp-art 안에 있고, 글은 .msp-inner 안에 있다.
   - 움직임 없음(정지된 종이). prefers-reduced-motion 에서 버튼 전환도 끈다.

   마크업 (페이지별로 쓰는 조각만 넣는다)
   <section class="msp-hero msp--inquiry">
     <div class="msp-art" aria-hidden="true"><div class="msp-stage">
       <i class="msp-sheet msp-a"></i> <i class="msp-sheet msp-b"></i> ...
       <i class="msp-note"></i> <i class="msp-pencil"></i>
     </div></div>
     <div class="msp-inner"><div class="msp-copy">
       <p class="msp-kicker">...</p><h1 class="msp-title">...</h1><p class="msp-lead">...</p>
     </div></div>
   </section>
   페이지별 조각:
     홈       .msp--home      : sheet a b c + .msp-grid(모눈종이 깔판) + svg.msp-scene(관리자 웹·서버 콘솔·윈도우 프로그램·앱 화면 종이 네 장)
     회사소개 .msp--company   : sheet a b c + .msp-clip(클립)
     포트폴리오 .msp--portfolio : sheet a(바닥) + .msp-fan 안에 sheet f1 f2 f3 f4, f4 안에 .msp-tape
     개발문의 .msp--inquiry   : sheet a b + .msp-note(줄 노트) + .msp-pencil(연필)
   ===================================================================== */

/* ---------- 1. 토큰 ---------- */
:root {
    /* 기본 6색: 이 여섯 가지와 그 옅고 짙은 단계만 쓴다 */
    --msp-navy: #0e1f3b;   /* 남색 - 글씨, 홈 바탕 */
    --msp-blue: #0A4FB3;   /* 홈페이지 버튼 파랑 - 홈의 큰 종이, 연필 */
    --msp-sky: #E4ECF8;    /* 광고 랜딩 하늘색 - 밝은 판의 바탕 */
    --msp-mint: #DEF1E6;   /* 광고 랜딩 연녹색 */
    --msp-lilac: #E8E2F6;  /* 회사소개 원(보라)을 옅게 */
    --msp-peach: #FBE3DF;  /* 회사소개 원(코랄)을 옅게 */

    /* 역할(위 6색에서 파생) */
    --msp-ink: #0e1f3b;          /* 제목 */
    --msp-text: #1c2b40;         /* 본문 */
    --msp-lead: #1f3354;         /* 배너 소개 글 */
    --msp-muted: #4f5d72;        /* 보조 글 */
    --msp-slate: #485F8F;        /* 중간 남색 - 클립, 보조 선 */
    --msp-btn: #34507f;          /* 남색 버튼 (개발문의 시안과 같음) */
    --msp-btn-hover: #2a4369;
    --msp-line: #cdd7e4;         /* 입력칸·표 테두리 */
    --msp-rule: #cfe0f1;         /* 줄 노트 괘선 */
    --msp-focus: rgba(111, 136, 179, .5);

    /* 종이 단계(같은 색상의 밝기만 바꾼 것) */
    --msp-sky-0: #f4f8fd;
    --msp-sky-2: #d3e0f3;
    --msp-sky-3: #c3d4ee;
    --msp-mint-2: #cfe9da;
    --msp-lilac-2: #ddd4f1;
    --msp-peach-2: #f6d4cd;
    --msp-navy-2: #17315e;
    --msp-blue-2: #2c69ca;

    /* 모양 */
    --msp-r-card: 16px;
    --msp-r-ctl: 10px;
    --msp-r-chip: 999px;
    --msp-shadow-card: 0 30px 60px -28px rgba(23, 41, 70, .5), 0 2px 6px rgba(23, 41, 70, .06);
    --msp-shadow-note: 0 1px 0 #dbe6f2, 0 22px 44px -26px rgba(23, 41, 70, .38);

    /* 글자 크기(PC 기준, 모바일은 아래 미디어쿼리) */
    --msp-fs-title: 40px;
    --msp-fs-lead: 17px;
    --msp-fs-kicker: 15px;
    --msp-fs-h2: 22px;
    --msp-fs-body: 15.5px;
    --msp-font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    /* 아주 약한 종이 결(인라인 SVG 노이즈). 종이와 바탕에만 깐다 */
    --msp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .055 0 0 0 0 .12 0 0 0 0 .23 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. 공통 틀 ---------- */
html body .msp-hero {
    /* calc(var(--u) * 1) = 1440 화면에서 1px. 좁으면 종이도 같이 줄고, 넓어도 1px 을 넘지 않는다(띠 높이가 고정이라) */
    --u: clamp(.62px, calc(100vw / 1440), 1px);
    --msp-h: 440px;
    --msp-band: 180;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: var(--msp-h);
    text-align: left;
    color: var(--msp-ink);
    font-family: var(--msp-font);
    word-break: keep-all;
    overflow-wrap: break-word;
    background: var(--msp-ground, var(--msp-sky));
}
html body .msp-hero :where(div, p, a, span, b, strong, em, h1, h2, li, ul, button) {
    font-family: inherit;
    letter-spacing: normal;
}
html body .msp-hero span { font-size: inherit !important; }

.msp-hero .msp-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--msp-grain);
}
.msp-hero .msp-stage {
    /* 넓은 화면(1600 초과)에서는 종이 무대를 가운데 1600 폭에 묶어 글과 종이 거리를 지킨다 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, 1600px);
    margin-left: calc(min(100%, 1600px) / -2);
}
.msp-hero .msp-stage > *,
.msp-hero .msp-fan > * {
    position: absolute;
    display: block;
    transform: rotate(var(--r, 0deg));
}

/* 종이 한 장: 평평한 색 + 위쪽만 살짝 밝은 긴 그라데이션 + 종이 두께(윗선) + 바닥 그림자 */
.msp-hero .msp-sheet {
    background:
        var(--msp-grain),
        linear-gradient(var(--ang, 165deg), var(--c1, #fff), var(--c2, var(--c1, #fff)));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 0 0 .5px rgba(14, 31, 59, .05),
        0 1px 2px rgba(14, 31, 59, .08),
        0 calc(var(--u) * 18) calc(var(--u) * 32) calc(var(--u) * -18) rgba(14, 31, 59, .28);
}

/* 줄 노트 한 장: 괘선 + 옅은 코랄 여백선, 위쪽 여백은 비움 */
.msp-hero .msp-note {
    background-color: #fbfdff;
    background-image:
        var(--msp-grain),
        linear-gradient(90deg, transparent calc(var(--u) * 38), rgba(236, 160, 150, .6) calc(var(--u) * 38), rgba(236, 160, 150, .6) calc(var(--u) * 39.5), transparent calc(var(--u) * 39.5)),
        repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--u) * 21), var(--msp-rule) calc(var(--u) * 21), var(--msp-rule) calc(var(--u) * 22));
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 0, 0 calc(var(--u) * 46);
    background-size: auto, 100% 100%, 100% 100%;
    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(14, 31, 59, .07),
        0 calc(var(--u) * 18) calc(var(--u) * 34) calc(var(--u) * -18) rgba(14, 31, 59, .3);
}

/* 모눈종이(홈): 하늘색 종이 + 굵고 가는 격자, 위에 파란 연필로 그린 앱 화면 한 장 */
.msp-hero .msp-grid {
    background-color: #eef4fc;
    background-image:
        var(--msp-grain),
        linear-gradient(rgba(10, 79, 179, .2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 79, 179, .2) 1px, transparent 1px),
        linear-gradient(rgba(10, 79, 179, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 79, 179, .08) 1px, transparent 1px);
    background-size: auto, calc(var(--u) * 60) calc(var(--u) * 60), calc(var(--u) * 60) calc(var(--u) * 60), calc(var(--u) * 12) calc(var(--u) * 12), calc(var(--u) * 12) calc(var(--u) * 12);
    background-position: 0 0, -1px calc(var(--u) * 23), calc(var(--u) * 17) -1px, -1px calc(var(--u) * 23), calc(var(--u) * 17) -1px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 2px 3px rgba(3, 10, 25, .2),
        0 calc(var(--u) * 24) calc(var(--u) * 44) calc(var(--u) * -18) rgba(3, 10, 25, .55);
}
.msp-hero .msp-grid::before,
.msp-hero .msp-grid::after {
    content: "";
    position: absolute;
}
/* 앱 화면 테두리 */
.msp-hero .msp-grid::before {
    left: calc(var(--u) * 47);
    top: calc(var(--u) * 35);
    width: calc(var(--u) * 96);
    height: calc(var(--u) * 168);
    border: calc(var(--u) * 2.2) solid rgba(10, 79, 179, .62);
    border-radius: calc(var(--u) * 14);
    background:
        linear-gradient(rgba(10, 79, 179, .55), rgba(10, 79, 179, .55)) 50% calc(var(--u) * 9) / calc(var(--u) * 22) calc(var(--u) * 2) no-repeat,
        linear-gradient(rgba(10, 79, 179, .22), rgba(10, 79, 179, .22)) calc(var(--u) * 12) calc(var(--u) * 26) / calc(var(--u) * 68) calc(var(--u) * 34) no-repeat,
        linear-gradient(rgba(10, 79, 179, .5), rgba(10, 79, 179, .5)) calc(var(--u) * 12) calc(var(--u) * 72) / calc(var(--u) * 52) calc(var(--u) * 2.2) no-repeat,
        linear-gradient(rgba(10, 79, 179, .5), rgba(10, 79, 179, .5)) calc(var(--u) * 12) calc(var(--u) * 84) / calc(var(--u) * 38) calc(var(--u) * 2.2) no-repeat,
        linear-gradient(rgba(10, 79, 179, .5), rgba(10, 79, 179, .5)) calc(var(--u) * 12) calc(var(--u) * 104) / calc(var(--u) * 60) calc(var(--u) * 2.2) no-repeat,
        linear-gradient(rgba(10, 79, 179, .5), rgba(10, 79, 179, .5)) calc(var(--u) * 12) calc(var(--u) * 116) / calc(var(--u) * 44) calc(var(--u) * 2.2) no-repeat;
}
/* 화면 옆 관리자 창 한 칸 */
.msp-hero .msp-grid::after {
    left: calc(var(--u) * 167);
    top: calc(var(--u) * 59);
    width: calc(var(--u) * 120);
    height: calc(var(--u) * 84);
    border: calc(var(--u) * 2.2) solid rgba(10, 79, 179, .5);
    border-radius: calc(var(--u) * 5);
    background:
        linear-gradient(rgba(10, 79, 179, .45), rgba(10, 79, 179, .45)) 0 calc(var(--u) * 14) / 100% calc(var(--u) * 2) no-repeat,
        linear-gradient(rgba(10, 79, 179, .2), rgba(10, 79, 179, .2)) calc(var(--u) * 10) calc(var(--u) * 26) / calc(var(--u) * 26) calc(var(--u) * 46) no-repeat,
        linear-gradient(rgba(10, 79, 179, .45), rgba(10, 79, 179, .45)) calc(var(--u) * 46) calc(var(--u) * 30) / calc(var(--u) * 56) calc(var(--u) * 2) no-repeat,
        linear-gradient(rgba(10, 79, 179, .45), rgba(10, 79, 179, .45)) calc(var(--u) * 46) calc(var(--u) * 42) / calc(var(--u) * 40) calc(var(--u) * 2) no-repeat,
        linear-gradient(rgba(10, 79, 179, .45), rgba(10, 79, 179, .45)) calc(var(--u) * 46) calc(var(--u) * 54) / calc(var(--u) * 50) calc(var(--u) * 2) no-repeat;
}

/* 연필(개발문의): 파란 육각 몸통 + 나무 깎은 끝 + 은색 쇠 + 옅은 코랄 지우개 */
.msp-hero .msp-pencil {
    width: calc(var(--len, 300) * var(--u));
    height: calc(var(--u) * 15);
    background: linear-gradient(180deg, #4a86e0 0, #4a86e0 32%, var(--msp-blue) 32%, var(--msp-blue) 70%, #083f8f 70%, #083f8f 100%);
    filter: drop-shadow(0 calc(var(--u) * 7) calc(var(--u) * 6) rgba(14, 31, 59, .28));
}
.msp-hero .msp-pencil::before,
.msp-hero .msp-pencil::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
}
.msp-hero .msp-pencil::before {
    right: 100%;
    width: calc(var(--u) * 42);
    background: linear-gradient(90deg, #1b2b47 0, #1b2b47 25%, #f1d8c6 25%, #ead0bd 100%);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.msp-hero .msp-pencil::after {
    left: 100%;
    width: calc(var(--u) * 36);
    border-radius: 0 calc(var(--u) * 4) calc(var(--u) * 4) 0;
    background: linear-gradient(90deg, #b9c2d1 0, #e6eaf1 18%, #b9c2d1 30%, #dfe4ec 40%, #f2c2bb 40%, #eeb3ab 100%);
}

/* 클립(회사소개): 가는 철사 두 고리 */
.msp-hero .msp-clip {
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 72);
    border: calc(var(--u) * 2.6) solid #7d8db0;
    border-radius: calc(var(--u) * 11);
    filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 2) rgba(14, 31, 59, .18));
}
.msp-hero .msp-clip::before {
    content: "";
    position: absolute;
    left: calc(var(--u) * 3);
    top: calc(var(--u) * 12);
    width: calc(var(--u) * 11);
    height: calc(var(--u) * 46);
    border: calc(var(--u) * 2.6) solid #7d8db0;
    border-bottom-width: 0;
    border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0;
}

/* 투명 테이프(포트폴리오): 양 끝을 손으로 뜯은 모양 */
.msp-hero .msp-tape {
    position: absolute;
    display: block;
    width: calc(var(--u) * 112);
    height: calc(var(--u) * 30);
    background: linear-gradient(180deg, rgba(222, 241, 230, .82), rgba(207, 233, 218, .82));
    clip-path: polygon(3% 0, 97% 0, 100% 16%, 96% 34%, 100% 52%, 97% 70%, 100% 88%, 96% 100%, 4% 100%, 0 84%, 3% 66%, 0 48%, 4% 30%, 0 12%);
}

/* ---------- 3. 글 ---------- */
html body .msp-hero .msp-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--msp-pad-top, 84px) 32px var(--msp-pad-bottom, 72px);
    box-sizing: border-box;
}
html body .msp-hero .msp-copy { max-width: var(--msp-copy-w, 540px); }
html body .msp-hero .msp-kicker {
    font-size: var(--msp-fs-kicker) !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: var(--msp-ink);
    margin: 0 0 12px !important;
    padding: 0 !important;
}
html body .msp-hero .msp-title {
    font-size: var(--msp-fs-title) !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: var(--msp-ink);
    margin: 0 0 18px !important;
    padding: 0 !important;
}
html body .msp-hero .msp-lead {
    font-size: var(--msp-fs-lead) !important;
    line-height: 1.7 !important;
    font-weight: 600 !important;
    color: var(--msp-lead);
    margin: 0 !important;
    padding: 0 !important;
}
html body .msp-hero .msp-lead + .msp-lead { margin-top: 10px !important; }
html body .msp-hero .msp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 28px;
}
html body .msp-hero a.msp-btn,
html body .msp-hero button.msp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 28px;
    border: 0;
    border-radius: 12px;
    background: var(--msp-btn);
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, transform .08s ease;
}
html body .msp-hero .msp-btn:hover { background: var(--msp-btn-hover); }
html body .msp-hero .msp-btn:active { transform: translateY(1px); }
html body .msp-hero .msp-btn:focus-visible,
html body .msp-hero .msp-link:focus-visible { outline: 3px solid var(--msp-focus); outline-offset: 3px; }
html body .msp-hero a.msp-link {
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: #23467f !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px;
}
html body .msp-hero a.msp-link:hover { color: var(--msp-navy) !important; }

/* =====================================================================
   4. 페이지별 구성 (PC 기준 1440 좌표, 단위 u)
   ===================================================================== */

/* ---- 홈: 밝은 하늘 판(왼쪽 아래 연녹이 옅게 번지고 오른쪽 끝은 연보라) + 하늘 큰 종이 + 연보라 한 장(오른쪽 위) + 연녹 한 장(오른쪽 아래) + 모눈종이 깔판.
        깔판 위에 이 회사가 만드는 네 가지(관리자 웹, 서버 콘솔, 윈도우 프로그램, 앱 화면)를 종이로 오려 겹쳐 놓았다.
        네 장은 뷰 안의 인라인 SVG(svg.msp-scene)로 그린다. 하늘·연보라가 주인 색, 글씨는 짙은 남색 ---- */
html body .msp-hero.msp--home {
    --msp-h: 600px;
    --msp-pad-top: 124px;
    --msp-copy-w: 560px;
    --msp-ground:
        radial-gradient(70% 85% at 0% 100%, rgba(222, 241, 230, .75), rgba(222, 241, 230, 0) 70%),
        linear-gradient(112deg, #eaf1fb 0%, #f3f7fd 30%, #e9f0fa 60%, #e6ecf8 80%, #e8e6f6 100%);
    --msp-fs-title: 46px;
    --msp-fs-lead: 18px;
}
.msp--home .msp-a { right: calc(var(--u) * -120); top: calc(var(--u) * -84); width: calc(var(--u) * 780); height: calc(var(--u) * 560); --r: -9deg; --c1: #e1eaf7; --c2: var(--msp-sky-2); --ang: 200deg; }
.msp--home .msp-b { right: calc(var(--u) * -40); top: calc(var(--u) * -46); width: calc(var(--u) * 330); height: calc(var(--u) * 210); --r: 10deg; --c1: #efebf9; --c2: var(--msp-lilac); }
.msp--home .msp-c { right: calc(var(--u) * -70); top: calc(var(--u) * 300); width: calc(var(--u) * 380); height: calc(var(--u) * 260); --r: 9deg; --c1: #e6f5ec; --c2: var(--msp-mint-2); }
.msp--home .msp-grid {
    right: calc(var(--u) * 22); top: calc(var(--u) * 76); width: calc(var(--u) * 612); height: calc(var(--u) * 428); --r: -3deg;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 0 0 .5px rgba(14, 31, 59, .05),
        0 1px 2px rgba(14, 31, 59, .08),
        0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -20) rgba(14, 31, 59, .3);
}
.msp--home .msp-grid::before,
.msp--home .msp-grid::after { display: none; }
.msp--home .msp-scene { right: calc(var(--u) * 40); top: calc(var(--u) * 50); width: calc(var(--u) * 600); height: calc(var(--u) * 441); overflow: visible; }

/* ---- 회사소개: 연보라 판, 원 세 개의 색(보라·청록·코랄)을 옅게 한 종이 세 장을 클립으로 묶음 ---- */
html body .msp-hero.msp--company {
    --msp-h: 460px;
    --msp-pad-top: 92px;
    --msp-copy-w: 560px;
    --msp-ground: linear-gradient(105deg, #f6f4fc 0%, #f1f3fb 55%, #edf5f5 100%);
}
.msp--company .msp-a { right: calc(var(--u) * 262); top: calc(var(--u) * 58); width: calc(var(--u) * 400); height: calc(var(--u) * 292); --r: -6deg; --c1: #ece6f9; --c2: var(--msp-lilac-2); }
.msp--company .msp-c { right: calc(var(--u) * 446); top: calc(var(--u) * 236); width: calc(var(--u) * 250); height: calc(var(--u) * 186); --r: -4deg; --c1: #fde9e5; --c2: var(--msp-peach-2); }
.msp--company .msp-b { right: calc(var(--u) * 76); top: calc(var(--u) * 128); width: calc(var(--u) * 360); height: calc(var(--u) * 268); --r: 7deg; --c1: #e3f3e9; --c2: var(--msp-mint-2); }
.msp--company .msp-clip { right: calc(var(--u) * 340); top: calc(var(--u) * 88); --r: 7deg; }

/* ---- 포트폴리오: 하늘색 판, 같은 크기 종이 네 장을 부채처럼 펼친 묶음 + 테이프 ---- */
html body .msp-hero.msp--portfolio {
    --msp-h: 430px;
    --msp-pad-top: 92px;
    --msp-copy-w: 560px;
    --msp-ground: linear-gradient(160deg, #f2f7fd 0%, #e9f0fa 60%, #e3ecf8 100%);
}
.msp--portfolio .msp-a { left: calc(var(--u) * -100); bottom: calc(var(--u) * -160); width: calc(var(--u) * 780); height: calc(var(--u) * 200); --r: 3.5deg; --c1: var(--msp-sky-2); --c2: #dbe6f5; }
.msp--portfolio .msp-fan { right: calc(var(--u) * 170); top: calc(var(--u) * 84); width: calc(var(--u) * 380); height: calc(var(--u) * 280); transform: none; }
.msp--portfolio .msp-fan > .msp-sheet { inset: 0; transform-origin: 18% 110%; }
.msp--portfolio .msp-f1 { --r: -13deg; --c1: var(--msp-sky-3); --c2: #bccfeb; }
.msp--portfolio .msp-f2 { --r: -6deg; --c1: #e5f4ea; --c2: var(--msp-mint-2); }
.msp--portfolio .msp-f3 { --r: 1.5deg; --c1: #f0ecfa; --c2: var(--msp-lilac); }
.msp--portfolio .msp-f4 { --r: 8.5deg; --c1: #ffffff; --c2: var(--msp-sky-0); }
.msp--portfolio .msp-tape { left: 50%; top: calc(var(--u) * -14); margin-left: calc(var(--u) * -56); transform: rotate(-4deg); }

/* ---- 개발문의: 하늘색 판, 왼쪽 위 연녹색 모서리 + 줄 노트 + 연필. 오른쪽은 문의 카드가 덮는다 ---- */
html body .msp-hero.msp--inquiry {
    --msp-h: 460px;
    --msp-pad-top: 60px;
    --msp-copy-w: 470px;
    --msp-ground: linear-gradient(125deg, #e9f1fb 0%, #e3ebf8 45%, #e5f0f2 100%);
    --msp-fs-title: 38px;
}
.msp--inquiry .msp-a { left: calc(var(--u) * -362); top: calc(var(--u) * -120); width: calc(var(--u) * 440); height: calc(var(--u) * 700); --r: 12deg; --c1: #dcf1e4; --c2: #c9e6d4; }
.msp--inquiry .msp-b { left: calc(var(--u) * 560); top: calc(var(--u) * 272); width: calc(var(--u) * 980); height: calc(var(--u) * 420); --r: -8deg; --c1: #d2e0f3; --c2: var(--msp-sky-3); }
.msp--inquiry .msp-note { right: calc(var(--u) * -60); top: calc(var(--u) * 26); width: calc(var(--u) * 300); height: calc(var(--u) * 420); --r: 9deg; }
.msp--inquiry .msp-pencil { right: calc(var(--u) * -100); top: calc(var(--u) * 242); --len: 300; --r: -70deg; }

/* ---------- 5. 화면 폭 ---------- */
@media (max-width: 1180px) {
    html body .msp-hero { --msp-fs-title: 34px; --msp-fs-lead: 16px; }
    html body .msp-hero.msp--home { --msp-fs-title: 40px; --msp-fs-lead: 17px; --msp-copy-w: 480px; }
    html body .msp-hero.msp--inquiry { --msp-fs-title: 32px; }
    html body .msp-hero.msp--company,
    html body .msp-hero.msp--portfolio { --msp-copy-w: 480px; }
}

/* 모바일·좁은 태블릿: 종이는 위쪽 띠(그림만), 글은 그 아래 같은 바탕 위에. 반투명 상자 없음 */
@media (max-width: 900px) {
    html body .msp-hero {
        /* 띠는 390 화면 기준 그림 한 장. 넓은 태블릿에서는 가운데에 1.3배까지만 키운다 */
        --u: clamp(.82px, calc(100vw / 390), 1.3px);
        --msp-fs-title: 27px;
        --msp-fs-lead: 15.5px;
        --msp-fs-kicker: 14px;
        min-height: 0;
    }
    .msp-hero .msp-art {
        position: relative;
        inset: auto;
        height: calc(var(--msp-band) * var(--u));
        overflow: hidden;
    }
    .msp-hero .msp-stage {
        width: calc(var(--u) * 390);
        margin-left: calc(var(--u) * -195);
    }
    html body .msp-hero .msp-inner { padding: 24px 20px 32px; }
    html body .msp-hero .msp-copy { max-width: 620px; }
    html body .msp-hero .msp-title { line-height: 1.32 !important; margin-bottom: 12px !important; }
    html body .msp-hero .msp-lead { line-height: 1.65 !important; }
    html body .msp-hero .msp-actions { margin-top: 22px; }
    html body .msp-hero a.msp-btn { min-height: 52px; width: 100%; font-size: 16.5px !important; }

    html body .msp-hero.msp--home { --msp-band: 250; --msp-fs-title: 28px; --msp-fs-lead: 15.5px; }
    .msp--home .msp-a { right: calc(var(--u) * -70); top: calc(var(--u) * -56); width: calc(var(--u) * 330); height: calc(var(--u) * 250); }
    .msp--home .msp-b { right: calc(var(--u) * -44); top: calc(var(--u) * -34); width: calc(var(--u) * 150); height: calc(var(--u) * 100); }
    .msp--home .msp-c { right: auto; left: calc(var(--u) * -26); top: calc(var(--u) * 172); width: calc(var(--u) * 170); height: calc(var(--u) * 110); }
    .msp--home .msp-grid { right: calc(var(--u) * 20); top: calc(var(--u) * 24); width: calc(var(--u) * 340); height: calc(var(--u) * 226); background-size: auto, calc(var(--u) * 30) calc(var(--u) * 30), calc(var(--u) * 30) calc(var(--u) * 30), calc(var(--u) * 6) calc(var(--u) * 6), calc(var(--u) * 6) calc(var(--u) * 6); }
    .msp--home .msp-scene { right: calc(var(--u) * 28); top: calc(var(--u) * 8); width: calc(var(--u) * 330); height: calc(var(--u) * 243); }

    html body .msp-hero.msp--company { --msp-band: 180; }
    .msp--company .msp-a { right: auto; left: calc(var(--u) * 22); top: calc(var(--u) * 22); width: calc(var(--u) * 196); height: calc(var(--u) * 140); }
    .msp--company .msp-c { right: auto; left: calc(var(--u) * 118); top: calc(var(--u) * 94); width: calc(var(--u) * 122); height: calc(var(--u) * 92); }
    .msp--company .msp-b { right: calc(var(--u) * 20); top: calc(var(--u) * 36); width: calc(var(--u) * 168); height: calc(var(--u) * 124); }
    .msp--company .msp-clip { right: calc(var(--u) * 136); top: calc(var(--u) * 18); transform: rotate(7deg) scale(.7); transform-origin: 50% 0; }

    html body .msp-hero.msp--portfolio { --msp-band: 190; }
    .msp--portfolio .msp-a { left: calc(var(--u) * -50); bottom: calc(var(--u) * -78); width: calc(var(--u) * 330); height: calc(var(--u) * 120); }
    .msp--portfolio .msp-fan { right: calc(var(--u) * 92); top: calc(var(--u) * 44); width: calc(var(--u) * 176); height: calc(var(--u) * 128); }
    .msp--portfolio .msp-tape { width: calc(var(--u) * 62); height: calc(var(--u) * 18); margin-left: calc(var(--u) * -31); top: calc(var(--u) * -8); }

    html body .msp-hero.msp--inquiry { --msp-band: 176; }
    .msp--inquiry .msp-a { left: calc(var(--u) * -200); top: calc(var(--u) * -90); width: calc(var(--u) * 290); height: calc(var(--u) * 420); }
    .msp--inquiry .msp-b { left: calc(var(--u) * 96); top: calc(var(--u) * 112); width: calc(var(--u) * 420); height: calc(var(--u) * 200); }
    .msp--inquiry .msp-note { right: calc(var(--u) * -26); top: calc(var(--u) * 16); width: calc(var(--u) * 156); height: calc(var(--u) * 214); background-position: 0 0, 0 0, 0 calc(var(--u) * 30);
        background-image:
            var(--msp-grain),
            linear-gradient(90deg, transparent calc(var(--u) * 22), rgba(236,160,150,.6) calc(var(--u) * 22), rgba(236,160,150,.6) calc(var(--u) * 23.2), transparent calc(var(--u) * 23.2)),
            repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--u) * 15), var(--msp-rule) calc(var(--u) * 15), var(--msp-rule) calc(var(--u) * 16)); }
    .msp--inquiry .msp-pencil { right: calc(var(--u) * 66); top: calc(var(--u) * 78); --len: 170; --r: -32deg; height: calc(var(--u) * 11); }
    .msp--inquiry .msp-pencil::before { width: calc(var(--u) * 30); }
    .msp--inquiry .msp-pencil::after { width: calc(var(--u) * 24); }
}

@media (prefers-reduced-motion: reduce) {
    html body .msp-hero *,
    html body .msp-hero *::before,
    html body .msp-hero *::after { transition: none !important; animation: none !important; }
}