/* ==========================================================================
   아크스미스 메인페이지 전용 스타일

   시안 : design/figma/메인.png (1920 기준)
   모션 : www/js/motion.arksmith.js   ·   명세 : design/MAIN-INTERACTION.md

   좌표는 시안 1920 폭에서 실측한 값을 % 로 환산했다.
   각 섹션이 자기 높이를 기준으로 % 배치를 하므로 화면이 넓어져도 구도가 유지된다.

   ⚠️ 이 파일은 site.css 다음에 로드된다 (둘 다 캐스케이드 레이어 밖).
      구 뷰티케이 common.css 는 output.css 의 legacy 레이어로 내려가 있어
      여기 선언이 항상 이긴다. tailwind/input.css 상단 주석 참고.
   ========================================================================== */

/* ScrollTrigger 스크럽과 네이티브 부드러운 스크롤이 겹치면 스크롤 위치가 튈 수 있다.
   (앵커 이동은 motion.arksmith.js 가 ScrollToPlugin 으로 처리한다)
   .ms-ready 는 GSAP 이 살아있을 때만 붙으므로, 모션이 없으면 네이티브가 그대로 동작한다. */
html.ms-ready { scroll-behavior: auto; }

/* .ark-placeholder 와 .ark-btn-outline 은 서브페이지도 쓰므로 site.css 로 옮겼다.
   (한쪽 CSS 에만 두면 다른 쪽에서 무스타일이 된다) */

/* --------------------------------------------------------------------------
   공통 — 라벨 / 헤드라인
   -------------------------------------------------------------------------- */
.ark-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 178px;
    height: 89px;
    margin-inline: auto;
    color: var(--color-brand-500);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .12em;
}
.ark-label__arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ark-label > span { position: relative; }

/* 아치 없는 라벨 — REFERENCE / NEWS */
.ark-label--plain {
    display: block;
    width: auto;
    height: auto;
    margin-inline: 0;
    font-size: .95rem;
    letter-spacing: .14em;
}
.ark-label--light { color: #fff; }

/* 시안 실측(1920 기준): 47px.
   S3 1행/2행, S4 헤드라인 세 곳을 텍스트 폭으로 역산한 값이 모두 47.0px 로 일치.
   행간은 시안 baseline 간격 67px → 67/47 = 1.43 */
.ark-headline {
    font-size: clamp(1.6rem, 2.45vw, 2.9375rem);
    font-weight: 700;
    line-height: 1.43;
    letter-spacing: -.01em;
    color: var(--color-ink-900);
}
.ark-headline--center { text-align: center; }
.ark-headline--light  { color: #fff; }
.ark-headline > span  { display: block; }

/* 아웃라인 버튼(.ark-btn-outline)은 site.css 로 이동 — 서브페이지 공용 */

/* --------------------------------------------------------------------------
   S1. HERO
   -------------------------------------------------------------------------- */
.ark-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    /* 시안에서 문구 블록은 정중앙보다 약 52px 위에 있다.
       중앙 정렬에서는 padding-bottom 의 절반만큼 위로 밀린다.
       (SCROLL DOWN 은 absolute 라 영향 없음) */
    padding-bottom: 56px;
}
/* 래퍼는 스크롤 확대, 내부 이미지는 로드 확대 — 두 scale 이 곱해진다.
   같은 요소에 걸면 스크롤 시작 순간 스크럽이 자기 시작값으로 되돌려 배경이 튄다. */
.ark-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    will-change: transform;
}
.ark-hero__bg > picture,
.ark-hero__bg > img {
    display: block;
    width: 100%;
    height: 100%;
    will-change: transform;
}
.ark-hero__inner { position: relative; z-index: 1; width: 100%; }

/* 시안 실측 : 캡높이 36px → Outfit 캡높이비 0.7 기준 font-size 52px, 행간 61px */
.ark-hero__title {
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.17;
    letter-spacing: -.01em;
    color: var(--color-brand-500);
}
.ark-hero__title > span { display: block; }

.ark-hero__sub {
    margin-top: 1.1rem;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 700;
    color: var(--color-ink-900);
}

.ark-scrolldown {
    position: absolute;
    left: 50%;
    bottom: 3.0625rem;      /* 시안 실측 49px */
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--color-brand-500);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
}
.ark-scrolldown__arrow { width: 16px; height: 9px; }

/* --------------------------------------------------------------------------
   S2. INTRO
   -------------------------------------------------------------------------- */
.ark-intro {
    position: relative;
    overflow: hidden;
    height: clamp(680px, 58vw, 1113px);   /* 시안 1113 / 1920 = 58vw */
    display: flex;
    align-items: center;
}
.ark-intro__inner {
    position: relative;
    z-index: 2;
    text-align: center;
}
/* 시안 실측: 52px, 행간 67px → 1.29 */
.ark-intro__title {
    font-size: clamp(1.5rem, 2.7vw, 3.25rem);
    font-weight: 700;
    line-height: 1.29;
    color: var(--color-brand-500);
}
.ark-intro__title > span { display: block; }

/* 시안에서 문구 블록은 정중앙이 아니라 살짝 아래에 있다 (문구 top 496 / 중앙 배치 시 452).
   flex 중앙 정렬에서 margin-top 은 절반만 이동시키므로 필요한 오프셋의 2배를 준다. */
.ark-intro__inner { margin-top: 6.15vw; }
.ark-intro__inner .ark-btn-outline { margin-top: 3.75rem; }   /* 시안 실측 60px */

.ark-intro__arc {
    position: absolute;
    z-index: 0;
    width: 24.1%;     /* 463 / 1920 */
    height: 83.1%;    /* 925 / 1113 */
    overflow: visible;
}
/* 시안 실측(1920 폭, S2 높이 1108 기준)
   좌 아치: 가장 왼쪽 지점 x=150 → 아치 왼쪽 모서리 7.8%, 세로 중심 y=1569(abs)
   우 아치: 가장 오른쪽 지점 x=1696 → 왼쪽 모서리 64.2%, 위로 많이 빠져나감 */
.ark-intro__arc--left  { left: 7.8%;  top: 12.5%; }
.ark-intro__arc--right { left: 64.2%; top: -14.6%; }

.ark-intro__dots {
    position: absolute;
    z-index: 0;
    left: 27%;
    top: 12%;
    width: 33%;
    height: auto;
    pointer-events: none;
}
.ark-intro__glow {
    position: absolute;
    z-index: 0;
    left: -14%;
    bottom: -20%;
    width: 28%;
    height: auto;
    pointer-events: none;
}

/* 원형 이미지 — 지름은 시안 실측(158 / 301 / 454px)의 1920 대비 % */
.ark-circle {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    overflow: hidden;
    will-change: transform;
}
.ark-circle__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 시안 실측 지름(1x): 164 / 280 / 430 → 1920 대비 % */
.ark-circle--sm  { width:  8.5%; aspect-ratio: 1; left: 66.5%; top: 12.3%; }
.ark-circle--mid { width: 14.6%; aspect-ratio: 1; left: 16.0%; top: 19.5%; }
.ark-circle--lg  { width: 22.4%; aspect-ratio: 1; left: 68.2%; top: 45.1%; }

/* --------------------------------------------------------------------------
   S3. SOLUTION
   -------------------------------------------------------------------------- */
.ark-solution {
    position: relative;
    /* 워터마크가 nowrap 이라 좁은 화면에서 문서 폭을 밀어낸다 → 섹션에서 잘라낸다.
       워터마크 등장 애니메이션(x: -80 → 0)도 이 안에서 처리되므로 문제없다. */
    overflow: hidden;
    /* S2 가 고정 높이(58vw)이고 아래쪽에 여백이 많아, S3 상단 여백은 시안상 27px 뿐이다 */
    padding-block: clamp(1.5rem, 1.4vw, 1.7rem) 0;
    text-align: center;
}
/* 아래 간격은 전부 시안 실측(1x): 라벨→헤드라인 61, 헤드라인→카드 78, 카드→워터마크 110 */
.ark-solution .ark-headline { margin-top: 3.8rem; }

.ark-scard {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: clamp(2rem, 4vw, 4.875rem);
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    aspect-ratio: 1420 / 498;      /* 시안 실측 1418 x 498 */
    will-change: transform, opacity;
}

/* 배경만 스크롤에 따라 천천히 이동.
   소스(2840x1000)가 카드 크기와 정확히 같아 여유가 없다 → 세로 120% 로 확대해
   움직일 공간을 만든다. 2x 소스라 실사용 화질에는 영향 없음. */
.ark-scard__bg {
    position: absolute;
    left: 0;
    top: -10%;
    width: 100%;
    height: 120%;
    z-index: 0;
    will-change: transform;
}
.ark-scard__bg img,
.ark-scard__bg picture { width: 100%; height: 100%; object-fit: cover; display: block; }

.ark-scard__body {
    position: relative;
    z-index: 1;
    padding-inline: clamp(1.75rem, 3.2vw, 3.5rem);
    max-width: 34rem;
    color: #fff;
}
.ark-scard__label { font-size: .85rem; opacity: .85; }
.ark-scard__title {
    margin-top: .6rem;
    font-size: clamp(1.4rem, 1.9vw, 2.27rem);   /* 시안 실측 36.3px */
    font-weight: 700;
    letter-spacing: -.01em;
}
.ark-scard__desc {
    margin-top: 1rem;
    font-size: .875rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .8);
}
.ark-scard__body .ark-btn-outline { margin-top: 1.75rem; }


/* S3 SOLUTION - 전체 화면 너비 워터마크 */
.ark-solution .ark-watermark {
    
    margin: clamp(20px, 5.2vw, 64px) 0 0;

    left: 0;
    right: 0;
    width: 100%;
    max-width: none;

    
    padding: 0;

    font-size: 7.8vw;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.1;

    text-align: center;
    white-space: nowrap;
    color: #DDE7FF;
}


/* --------------------------------------------------------------------------
   S4. APPLICATION
   -------------------------------------------------------------------------- */
.ark-application {
    position: relative;
    overflow: hidden;
    padding-block: clamp(1.5rem, 1.6vw, 1.94rem) clamp(2.5rem, 3.15vw, 3.75rem);  /* 시안 상단 31 / 하단 60 */
    text-align: center;
}
.ark-application__dots {
    position: absolute;
    left: -6%;
    top: 8%;
    width: 26%;
    height: auto;
    z-index: 0;
    pointer-events: none;
}
.ark-application__glow {
    position: absolute;
    right: -10%;
    top: -14%;
    width: 46%;
    aspect-ratio: 1;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(39, 102, 248, .14) 0%, rgba(39, 102, 248, 0) 68%);
    pointer-events: none;
}
.ark-application > .site-container { position: relative; z-index: 1; }
/* 시안 실측 간격(1x): 라벨→헤드라인 150, 헤드라인→탭 133, 탭→카드 160 */
.ark-application .ark-headline { margin-top: 3.8rem; }

.ark-tabs {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 3vw, 3.5rem);
    margin-top: clamp(2rem, 3.4vw, 4.1rem);
    border-bottom: 1px solid var(--color-ink-200);
}
.ark-tabs__btn {
    padding: .85rem .25rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--color-ink-400);
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s, border-color .3s;
}
.ark-tabs__btn:hover { color: var(--color-ink-700); }
.ark-tabs__btn.is-active {
    color: var(--color-brand-500);
    border-bottom-color: var(--color-brand-500);
    font-weight: 700;
}

.ark-appslider {
    position: relative;
    z-index: 1;
    margin-top: clamp(2rem, 5.5vw, 6.6rem);
}
/* 시안 실측(1x): 카드 700x430, 슬라이드 간격 180, 화살표는 중심에서 ±430 */
.ark-appslide { width: min(700px, 86vw); text-align: center; }
.ark-appslide__media {
    border-radius: 20px;
    overflow: hidden;
    background: #f4f7fd;
    /* aspect-ratio: 700 / 430; */
    opacity: .5;
    transform: scale(.92);
    transition: transform .5s var(--ease-out-expo), opacity .5s;
}
.ark-appslide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swiper-slide-active .ark-appslide__media { opacity: 1; transform: scale(1); }

.ark-appslide__title,
.ark-appslide__desc { opacity: 0; transition: opacity .4s; }
.swiper-slide-active .ark-appslide__title,
.swiper-slide-active .ark-appslide__desc { opacity: 1; }

.ark-appslide__title {
    margin-top: 1.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-ink-900);
}
.ark-appslide__desc {
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--color-ink-400);
}

.ark-appslider__prev,
.ark-appslider__next {
    position: absolute;
    top: 30%;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(16, 40, 92, .12);
    cursor: pointer;
    transition: background .3s;
}
/* 시안 화살표는 중심에서 ±430px 에 "안쪽 모서리"가 온다.
   right 로 잡으면 바깥 모서리 기준이 되므로 버튼 폭(40)만큼 더 밀어야 맞다. */
.ark-appslider__prev { left: calc(50% - 430px); }
.ark-appslider__next { right: calc(50% - 470px); }
.ark-appslider__prev::before,
.ark-appslider__next::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--color-ink-500);
    border-right: 1.5px solid var(--color-ink-500);
}
.ark-appslider__prev::before { transform: translateX(2px) rotate(-135deg); }
.ark-appslider__next::before { transform: translateX(-2px) rotate(45deg); }
.ark-appslider__prev:hover,
.ark-appslider__next:hover { background: var(--color-brand-50); }

/* --------------------------------------------------------------------------
   S5. REFERENCE
   -------------------------------------------------------------------------- */
/* 시안 실측(1x): 섹션 1121, 상단 여백 115 / 하단 141 */
.ark-reference {
    position: relative;
    padding-block: clamp(3.5rem, 6vw, 7.2rem) clamp(4rem, 7.4vw, 8.8rem);
    overflow: hidden;
}
.ark-reference__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.ark-reference__head .ark-headline { margin-top: 1rem; }

/* ⚠️ overflow 는 반드시 hidden.
   visible 로 두면 12장짜리 3000px 트랙이 문서 폭을 그대로 늘려
   페이지 전체에 가로 스크롤이 생긴다(헤더까지 같이 늘어남).
   시안도 카드가 화면 양 끝에서 잘려 나가는 형태다. */
.ark-reftrack {
    margin-top: clamp(2rem, 3.2vw, 3.85rem);   /* 시안: 헤드 → 카드 상단까지 */
    overflow: hidden;
}
/* 등속 자동 흐름 — Swiper 기본 이징을 끈다 */
.ark-reftrack .swiper-wrapper { transition-timing-function: linear; }

/* 시안 실측(1x): 카드 452 x 564 = 4:5, 간격 36px.
   1920 화면에 4장이 들어가고 양 끝이 잘려 나간다. */
.ark-refcard {
    display: block;
    width: clamp(260px, 23.5vw, 452px);
    height: auto;
}
.ark-refcard__media {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.ark-refcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease-out-expo);
}
.ark-refcard__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-brand-500);
    opacity: 0;
    transition: opacity .4s;
}
.ark-refcard__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s .1s, transform .35s .1s;
}
.ark-refcard__more svg { width: 20px; height: 8px; }

.ark-refcard:hover .ark-refcard__img     { transform: scale(1.06); }
.ark-refcard:hover .ark-refcard__overlay { opacity: .85; }
.ark-refcard:hover .ark-refcard__more    { opacity: 1; transform: translateY(0); }

.ark-refcard__title {
    display: block;
    margin-top: 2.25rem;      /* 시안 실측 36px */
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-ink-900);
}

/* --------------------------------------------------------------------------
   S6. NEWS
   -------------------------------------------------------------------------- */
/* 시안 실측(1x): 섹션 높이 750, 상하 여백 각 135 */
.ark-news {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 7vw, 8.4rem);
    color: #fff;
}
.ark-news__dots {
    position: absolute;
    right: -4%;
    top: -10%;
    width: 30%;
    height: auto;
    opacity: .25;
    z-index: 0;
    pointer-events: none;
}
/* 시안 실측(1x): 좌측 칼럼 520px + 간격 46px + 리스트 854px = 1420 */
.ark-news__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 520px) 1fr;
    gap: clamp(2rem, 3.2vw, 2.875rem);
    align-items: start;
}
/* NEWS 헤드라인은 섹션 헤드라인(47px)보다 크다 — 시안 실측 52px */
.ark-news__head .ark-headline {
    margin-top: 1rem;
    font-size: clamp(1.6rem, 2.7vw, 3.25rem);
    line-height: 1.35;
}
.ark-news__head .ark-btn-outline { margin-top: 2.25rem; }

.ark-newslist { list-style: none; margin: 0; padding: 0; }
.ark-newslist li { border-bottom: 1px solid rgba(255, 255, 255, .25); transition: border-color .25s; }
.ark-newslist li:first-child { border-top: 1px solid rgba(255, 255, 255, .25); }
/* 시안 실측(1x): 한 행 96px */
.ark-newslist a {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 96px;
    padding-block: 1rem;
    color: #fff;
    transition: opacity .25s;
}
.ark-newslist__subject {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ark-newslist__date { flex: none; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.ark-newslist__arrow {
    width: 20px;
    height: 8px;
    flex: none;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s, transform .3s;
}

/* 시안이 블루 배경이라 "hover 시 파란색"이 성립하지 않는다.
   밝기 + 밑줄 강조 + 화살표 노출로 대체 (design/MAIN-INTERACTION.md S6) */
.ark-newslist li:hover { border-bottom-color: rgba(255, 255, 255, .8); }
.ark-newslist li:hover a { opacity: .75; }
.ark-newslist li:hover .ark-newslist__arrow { opacity: 1; transform: translateX(0); }

/* --------------------------------------------------------------------------
   반응형
   원형·아치를 시안 좌표 그대로 두면 좁은 화면에서 텍스트를 덮는다.
   태블릿 이하에서는 장식을 정리하고 세로 흐름으로 바꾼다.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* S2 가 auto 높이가 되면 아래 여백이 사라지므로 S3 상단 여백을 되살린다 */
    .ark-solution { padding-block: clamp(3rem, 8vw, 4.5rem) 0; }

    /* ----------------------------------------------------------------------
       S2 INTRO — 좁은 화면 (세로형 구도)

       시안은 모바일에서도 원형을 세로로 쌓지 않고 흩어진 구도를 유지한다.
       아치와 도트도 그대로 남아 큰 원을 그린다.
       ⚠️ 아래 % 는 전달받은 세로형 시안 "스크린샷"(약 844 x 1500)에서 추정한 값이다.
          원본 시안 파일을 받으면 데스크톱처럼 실측해서 확정할 것.
       ---------------------------------------------------------------------- */
    /* 시안 비율은 844:1500 (= 177.7vw) 이지만 그대로 두면 태블릿 폭에서
       섹션 하나가 1365px 까지 늘어난다. 상한을 걸어 세로로 과하게 길어지는 것만 막는다.
       (상한에 걸리면 구도가 세로로 조금 압축될 뿐 배치는 유지된다) */
    .ark-intro {
        height: min(177.7vw, 1000px);
        min-height: 560px;
        padding-block: 0;
    }

    /* 좌우 아치가 붙어 하나의 큰 원을 만든다 (preserveAspectRatio="none" 이라 늘어난다) */
    .ark-intro__arc { display: block; }
    .ark-intro__arc--left  { left: 17.2%; top: 19%; width: 40.6%; height: 60.3%; }
    .ark-intro__arc--right { left: 57.7%; top: 19%; width: 40.6%; height: 60.3%; }

    .ark-intro__dots {
        display: block;
        left: 15.4%;
        top: 20%;
        width: 71%;
    }
    .ark-intro__glow { left: -6%; bottom: -5%; width: 37%; }

    /* 원형은 절대 배치 유지 — 시안 구도 그대로 */
    .ark-circle      { position: absolute; margin: 0; }
    .ark-circle--sm  { width: 14.2%; left: 68.7%; top: 20.0%; }
    .ark-circle--mid { width: 24.2%; left:  8.1%; top: 23.7%; }
    .ark-circle--lg  { width: 38.5%; left: 58.6%; top: 60.9%; }

    /* 문구 블록은 세로 정중앙 (데스크톱의 6.15vw 오프셋 해제) */
    .ark-intro__inner { margin-top: 0; }
    .ark-intro__title { font-size: clamp(1.25rem, 5.2vw, 2.6rem); }
    .ark-intro__inner .ark-btn-outline { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

    .ark-scard { aspect-ratio: auto; min-height: 26rem; }
    .ark-news__inner { grid-template-columns: 1fr; }
    .ark-appslider__prev { left: 1rem; }
    .ark-appslider__next { right: 1rem; }
}

@media (max-width: 639px) {
    .ark-scard__body { max-width: none; padding-block: 2rem; }
    /* 탭이 넘칠 때 문서가 아니라 탭 줄만 가로 스크롤되도록 */
    .ark-tabs {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .ark-tabs::-webkit-scrollbar { display: none; }
    .ark-newslist a { flex-wrap: wrap; gap: .4rem 1rem; }
    .ark-newslist__subject { white-space: normal; flex-basis: 100%; }
}

/* NEWS — 공지사항 게시판에 글이 아직 없을 때 */
.ark-newslist__empty { padding: 2.5rem 0; color: rgba(255, 255, 255, .75); font-size: .95rem; }
