@charset "utf-8";

/* CSS Variables - Light Theme (메모리힐즈 키오스크 스타일) */
:root {
    --bg-color: #ffffff;         /* 전체 배경을 거의 순백에 가깝게 */
    --container-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #e5e5e5;
    --primary-color: #72624c;
    --primary-dark: #edd360;
	--primary-white: #ffffff;
    --accent-color: #edd360;
    --text-main: #222222;
	--text-white: #ffffff;
    --text-sub: #555555;
    --text-muted: #777777;
    --border-color: #dddddd;
    --input-bg: #f8f8f8;
    --font-family: "NanumSquareNeo", "Malgun Gothic", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: 400;
    letter-spacing: -0.5px;
    -webkit-text-size-adjust: none;
    word-break: keep-all;
}

a { text-decoration: none !important; color: inherit; }
img { border: 0; display: block; }
select::-ms-expand { display: none; }

html {
    overflow: hidden;
    height: 100vh;
    overscroll-behavior-x: none;   /* 좌우 스와이프 뒤로/앞으로 제스처 차단 (2026-09-07) */

    /* 배경 이미지 — attachment:fixed 는 iOS 사파리에서 어긋나게 그려진다.
       화면이 스크롤되지 않는 키오스크라 고정할 이유도 없어서 뺐다. */
    background: url("/kiosk/images/bg_kiosk.jpg") no-repeat center center;
    background-size: cover;

}

body {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;        /* 축소 배치라 스크롤이 생길 이유가 없다 */
    color: var(--text-main);
    overflow: hidden;
    background-color: transparent;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.70); /* ← 투명도 조절 */
    z-index: -1;
    pointer-events: none;
}


/* Kiosk Container — 세로형 1080x1920 (원본은 가로 1920x1080)
   화면 크기에 맞추는 방식: 1080x1920 좌표계를 그대로 두고 통째로 축소(scale)한다.
   요소별로 크기를 다시 잡는 반응형이 아니라서 어느 화면에서 봐도 디자인이 동일하다
   — 키오스크 실단말(1080x1920)은 1배, 모바일·데스크톱은 화면에 맞게 줄어든다.
   배율 계산은 include/meta.html 의 updateKioskTransform(). */
.container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1080px;              /* 고정 좌표계 — 뷰포트와 무관 */
    height: 1920px;
    transform: translateX(-50%); /* 배율은 JS 가 덧붙인다 */
    transform-origin: top center;
    background-color: transparent;   /* 카드 느낌 제거, 배경과 자연스럽게 */
    display: flex;
    flex-direction: column;
    padding: 40px;              /* 세로형: 좌우 여백 60 → 40 */
}

/* Header Row: 단색블록(좌) | 날씨·날짜(우) */
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    margin-bottom: 30px;
    flex-shrink: 0;
}
.header-block {
    /* 원본은 로고 이미지였다 — 우리는 시설 로고 자산이 없어 법인명 텍스트로 둔다
       (시스템 설정 > 시설 정보 > 법인명). 로고를 쓰게 되면 여기에 background 만 되살리면 된다. */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 60px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text-white);
    background-color: transparent;
}

.header-block img {
    width: auto;
    height: 100%;
    object-fit: contain;

    image-rendering: -webkit-optimize-contrast; /* 크롬 */
    image-rendering: crisp-edges;
    transform: translateZ(0); /* GPU 스케일링 방지 */
}


.header-info {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 18px;
    color: var(--text-white);
}
.header-info .weather { font-weight: 600; color: var(--text-white); }
.header-info .temp { font-weight: 600; color: var(--text-white); }
.header-info .dust { display: none; }   /* 세로형은 표시하지 않는다 — 가로형만 landscape.css 가 연다 (2026-10-20) */
.header-info .datetime { font-weight: 500; color: var(--text-white); }

/* Main Content Layout (2 Columns) */
.main-row {
    display: flex;
    flex-direction: column;     /* 세로형: 좌우 2열 → 위아래 2단 */
    flex: 1;
    gap: 30px;                  /* 세로형: 단 간격 50 → 30 */
    min-height: 0; /* Enable flex scrolling inside */
}

.col-left {
    flex: 0.7;                  /* 세로형: 위단 = 음성 검색 (검색창 확대 위해 축소, 2026-09-07) */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.col-right {
    flex: 1.3;                  /* 세로형: 아래단 = 이름검색 + 운영시간 + 공지 */
    min-height: 0;
    display: flex;              /* 세로형: 그리드 2행 → 세로 스택 */
    flex-direction: column;
    gap: 30px;
}

/* Typography Helpers */
.title {
    font-size: 36px;
    color: var(--text-white);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 10px;
}
.title span {
    color: var(--accent-color);
    font-weight: 700;
}

/* Card Style */
.card-box {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* --- Voice Search Section (Left Col) --- */
.search_voice {
    position: relative;         /* 세로형: voice-label 기준점을 이 카드로 */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg, #ffffff00, #1b110700);
    border: 1px solid #e5e5e5a1;
	box-shadow: 0 0 0 1px rgb(99 99 99 / 20%), 0 4px 12px rgb(0 0 0 / 31%);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
}

.search_voice .tit {
    font-size: 45px;
    line-height: 1.3;
    color: var(--text-white);
    margin-bottom: 30px;        /* 위단 축소에 맞춰 여백 줄임 (50 → 30) */
}

.search_voice span.sub {
    font-size: 18px;
    line-height: 1.3;
    color: var(--text-white);    
    letter-spacing:0.5px;
    font-weight:300;
}
.search_voice span.sub1 {
    font-size: 20px;   
    color: var(--text-white);    
    letter-spacing:5px;
    font-weight:300;
    font-size:15px;
}

.search_voice .btn {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}

/* 버튼+파형 공통 중심: .voice-btn-center 기준으로 파형이 버튼과 같은 중심에 위치 */
.search_voice .btn.voice-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
}
.search_voice .voice-btn-center {
    position: relative;
    width: 320px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* 방사형 파형: 돌 떨어뜨린 듯 버튼 중심에서 퍼져 나가며 바깥으로 갈수록 옅어짐 */
.search_voice .voice-ripples {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}
.search_voice .voice-ripples .ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160px;
    height: 160px;
    margin-left: -80px;
    margin-top: -80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    transform: scale(0.4);
    animation: rippleExpand 2.4s ease-out infinite;
}
.search_voice .voice-ripples .ripple:nth-child(1) { animation-delay: 0s; }
.search_voice .voice-ripples .ripple:nth-child(2) { animation-delay: 0.48s; }
.search_voice .voice-ripples .ripple:nth-child(3) { animation-delay: 0.96s; }
.search_voice .voice-ripples .ripple:nth-child(4) { animation-delay: 1.44s; }
.search_voice .voice-ripples .ripple:nth-child(5) { animation-delay: 1.92s; }
@keyframes rippleExpand {
    0% {
        transform: scale(0.4);
        opacity: 0.7;
        border-color: rgba(255, 255, 255, 0.55);
    }
    70% {
        opacity: 0.25;
        border-color: rgba(255, 255, 255, 0.2);
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
        border-color: rgba(255, 255, 255, 0);
    }
}
.search_voice .btn.on .voice-ripples .ripple {
    animation-duration: 1.6s;
    border-width: 2.5px;
}
.search_voice .btn.on .voice-ripples .ripple:nth-child(1) { animation-delay: 0s; }
.search_voice .btn.on .voice-ripples .ripple:nth-child(2) { animation-delay: 0.32s; }
.search_voice .btn.on .voice-ripples .ripple:nth-child(3) { animation-delay: 0.64s; }
.search_voice .btn.on .voice-ripples .ripple:nth-child(4) { animation-delay: 0.96s; }
.search_voice .btn.on .voice-ripples .ripple:nth-child(5) { animation-delay: 1.28s; }

.search_voice .btn .row {
    position: relative;
    z-index: 1;
    width: 160px;
    height: 160px;
    border-radius: 80px;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 24px rgba(46, 49, 146, 0.35);
}

.search_voice .btn .row img {
    height: 80px;
    filter: brightness(0) invert(1);
    transition: all 0.3s;
}

.search_voice .btn .row p {
    position: absolute;
    left: 180px;
    width: 200px;
    text-align: left;
    font-size: 28px;
    color: var(--text-main);
    opacity: 0;
    transition: all 0.3s;
    white-space: nowrap;
}

/* Voice Active State */
.search_voice .btn.on .row {
    width: 360px;
    background: var(--primary-dark);
    box-shadow: 0 0 24px rgba(46, 49, 146, 0.4);
}
.search_voice .btn.on .row img {
    margin-right: 180px;
    height: 50px;
    animation: pulse 1.5s infinite;
}
.search_voice .btn.on .row p {
    opacity: 1;
    left: auto;
    right: 40px;
    text-align: right;
    color: #fff;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Timeleft Counter */
.timeleft {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}
.search_voice .btn.on ~ .timeleft { opacity: 1; } /* Logic controlled by JS usually, but here helps layout */
.timeleft span {
    font-size: 60px;
    font-weight: 700;
    color: var(--primary-color);
}


/* --- Right Column: Notice & Text Search --- */

/* Notice Section - 남는 높이만 차지, 목록만 스크롤. 입력 영역이 열 하단에 맞게 올라옴 */
.notice {
    flex: 1 1 0%;
    min-height: 0;
    background: linear-gradient(145deg, #ffffff00, #1b110700);
    border: 1px solid #e5e5e5a1;
	box-shadow: 0 0 0 1px rgb(99 99 99 / 20%), 0 4px 12px rgb(0 0 0 / 31%);
    border-radius: 24px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notice .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dddddd7d;
}

.notice .head .tit {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-white);
}

.notice .head .more {    
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 16px;
    font-weight:300;
	color: var(--text-white);
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid #e5e5e5d4;
    
}
.notice .head .more:hover {
    background-color: var(--border-color);
    color: var(--text-main);
}

.notice .list {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.notice .list ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}
.notice .list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: rgb(114 98 76 / 22%);
    border-radius: 12px;
    transition: background 0.2s;
}
.notice .list li a:hover {
    background-color: rgb(114 98 76 / 22%);

}
.notice .list li a .tit {
    font-size: 20px;
    color: var(--text-white);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
    font-weight:300;
}
.notice .list li a .date {
    font-size: 16px;
    color: var(--text-white);
}


/* Text Search Section - 잘리지 않도록 고정 높이 영역 */
.search_enter {
    flex: 0 0 auto;
    background: linear-gradient(145deg, #ffffff00, #1b110700);
    border: 1px solid #e5e5e5a1;
	box-shadow: 0 0 0 1px rgb(99 99 99 / 20%), 0 4px 12px rgb(0 0 0 / 31%);
    border-radius: 24px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search_enter .tit {
    font-size: 26px;
    color: var(--text-white);
    margin-bottom: 20px;
    
}

.search_enter .enter {
    display: flex;
    gap: 15px;
}

.search_enter .in {
    flex: 1;
    position: relative;
}

.search_enter .in input {
    width: 100%;
    /* 검색 입력창 — 단말은 서서 멀리서 누르는 화면이라 넉넉해야 한다 (2026-09-07) */
    height: 96px;
    border-radius: 48px;
    background-color: var(--input-bg);
    border: 2px solid var(--border-color);
    color: var(--text-main);
    font-size: 28px;
    padding: 0 38px;
    outline: none;
    transition: border-color 0.3s;
}
.search_enter .in input:focus {
    border-color: var(--primary-color);
}
.search_enter .in input::placeholder {
    color: var(--text-muted);
}

.search_enter .in .close {
    position: absolute;
    right: 19px;
    top: 44%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.search_enter .in .close:hover {
    background-color: #ccc;
}
.search_enter .in .close img {
    width: 16px;
    filter: none;
    opacity: 0.7;
}

.search_enter .btn {
    width: 170px;
    height: 96px;               /* 입력창(96px)과 높이 맞춤 (2026-09-07) */
    border-radius: 48px;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46, 49, 146, 0.3);
    transition: transform 0.1s;
}
.search_enter .btn:active {
    transform: scale(0.98);
}
.search_enter .btn p {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
}
.search_enter .subtooltip {
    padding-left:200px;
    color: var(--text-white);
    margin-top: 10px;
    font-size: 16px;
    display: none;
}


/* 운영시간 섹션 전용 스타일 추가 (기존 스타일 유지) */
.operating_hours {
    flex: 0 0 auto;    
    border: 1px solid #e5e5e5a1;
    box-shadow: 0 0 0 1px rgb(99 99 99 / 20%), 0 4px 12px rgb(0 0 0 / 31%);
    border-radius: 24px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
}

.operating_hours .tit {
    font-size: 26px;    
    color: var(--text-white);
    margin-bottom: 20px;
}

.operating_hours .tit span {
   color: var(--text-white);
}

.operating_hours .content-flex {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.operating_hours .blue-info-card {
    flex: 1;
    background: var(--primary-color);
    border-radius: 25px 5px 25px 5px;
    padding: 25px 30px;
    color: #fff;
    position: relative;
}

.operating_hours .blue-info-card .time-text {
    font-size: 31px;   /* 단말에서 직접 키운 값 — 저장소에도 반영 (2026-09-07) */
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -1px;
    /* 노란 표식을 앞에 세우기 위한 기준 */
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 시간 앞 노란 막대 (2026-09-07 지시).
   문구가 자유입력으로 바뀌면서 숫자에 걸려 있던 <span> 강조가 사라졌다.
   마크업에 기대지 않고 어떤 문구를 넣어도 항상 붙도록 ::before 로 세운다. */
.operating_hours .blue-info-card .time-text::before {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 1.15em;
    border-radius: 4px;
    background: var(--accent-color);
}

.operating_hours .blue-info-card .time-text span {
    color: var(--accent-color);
}

.operating_hours .blue-info-card .sub-text {
    font-size: 17px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight:300;
}

.operating_hours .char-icon {
    width: 120px;
    flex-shrink: 0;
    margin-bottom: -5px;
}

.operating_hours .char-icon img {
    width: 100%;
    height: auto;
}


/* Voice Assistant Label Style */
.voice-label {
    position: absolute;
    top: 30px;                  /* 세로형: 카드 좌상단 기준 */
    left: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 9px;
    /* font-weight: 700; */
    letter-spacing: 5.5px;
    opacity: 0.9;
}

.voice-label .dot {
    width: 12px;
    height: 12px;
    background: #ff0000;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
    animation: blink 2s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}


/* --- List Page Styles --- */
.replace_search {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.replace_search span {
    /* 제목(36px) 바로 아래 줄이다. 20px 이면 격차가 커서 딸린 잔글씨로 읽혔는데,
       정작 '무엇으로 찾았는지' 를 말하는 줄이라 제목에 가깝게 둔다. */
    font-size: 30px;
    color: var(--text-white);
    font-weight: 500;
}

.user_list {
    /*background-color: var(--card-bg);
    border-radius: 20px;*/
    padding: 20px;
    width: 100%;
    margin:0 auto;
    max-width: 100%;            /* 세로형: 1600 → 컨테이너 폭 */
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
    overflow: hidden;    
    /*border: 1px solid var(--card-border);*/
}

/* List Table Header */
.user_list .head {
    display: flex;
    padding: 15px 0;
    border-bottom: 2px solid #edd360;
   background-color: rgb(114 98 76 / 47%);
    border-radius: 10px 10px 0 0;    
    justify-content: space-around;
}
.user_list .head p {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-white);
}
/* 헤더 폭은 본문(td)과 같아야 한다 — 어긋나면 항목명과 값이 다른 칸에 걸린다.
   목록 5칸: 구분 · 봉안일 · 봉안번호 · 고인명 · 보기 (2026-09-18) */
.user_list .head p:nth-child(1) { width: 14%; }
.user_list .head p:nth-child(2) { width: 18%; }
.user_list .head p:nth-child(3) { width: 25%; }
.user_list .head p:nth-child(4) { width: 23%; }
.user_list .head p:nth-child(5) { width: 20%; }

/* List Table Body */
.user_list .body {
    flex: 1;
    overflow-y: auto;
    /*padding-right: 10px;*/
}
/* Scrollbar */
.user_list .body::-webkit-scrollbar { width: 8px; }
.user_list .body::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
.user_list .body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.user_list .body::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

.user_list .body table { width: 100%; border-collapse: collapse; }
.user_list .body tr {
    border-bottom: 1px solid #e5e5e53d;
    box-shadow: 0 0 0 1px rgb(99 99 99 / 20%), 0 4px 12px rgb(0 0 0 / 31%);
    height: 70px;    
    transition: background 0.2s;
}
.user_list .body tr:hover { background-color: rgba(46, 49, 146, 0.06); }

.user_list .body td p {
    text-align: center;
    font-size: 18px;
    color: var(--text-white);
}
.user_list .body td p.name {
    font-weight: 700;
    color: var(--text-white);
}
/* 목록 칸 폭 — 구분 · 봉안일 · 봉안번호 · 고인명 · 보기 (2026-09-18)
   봉안번호('001실 001번')와 고인명이 실제로 읽히는 값이라 그쪽을 넓게 잡는다. */
.user_list .body td:nth-child(1) { width: 14%; }   /* 구분 */
.user_list .body td:nth-child(2) { width: 18%; }   /* 봉안일 */
.user_list .body td:nth-child(3) { width: 25%; }   /* 봉안번호 */
.user_list .body td:nth-child(4) { width: 23%; }   /* 고인명 */
.user_list .body td:nth-child(5) { width: 20%; text-align:center; }   /* 보기 */

.user_list .body td a {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 20px;
    background-color: var(--primary-color);
    color: var(--text-white);
    font-size: 16px;
    transition: all 0.2s;
}
.user_list .body td a:hover {
    background-color: var(--primary-dark);
    color: #000;
}


/* --- Detail Page Styles --- */
.detail-page .detail-row {
    display: flex;
    flex-direction: column;     /* 세로형: 정보(좌)/약도(우) → 정보(위)/약도(아래) */
    gap: 30px;
    flex: 1;
    min-height: 0;
}
.detail-page .detail-info {
    flex: 0 0 auto;             /* 세로형: 정보는 내용만큼 */
}
.detail-page .detail-map-wrap {
    flex: 1;                    /* 세로형: 남는 높이 전부 약도 */
    min-height: 0;
    display: flex;              /* 핵심 3항목 스트립 + 약도 세로 스택 (2026-09-07) */
    flex-direction: column;
    gap: 20px;
}

/* 약도 위 핵심 항목 — 봉안번호 · 고인명
   약도 칸 세로가 남아서 위쪽에 크게 박는다. 방문객이 봉안당까지 들고 가는 정보. */
.map-key-info {
    flex: 0 0 auto;
    display: flex;
    background-color: rgb(114 98 76 / 47%);
    border: 1px solid #e5e5e5a1;
    border-bottom: 2px solid var(--accent-color);
    border-radius: 20px;
    padding: 28px 20px;
}
.map-key-info .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.map-key-info .item + .item {
    border-left: 1px solid #ffffff2e;
}
.map-key-info .label {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--accent-color);
}
.map-key-info .value {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-white);
}

.user_list.detail {
    height: auto;
    max-height: none;
    margin: 0;
}
/* 상세는 '보기' 칸이 없어 4칸이다 — 목록(5칸) 폭을 그대로 쓰면 헤더와 값이 어긋난다.
   구분 · 봉안일 · 봉안번호 · 고인명 (2026-09-18). */
.user_list.detail .head p:nth-child(1), .user_list.detail .body td:nth-child(1) { width: 18%; }
.user_list.detail .head p:nth-child(2), .user_list.detail .body td:nth-child(2) { width: 22%; }
.user_list.detail .head p:nth-child(3), .user_list.detail .body td:nth-child(3) { width: 31%; }
.user_list.detail .head p:nth-child(4), .user_list.detail .body td:nth-child(4) { width: 29%; }

/* 흰 카드 배경 제거 (2026-09-07 지시) — 이미지 비율이 칸과 달라 남던 흰 여백이 거슬린다.
   배경·테두리를 걷어내고 이미지에 라운드를 직접 줘서, 보이는 영역 = 이미지 크기. */
.user_detail {
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-start;    /* 핵심 3항목 스트립 바로 아래 붙인다 */
}
/* ── 약도 위 위치 표시 (2026-09-08) ─────────────────────────────────────────
   '이 분이 계신 건물' 을 조감도 위에 얹는다. 위치는 비율 좌표(inline style)라 이미지
   크기가 달라져도 같은 자리를 가리킨다.

   붉은 표식은 경고처럼 읽혀 부담을 준다 — 반투명 흰 원이 천천히 번지는 정도로만 둔다.
   ⚠ 밝은 항공사진 위에서는 흰색만으로는 묻힌다. 뒤에 아주 옅은 어두운 헤일로를 깔아
     테두리를 살린다(그림자처럼 보여 표식 자체는 여전히 부드럽다).
   ⚠ 크기는 vw 가 아니라 px 다. 이 화면은 1080x1920 좌표계에 transform:scale 을 걸어 통째로
     줄인다 — vw 로 주면 뷰포트 기준으로 한 번, 컨테이너 배율로 또 한 번 줄어 실단말과
     미리보기의 크기가 달라진다. 나머지 스타일과 같은 px 로 맞춘다.
   ⚠ 래퍼는 이미지와 **정확히 같은 크기**여야 한다(inline-block + line-height:0).
     블록으로 두면 남는 여백까지 기준이 되어 표식이 엉뚱한 데로 간다. */
.user_detail .map_wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
}
.user_detail .map_pin {
    position: absolute;
    width: 0; height: 0;
    pointer-events: none;
}
.user_detail .map_pin > * {
    position: absolute;
    left: 0; top: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
/* 어두운 헤일로 — 배경과 분리해 주는 역할만. 경계가 보이면 안 된다 */
.user_detail .map_pin .halo {
    width: 185px; height: 185px;
    background: radial-gradient(circle,
                rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.20) 50%, rgba(0,0,0,0) 72%);
}
.user_detail .map_pin .ring {
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.22);
    border: 6px solid rgba(255,255,255,0.95);
    animation: mapPulse 2.8s cubic-bezier(.25,.6,.35,1) infinite;
}
/* 바깥으로 한 번 더 번지는 겹 — 시선을 끌되 소리 없이 */
.user_detail .map_pin .ring.d2 {
    background: none;
    border-width: 4px;
    border-color: rgba(255,255,255,0.55);
    animation-delay: 1.4s;
}
.user_detail .map_pin .dot {
    width: 18px; height: 18px;
    background: rgba(255,255,255,0.97);
    box-shadow: 0 0 13px rgba(0,0,0,0.35);
    animation: mapDot 2.8s ease-in-out infinite;
}
@keyframes mapPulse {
    0%   { transform: translate(-50%,-50%) scale(0.72); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.42); opacity: 0; }
}
@keyframes mapDot {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}
/* 애니메이션을 불편해하는 사람도 있다 — 시스템 설정을 따른다 */
@media (prefers-reduced-motion: reduce) {
    .user_detail .map_pin .ring,
    .user_detail .map_pin .dot { animation: none; }
    .user_detail .map_pin .ring { opacity: 0.95; transform: translate(-50%,-50%) scale(1); }
    .user_detail .map_pin .ring.d2 { display: none; }
}

.user_detail img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgb(99 99 99 / 20%), 0 4px 12px rgb(0 0 0 / 31%);
}
.user_detail .map_empty {
    margin-top: 60px;
    font-size: 24px;
    color: var(--text-white);
    opacity: 0.8;
}

.btn_box {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* 결과 목록 페이징 (2026-09-07) — 전건 한 페이지 렌더가 단말을 멎게 해서 15건씩 끊는다.
   서서 손으로 누르는 화면이라 버튼을 크게 잡는다. */
.paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 25px;
}
.paging .pg-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 80px;
    border-radius: 40px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46, 49, 146, 0.25);
}
.paging .pg-btn:hover {
    background-color: var(--primary-dark);
    color: #000;
}
.paging .pg-btn.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}
.paging .pg-info {
    min-width: 260px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-white);
}
.paging .pg-info em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 18px;
    font-weight: 300;
    opacity: 0.85;
}
.custom_btn, .basic_btn {
    padding: 20px 40px;
    height: 60px;
    width: 300px;               /* 세로형: 20% → 고정폭 (두 버튼 나란히) */
    margin:0 auto;
    border-radius: 30px;
    background-color: var(--primary-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46, 49, 146, 0.25);
    border: none;
    margin-top:30px;
   
}



.custom_btn:hover, .basic_btn:hover {
    background-color: var(--primary-dark);
    color:#000;
}


.custom_btn_print {
    padding: 0 40px;
    height: 60px;
    width: 300px;               /* 세로형: 86% → 고정폭 */
    margin:0 auto;
    border-radius: 30px;
    background-color: var(--primary-dark);
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46, 49, 146, 0.25);
    border: none;
    margin-top:30px;            /* 세로형: 목록으로 버튼과 같은 줄에 맞춤 */
}

.custom_btn_print:hover {
    background-color: var(--primary-white);
    color:#000;
}



.gray_btn {
    background-color: #e0e0e0;
    color: var(--text-sub);
    box-shadow: none;
}
.gray_btn:hover {
    background-color: #bdbdbd;
    color: #333;
}


/* --- Popups --- */
.popup_notice, .popup_printing, .popup_notice_detail, .popup_check {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    
}
.popup_notice.on, .popup_printing.on, .popup_notice_detail.on, .popup_check.on {
    opacity: 1;
    pointer-events: auto;

}

.popup_notice .row,
.popup_printing .row,
.popup_notice_detail .row,
.popup_check .row {
    background-color: var(--primary-color);
    margin:0 auto;
    width: 950px;
    max-width: 85vw;            /* 세로형: 50vw → 85vw */
    height: 60vh;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    border: 1px solid var(--border-color);
    color: var(--text-white);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);

    display: flex;
    flex-direction: column;
    align-items: stretch;   /* ★ 중앙정렬 제거 */
}

/* 공지 상세만 크게 (2026-09-07 지시: "화면에 꽉 차게, 이미지가 너무 작다").
   위 공용 규칙(950px·60vh)은 인쇄·확인 팝업이 함께 쓰므로 건드리지 않고 여기서만 덮는다.
   단말은 멀리서 보는 화면이라 공지는 넓게 펴는 편이 읽힌다. */
.popup_notice_detail .row {
    width: 1500px;
    max-width: 94vw;
    height: 90vh;
    padding: 44px 48px;
}
.popup_notice_detail .tit { font-size: 40px; }
.popup_notice_detail .body { font-size: 26px; line-height: 1.7; }

.popup_notice_detail .body{
    flex: 1;
    min-height: 0;      /* ★ flex 스크롤 필수옵션 */
    overflow-y: auto;
    margin: 20px 0;
    padding-right: 10px;
}


/* 모달 하단 '처음 화면을 보고 싶어요' — 원본 디자인엔 이 규칙이 없어서 본문 글과 구분이
   안 됐다(2026-08-20 지적). 상세 화면의 [인쇄하기] 와 같은 톤의 버튼으로 맞춘다. */
.popup_notice .btn,
.popup_notice_detail .btn{
    flex-shrink: 0;
    align-self: center;
    margin-top: 24px;
    padding: 0 48px;
    height: 72px;
    min-width: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 36px;
    background-color: var(--primary-dark);
    color: #000;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.popup_notice .btn:active,
.popup_notice_detail .btn:active{
    background-color: var(--primary-white);
    transform: scale(0.98);
}

/* 공지 목록(더 보기) 모달 — 목록·페이지도 규칙이 없어 맨몸으로 나온다 */
.popup_notice .list{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 20px 0 0;
}
.popup_notice .list ul{ display: flex; flex-direction: column; gap: 12px; }
.popup_notice .list li a{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    border-radius: 12px;
    background-color: rgba(255,255,255,0.10);
    color: var(--text-white);
}
.popup_notice .list li a .ft p{ font-size: 18px; opacity: .85; white-space: nowrap; }
.popup_notice .list li a .tit{
    flex: 1;
    font-size: 22px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.popup_notice .page{ flex-shrink: 0; margin-top: 18px; }
.popup_notice .page ul{ display: flex; justify-content: center; align-items: center; gap: 10px; }
.popup_notice .page li{
    min-width: 44px; height: 44px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 22px;
    color: var(--text-white);
    font-size: 20px;
    cursor: pointer;
}
.popup_notice .page li p.on{
    width: 44px; height: 44px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 22px;
    background-color: var(--primary-dark);
    color: #000;
    font-weight: 700;
}
.popup_notice .page li img{ height: 18px; }

/* 확인 팝업(맞아요/아니에요) — 두 개가 나란한 버튼으로 보여야 한다 */
.popup_check .btn{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.popup_check .btn a{
    min-width: 200px;
    height: 72px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 36px;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
}
.popup_check .btn a#popup_confirm{ background-color: var(--primary-dark); color: #000; }
.popup_check .btn a#popup_cancel{ background-color: rgba(255,255,255,0.15); color: var(--text-white); }

.popup_notice_detail .body::-webkit-scrollbar{
    width:12px;
}
.popup_notice_detail .body::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.25);
    border-radius:10px;
}
.popup_notice_detail .body::-webkit-scrollbar-track{
    background:transparent;
}


.popup_check .row {
    width: 500px;
    height: auto;
    text-align: center;
}

.popup_notice .row .tit, .popup_printing .row .tit, .popup_notice_detail .row .tit {
   font-size: 28px;
    font-weight: 400;
    color: var(--text-white);
    border-bottom: 1px solid #dddddd36;
    padding-bottom: 20px;
    margin-bottom: 20px;
    line-height:1.5;
}

.popup_notice .close, .popup_printing .close, .popup_notice_detail .close, .popup_check .close {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46, 49, 146, 0.3);
}
.popup_notice .close img, .popup_printing .close img, .popup_notice_detail .close img, .popup_check .close img {
    width: 24px;
    filter: brightness(0) invert(1);
}

.keypad {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 1080px;              /* 컨테이너와 같은 좌표계 */
    transform: translateX(-50%); /* 배율은 JS 가 덧붙인다 */
    transform-origin: bottom center;
    z-index: 2000;
    display: none;
    background-color: #f0f0f0;
    border-top: 1px solid #ddd;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

/* Utilities */
.noprint { }
@media print {
    .noprint { display: none !important; }
    html, body { background: #fff; height: auto; overflow: visible; }
    .container { width: 100%; height: auto; box-shadow: none; padding: 0; background: none; }
    .user_list, .user_detail { border: none; box-shadow: none; color: #000; }
    .user_list .head p, .user_list .body td p { color: #000; }
    /* 핵심 3항목 스트립 — 화면은 흰 글자라 그대로 찍으면 안 보인다 */
    .map-key-info { background: none; border-color: #000; }
    .map-key-info .label { color: #000; }
    .map-key-info .value { color: #000; }
}





/* ═══════════════════════════════════════════════════════════════════════════
   모바일 검색결과 목록 (2026-09-08)

   이 화면은 키오스크 단말과 **같은 주소를 폰에서도** 연다. 종전에는 1080x1920 좌표계를
   통째로 축소해 폰에 맞췄는데, 폰 폭 390px 에서 배율이 0.36 배라
       목록 글자 18px → 실제 6.5px · 행 높이 70px → 25px
   로 찍혔다. 작아 보이는 정도가 아니라 못 읽고, 손가락도 안 맞는다(권장 44px).

   폭을 그대로 두고 글자만 키울 수는 없다 — 390px 에 칸이 5개면 칸당 78px 다.
   그래서 좁은 화면에서는 배율을 걷어내고(include/meta.html 이 html 에 .kiosk-fluid 를
   붙인다) 표를 **한 건 = 한 카드**로 바꾼다. 시선 순서대로 세 줄이다.
       1줄 고인명(찾는 값) + 구분 + 열기
       2줄 봉안번호             — '어디에 계신가'
       3줄 봉안일               — '언제'
   머리글 행이 없어지므로 각 칸이 제 이름을 data-label 로 들고 와 앞에 붙인다.

   ⚠ 키오스크(1080px)·데스크톱은 이 블록에 아예 들어오지 않는다. 배율 방식 그대로다.
   ⚠ 크기는 배율을 안 먹으니 여기 px 는 화면에 찍히는 실제 px 다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 카드가 세로로 길어지므로 스크롤을 연다 — 좌우 스와이프 차단은 그대로 둔다 */
html.kiosk-fluid,
html.kiosk-fluid body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100%;
}
html.kiosk-fluid .container {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    transform: none;            /* JS 가 인라인 배율을 지운 뒤 이게 적용된다 */
    padding: 16px 14px 30px;
}

html.kiosk-fluid .header-row  { height: auto; margin-bottom: 14px; flex-wrap: wrap; gap: 4px 10px; }
html.kiosk-fluid .header-block { height: auto; font-size: 17px; }
html.kiosk-fluid .header-info  { font-size: 13px; gap: 10px; }
html.kiosk-fluid .title        { font-size: 20px; line-height: 1.35; margin-bottom: 6px; }
html.kiosk-fluid .replace_search { margin-bottom: 14px; }
/* 검색 결과 안내 — 위 제목(20px)에 가깝게 키운다. 14px 은 제목과 격차가 커서
   딸린 잔글씨로 읽혔는데, 정작 '무엇으로 찾았는지' 를 말하는 줄이다. */
html.kiosk-fluid .replace_search span { font-size: 18px; }

html.kiosk-fluid .user_list { padding: 0; overflow: visible; }
html.kiosk-fluid .user_list .head { display: none; }   /* 카드라 머리글 행이 뜻이 없다 */
html.kiosk-fluid .user_list .body { overflow: visible; }
html.kiosk-fluid .user_list .body table,
html.kiosk-fluid .user_list .body tbody { display: block; width: 100%; }

/* 한 건 = 한 카드. min-height 92px 는 손가락 기준(44px)을 넉넉히 넘긴다. */
html.kiosk-fluid .user_list .body tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 5px;
    height: auto;
    min-height: 92px;
    padding: 14px 15px;
    margin-bottom: 10px;
    border-bottom: 0;
    border-radius: 14px;
    /* ⚠ 키오스크보다 진하다. 폰에서는 페이지가 스크롤되는데 배경 사진은 같이 흐르지 않아서,
       아래쪽 카드가 사진의 밝은 나무 부분에 얹힌다. 반투명 38% 로는 흰 글씨 대비가 2.8:1
       까지 떨어져 14px 보조 글씨가 읽히지 않았다. 어디에 얹혀도 9:1 이상 나오게 눌러 담는다. */
    background-color: rgb(38 31 23 / 78%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 12%), 0 4px 14px rgb(0 0 0 / 34%);
}
html.kiosk-fluid .user_list .body tr:hover  { background-color: rgb(38 31 23 / 78%); }
html.kiosk-fluid .user_list .body tr:active { background-color: rgb(58 48 36 / 88%); }
html.kiosk-fluid .user_list .body td { display: block; width: auto; }

/* 줄바꿈 지점을 못박는다 — flex 의 줄나눔은 늘어나기 전(flex-basis) 폭으로 정해져서,
   내버려두면 짧은 이름일 때 봉안번호가 1줄에 딸려 올라간다. 폭 0 짜리 칸막이를 끼운다. */
html.kiosk-fluid .user_list .body tr::before,
html.kiosk-fluid .user_list .body tr::after { content: ""; flex: 0 0 100%; height: 0; }
html.kiosk-fluid .user_list .body tr::before { order: 4; }   /* 1줄 | 2줄 */
html.kiosk-fluid .user_list .body tr::after  { order: 7; }   /* 2줄 | 3줄 */
html.kiosk-fluid .user_list .body td p { text-align: left; }

/* 1줄 — 고인명이 가장 먼저 눈에 들어와야 한다 */
html.kiosk-fluid .user_list .body td.c-name   { order: 1; flex: 1 1 auto; min-width: 0; }
html.kiosk-fluid .user_list .body td.c-name p { font-size: 25px; font-weight: 700; }

html.kiosk-fluid .user_list .body td.c-type   { order: 2; flex: 0 0 auto; }
html.kiosk-fluid .user_list .body td.c-type p {
    font-size: 13px;
    padding: 4px 11px;
    border-radius: 999px;
    background-color: rgb(255 255 255 / 16%);
}

html.kiosk-fluid .user_list .body td.c-view   { order: 3; flex: 0 0 auto; }
html.kiosk-fluid .user_list .body td.c-view a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 14%);
    color: var(--text-white);
    font-size: 0;               /* '보기' 글자는 감추고 화살표만 — 링크는 살려 둔다 */
}
html.kiosk-fluid .user_list .body td.c-view a::after {
    content: "\203A";
    font-size: 30px;
    line-height: 1;
    margin-top: -5px;
}

/* 2줄 — 실제로 찾아갈 값이라 강조색을 준다. */
html.kiosk-fluid .user_list .body td.c-unit   { order: 5; flex: 0 1 auto; }
html.kiosk-fluid .user_list .body td.c-unit p {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-color);
}

/* 3줄 — 보조 정보. 머리글이 없으니 칸 이름을 앞에 붙인다. */
html.kiosk-fluid .user_list .body td.c-date  { order: 8; }
html.kiosk-fluid .user_list .body td.c-date { display: flex; align-items: baseline; gap: 5px; }
html.kiosk-fluid .user_list .body td.c-date::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 12px;
    color: var(--accent-color);
    opacity: 0.75;
}
html.kiosk-fluid .user_list .body td.c-date p { font-size: 14px; opacity: 0.9; }

/* 결과 없음 행은 카드가 아니다 */
/* ⚠ :has() 를 쓰면 지원 안 하는 브라우저에서 규칙 전체가 무효가 된다 — 클래스로 짚는다 */
html.kiosk-fluid .user_list .body tr.empty-row { display: block; text-align: center; min-height: 0; }
html.kiosk-fluid .user_list .body td[colspan] { width: 100%; font-size: 16px; padding: 22px 0; color: var(--text-white); }

html.kiosk-fluid .paging { gap: 8px; margin-top: 18px; flex-wrap: wrap; }
html.kiosk-fluid .paging .pg-btn {
    width: auto;
    min-width: 92px;
    height: 50px;
    padding: 0 16px;
    border-radius: 25px;
    font-size: 16px;
}
html.kiosk-fluid .paging .pg-info    { min-width: 0; flex: 1 1 90px; font-size: 15px; }
html.kiosk-fluid .paging .pg-info em { font-size: 12px; }

html.kiosk-fluid .basic_btn {
    width: 100%;
    max-width: 420px;
    height: 56px;
    padding: 0 20px;
    margin-top: 22px;
    border-radius: 28px;
    font-size: 17px;
}

/* ⚠ 빈 값 감추기는 맨 뒤여야 한다 — 위 c-date 의 display:flex 와
   특이도가 같아서(0,4,2) 순서로만 이긴다. 앞으로 옮기면 라벨만 남은 칸이 되살아난다. */
html.kiosk-fluid .user_list .body td.blank { display: none; }


/* ═══ 반환 표시 (2026-09-08) ══════════════════════════════════════════════
   반환된 분도 검색된다 — 방문객이 봉안당까지 갔다가 허탕치지 않게 하려는 것이다.
   그래서 '찾을 수 있게' 가 아니라 '없다는 걸 알게' 가 목적이다. 눈에 먼저 들어와야 한다.
   ⚠ 붉은색은 쓰지 않는다. 경고가 아니라 사실 전달이고, 유족이 보는 화면이다.
   ═══════════════════════════════════════════════════════════════════════ */

/* 목록·상세 — '구분' 칸에 반환이라고 쓴다. 봉안일·봉안번호는 아예 비운다(화면 파일에서). */
.user_list .body td.c-type p.ret,
.user_list.detail .body td p.ret {
    color: var(--accent-color);
    font-weight: 700;
}

/* 상세 — 맨 위 안내. 표보다 먼저 읽혀야 한다. */
.ret-notice {
    width: 100%;
    margin: 0 0 22px;
    padding: 20px 26px;
    border-radius: 16px;
    border: 2px solid var(--accent-color);
    background-color: rgb(237 211 96 / 14%);
    color: var(--text-white);
    text-align: center;
    line-height: 1.5;
}
.ret-notice b { display: block; font-size: 30px; font-weight: 700; }
.ret-notice span {
    display: inline-block;
    margin-top: 8px;
    font-size: 22px;
    color: var(--accent-color);
    font-weight: 600;
}

/* 모바일 — 구분 알약이 그대로 '반환' 이 된다 */
html.kiosk-fluid .user_list .body td.c-type p.ret {
    background-color: rgb(237 211 96 / 20%);
    border: 1px solid var(--accent-color);
}
html.kiosk-fluid .ret-notice { margin-bottom: 14px; padding: 14px 16px; border-radius: 12px; }
html.kiosk-fluid .ret-notice b { font-size: 17px; }
html.kiosk-fluid .ret-notice span { font-size: 14px; margin-top: 5px; }