@charset "utf-8";
/* ==========================================================
   영수증 인용 스킨 (quote_receipt)
   ① 색 · 글씨 : 아래 변수만 바꾸면 전체가 바뀌어요
   ========================================================== */
@font-face { font-family: "QR Galmuri"; src: url("./fonts/Galmuri11.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "QR Galmuri"; src: url("./fonts/Galmuri11-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "QR Archivo"; src: url("./fonts/ArchivoBlack.woff2") format("woff2"); font-weight: 400; font-display: swap; }

.qr-board {
    /* ① 색 */
    --qr-paper: #f2eee4;              /* 종이 색 (위시리스트 위젯과 같은 색) */
    --qr-ink: #2e2a26;                /* 인쇄 글씨 색 */
    --qr-rule: #7a7268;               /* 점선 색 */
    --qr-hl: rgba(217, 116, 138, .42);/* 형광펜 색 */
    --qr-old: 214, 188, 130;          /* 오래되면 누레지는 색 (R, G, B) */
    --qr-gap-x: 30px;                 /* 영수증 사이 가로 간격 */
    --qr-gap-y: 40px;                 /* 영수증 사이 세로 간격 */
    --qr-card-max: 270px;             /* 목록 영수증 최대 폭 */
    --qr-crease: .7;                  /* 구김 진하기 (0 이면 구김 없음, 1 이면 아주 진하게) */

    /* 목록 맨 위 제목 · 버튼 색 — 기본은 홈페이지 색을 그대로 따라가요 */
    /* 내 색: 아래 두 줄이 있으면 그 색, 주석으로 감싸서 끄면 홈페이지 색을 따라가요 */
    --qr-my-ink: #3e4a34;
    --qr-my-glow: rgba(246, 236, 218, .75);

    --qr-head-ink: var(--qr-my-ink, var(--content-font-color, #2e2a26));   /* 건드리지 않아도 돼요 */
    --qr-head-glow: var(--qr-my-glow, rgba(255, 255, 255, .85));          /* 건드리지 않아도 돼요 */
    --qr-btn-main-bg: var(--btn-primary-bg, var(--primary-color, #2e2a26)); /* 글쓰기 버튼 바탕 */
    --qr-btn-main-fg: var(--btn-primary-text, #ffffff);                  /* 글쓰기 버튼 아이콘 */
    --qr-btn-fg: var(--primary-color, var(--content-font-color, #2e2a26)); /* 나머지 버튼 아이콘 */

    /* 본문(인용글) 글씨체: 홈페이지 폰트 관리에 등록된 이름을 맨 앞에 적어주세요 */
    --qr-body-font: "BookkMyungjo", "QR Galmuri", serif;

    /* ② 질감 (건드리지 않아도 돼요) */
    --qr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .30  0 0 0 0 .22  0 0 0 0.34 -.06'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url%28%23n%29'/%3E%3C/svg%3E");
    --qr-torn-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='36' viewBox='0 0 300 36' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,3.2 L4.6,4.2 L7.9,6.4 L9.7,3.5 L13.0,12.1 L17.3,5.1 L22.5,9.8 L27.7,6.7 L30.9,5.3 L34.1,7.8 L36.6,6.7 L39.2,6.0 L43.0,9.3 L48.4,10.8 L51.3,10.3 L56.5,9.3 L60.7,9.1 L65.7,12.1 L69.6,8.6 L74.3,10.8 L78.0,12.5 L81.0,11.5 L85.6,12.2 L89.0,16.0 L94.5,13.3 L96.6,13.1 L101.2,13.6 L103.7,13.7 L107.5,13.8 L111.2,22.6 L115.9,16.5 L120.7,15.1 L123.9,13.2 L127.7,14.2 L131.1,15.2 L134.8,16.8 L138.1,14.2 L140.3,17.1 L145.0,18.5 L147.5,18.9 L149.3,21.1 L151.8,15.8 L154.7,15.8 L158.3,16.6 L162.7,18.3 L166.1,16.6 L169.3,17.6 L174.4,19.6 L178.3,24.4 L180.4,21.1 L184.7,21.2 L187.1,22.9 L190.6,19.6 L193.7,21.5 L197.7,19.4 L203.1,23.7 L208.0,21.4 L212.5,22.3 L214.0,30.9 L219.4,23.6 L224.4,26.0 L227.9,23.4 L230.2,25.0 L232.5,22.5 L235.2,24.6 L240.2,30.7 L243.0,27.6 L245.8,24.1 L250.7,28.0 L255.7,27.2 L261.2,25.5 L263.0,25.3 L265.4,28.4 L270.2,26.9 L272.9,29.5 L278.2,30.0 L281.9,29.9 L286.9,30.3 L289.7,29.7 L292.7,29.7 L294.6,28.4 L298.3,31.9 L300,30 L300,0 Z' fill='black'/%3E%3C/svg%3E");
    --qr-torn-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='36' viewBox='0 0 300 36' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,32.2 L1.7,27.9 L6.2,30.3 L10.1,29.7 L12.2,28.7 L16.6,31.0 L20.3,28.1 L21.9,26.0 L24.7,27.4 L28.3,28.0 L29.9,26.8 L33.5,29.7 L35.7,29.0 L40.1,28.7 L44.8,25.7 L50.1,24.4 L54.5,25.5 L57.9,27.4 L62.8,24.3 L67.9,24.4 L73.1,25.2 L75.4,23.1 L77.6,25.7 L82.7,22.5 L87.1,23.1 L91.2,23.1 L93.5,22.6 L97.5,20.2 L101.9,23.8 L106.4,19.4 L109.0,20.0 L110.9,21.2 L113.4,19.5 L116.6,26.2 L118.8,21.3 L124.1,17.8 L125.7,18.8 L127.8,18.3 L130.8,17.3 L132.9,17.1 L136.9,20.2 L139.8,16.6 L144.3,19.6 L148.8,19.8 L152.2,16.5 L155.0,15.7 L160.0,15.4 L163.1,17.0 L168.4,15.4 L171.6,14.0 L173.6,17.6 L175.5,16.6 L181.0,17.6 L183.4,15.1 L187.3,15.6 L191.6,13.5 L195.2,16.6 L197.1,15.3 L199.0,12.5 L201.4,14.0 L204.2,14.3 L209.3,15.5 L212.5,13.1 L214.2,12.5 L216.4,10.7 L219.4,12.5 L223.4,11.1 L226.3,9.6 L228.2,10.8 L232.4,9.1 L235.6,11.1 L239.4,8.8 L242.4,12.7 L246.9,8.8 L250.0,9.8 L253.1,7.9 L254.9,11.3 L260.3,15.7 L264.9,9.9 L267.8,8.4 L270.4,8.5 L275.7,9.4 L280.5,6.6 L284.0,6.1 L288.2,9.0 L293.0,4.6 L298.5,4.4 L300,6 L300,0 Z' fill='black'/%3E%3C/svg%3E");
    --qr-torn-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='36' viewBox='0 0 300 36' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,7.7 L3.0,9.7 L4.7,6.9 L7.3,8.1 L10.7,11.2 L14.7,8.2 L19.7,10.2 L23.9,8.3 L27.7,16.1 L31.1,11.8 L35.5,13.0 L40.2,11.0 L45.2,9.6 L47.6,13.9 L51.6,11.0 L54.6,11.4 L58.5,14.3 L63.7,14.3 L67.9,11.2 L73.2,15.1 L77.6,12.0 L81.4,19.0 L86.8,11.9 L90.0,12.4 L94.5,21.6 L96.2,15.5 L101.2,17.0 L106.7,14.1 L110.6,13.0 L113.8,16.0 L115.4,17.3 L120.8,17.7 L124.1,16.1 L128.0,16.5 L133.3,16.6 L137.6,15.5 L143.1,17.2 L144.6,16.8 L146.2,17.8 L147.9,18.0 L152.1,16.9 L156.6,21.3 L161.9,17.0 L165.8,17.5 L168.6,17.9 L171.3,18.1 L172.9,19.1 L175.6,17.6 L178.1,17.6 L182.4,17.4 L185.2,21.1 L190.1,18.2 L194.2,21.9 L196.6,18.3 L198.9,21.7 L201.1,19.3 L205.2,22.1 L207.2,19.7 L209.8,20.2 L213.0,20.6 L215.1,18.8 L220.1,23.8 L225.4,23.8 L229.9,23.6 L233.5,21.2 L235.9,20.3 L238.5,30.6 L242.8,24.8 L247.9,29.4 L250.1,22.2 L253.7,23.0 L257.6,22.8 L262.6,23.8 L265.5,22.6 L270.3,22.7 L275.4,26.1 L277.0,25.3 L278.7,23.7 L282.3,24.6 L286.9,26.4 L288.9,23.3 L293.8,23.7 L296.6,24.9 L300,26 L300,0 Z' fill='black'/%3E%3C/svg%3E");
    --qr-crumple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.006 .011' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='3.2' diffuseConstant='1.05'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='420' height='420' filter='url%28%23f%29'/%3E%3C/svg%3E");
    --qr-crinkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .075' numOctaves='2' seed='7' result='t'/%3E%3CfeSpecularLighting in='t' surfaceScale='7' specularConstant='.85' specularExponent='38' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='215' elevation='36'/%3E%3C/feSpecularLighting%3E%3C/filter%3E%3Crect width='120' height='34' fill='%23fff' filter='url%28%23c%29'/%3E%3C/svg%3E");
}

/* ── 배경 ── */
.qr-board { max-width: 100%; box-sizing: border-box; }
.qr-board.has-bg { position: relative; isolation: isolate; padding: 22px 18px 28px; border-radius: 14px; }
.qr-bg { pointer-events: none; background-position: center; }
.qr-bg-cover { background-size: cover; background-repeat: no-repeat; }
.qr-bg-tile  { background-size: auto; background-repeat: repeat; }
.qr-bg-board { position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.qr-bg-full  { position: fixed; inset: 0; z-index: -1; }

/* ── 영수증 벽 ── */
.qr-wall {
    --qr-cols: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* 영수증이 적어도 가운데로 모여요 */
    align-items: flex-start;
    gap: var(--qr-gap-y) var(--qr-gap-x);
    width: 100%;
    max-width: calc(var(--qr-cols) * var(--qr-card-max) + (var(--qr-cols) - 1) * var(--qr-gap-x) + 16px);
    margin: 0 auto;
    padding: 26px 8px 30px;
    box-sizing: border-box;
}
.qr-wall[data-cols="1"] { --qr-cols: 1; }
.qr-wall[data-cols="2"] { --qr-cols: 2; }
.qr-wall[data-cols="4"] { --qr-cols: 4; }
.qr-wall[data-cols="5"] { --qr-cols: 5; }
.qr-wall[data-cols="6"] { --qr-cols: 6; }
.qr-wall > .qr-item {
    flex: 0 0 calc((100% - (var(--qr-cols) - 1) * var(--qr-gap-x)) / var(--qr-cols));
    max-width: var(--qr-card-max);
    min-width: 0;
}
.qr-item { width: 100%; max-width: var(--qr-card-max); justify-self: center; }
.qr-item { position: relative; transform: rotate(var(--rot, 0deg)); transition: transform .25s ease; }
.qr-item:hover { transform: rotate(0deg) translateY(-3px); z-index: 2; }
.qr-card {
    display: block; position: relative; color: var(--qr-ink); text-decoration: none !important;
    filter: drop-shadow(0 1px 1px rgba(40, 40, 40, .25)) drop-shadow(3px 6px 6px rgba(40, 40, 40, .18));
}
.qr-card:hover, .qr-card:focus { color: var(--qr-ink); }
.qr-item.is-current .qr-card { filter: drop-shadow(0 0 0 2px var(--qr-hl)) drop-shadow(3px 6px 6px rgba(40, 40, 40, .2)); }

/* 종이 */
.qr-paper {
    position: relative;
    --qr-tear: var(--qr-torn-a);
    padding: 30px 18px 46px;
    background-color: var(--qr-paper);
    background-image: var(--qr-grain);
    /* 아래쪽 비스듬히 찢긴 가장자리 */
    -webkit-mask: var(--qr-tear) bottom / 100% 36px no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - 35px) no-repeat;
            mask: var(--qr-tear) bottom / 100% 36px no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - 35px) no-repeat;
    font-family: "QR Galmuri", "DungGeunMo", monospace;
    font-size: 12px; line-height: 1.6; letter-spacing: 0;
    word-break: keep-all; overflow-wrap: anywhere;
}
.qr-paper.tear-b { --qr-tear: var(--qr-torn-b); }
.qr-paper.tear-c { --qr-tear: var(--qr-torn-c); }
/* 구겨진 종이 질감 (영수증마다 구김 위치가 달라요) */
.qr-paper::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image:
        linear-gradient(var(--fa, 28deg), transparent 49.7%, rgba(90, 80, 66, .10) 50%, rgba(255, 255, 255, .45) 50.35%, transparent 50.9%),
        linear-gradient(var(--fb, 112deg), transparent 49.7%, rgba(90, 80, 66, .08) 50%, rgba(255, 255, 255, .35) 50.3%, transparent 50.8%),
        var(--qr-crumple);
    background-size: 100% 100%, 100% 100%, 420px 420px;
    background-position: 0 0, 0 0, var(--cx, 0) var(--cy, 0);
    mix-blend-mode: multiply;
    opacity: var(--qr-crease);
}
/* 감열지 바램: --age 0(새 글) ~ 1(1년 지난 글) */
.qr-paper::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(var(--qr-old), calc(var(--age, 0) * .5)) 100%),
        rgba(var(--qr-old), calc(var(--age, 0) * .22));
    mix-blend-mode: multiply;
}
.qr-print {
    --fade: calc(1 - var(--age, 0) * .55);
    position: relative; z-index: 2;
    color: color-mix(in srgb, var(--qr-ink) calc(var(--fade) * 100%), transparent);
    transition: color .5s ease;
}
.qr-print .qr-dash, .qr-print .qr-rule2 { opacity: var(--fade); transition: opacity .5s ease; }
.qr-print canvas, .qr-print .qr-src { opacity: var(--fade); transition: opacity .5s ease; }
/* 마우스를 올리거나(목록) 눌렀을 때(글보기) 다시 또렷하게 */
.qr-card:hover .qr-print, .qr-paper.is-fresh .qr-print { --fade: 1; }

/* 테이프 */
.qr-tape {
    position: absolute; top: -12px; left: 50%; z-index: 3;
    width: 84px; height: 26px; margin-left: -42px;
    background: rgba(255, 255, 255, .38); background-image: var(--qr-crinkle);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset;
    transform: rotate(var(--tr, -2deg));
    clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 100% 0, 97% 12%, 100% 25%, 97% 40%, 100% 55%, 97% 70%, 100% 85%, 97% 100%, 0 100%, 3% 85%, 0 70%, 3% 55%, 0 40%, 3% 25%);
}

/* 영수증 속 글자들 */
.qr-lbl   { text-align: center; letter-spacing: 6px; font-size: 11px; opacity: .75; }
.qr-cate  { text-align: center; font-size: 10px; letter-spacing: 1px; margin-top: 6px; opacity: .7; }
.qr-cate::before, .qr-cate::after { content: " · "; }
.qr-shop  { text-align: center; font-weight: 700; font-size: 15px; line-height: 1.4; margin: 10px 0 0; padding: 0; color: inherit; font-family: inherit; }
.qr-who   { text-align: center; font-size: 11px; opacity: .75; margin-top: 2px; }
.qr-rule2 { border-top: 3px double currentColor; margin: 10px 0 6px; }
.qr-meta  { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.qr-dash  { border-top: 1px dashed var(--qr-rule); margin: 8px 0; }
.qr-quote { font-family: var(--qr-body-font); font-size: 13px; line-height: 1.85; margin: 4px 0; white-space: normal; }
.qr-quote strong { font-weight: 700; }
.qr-quote em { font-style: italic; }
.qr-quote del { text-decoration: line-through; text-decoration-thickness: 1px; }
.qr-memo  { font-size: 11px; line-height: 1.6; margin-top: 2px; }
.qr-foot  { text-align: center; font-size: 10px; letter-spacing: 1px; margin-top: 8px; opacity: .7; }
.qr-cmt   { position: absolute; right: 0; bottom: -4px; font-size: 10px; opacity: .6; }
.qr-locked { text-align: center; padding: 14px 0; font-size: 11px; opacity: .7; }
.qr-locked .fa { display: block; font-size: 16px; margin-bottom: 4px; }
.qr-item.is-notice .qr-lbl { letter-spacing: 4px; font-weight: 700; opacity: 1; }

/* 형광펜: 인쇄가 바래도 형광펜은 그대로 */
.qr-hl {
    color: inherit; padding: 0 .15em;
    background: linear-gradient(100deg, transparent .3em, var(--qr-hl) .5em, var(--qr-hl) calc(100% - .4em), transparent calc(100% - .2em)) 0 75% / 100% 70% no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* 인쇄된 사진 */
.qr-pics { display: grid; gap: 6px; margin: 10px 0 4px; }
.qr-pics.n2, .qr-pics.n3, .qr-pics.n4 { grid-template-columns: 1fr 1fr; }
.qr-pics.n3 .qr-pic:first-child { grid-column: 1 / -1; }
.qr-pic { margin: 0; line-height: 0; overflow: hidden; }
.qr-pic canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.qr-pic.is-printed { background: transparent; }
/* 점으로 바뀌기 전 · 바꿀 수 없는 외부 이미지는 흑백으로 */
.qr-src { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.35) brightness(1.05); mix-blend-mode: multiply; }
.qr-src.is-done { display: none; }
.qr-pic.is-ext { position: relative; }
.qr-pic.is-ext::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle, transparent 45%, var(--qr-paper) 46%) 0 0 / 3px 3px;
    opacity: .55;
}

/* 비어 있을 때 · 전체 선택 · 체크박스 */
.qr-empty { text-align: center; padding: 60px 0; opacity: .7; }
.qr-allchk { margin: 6px 0 0; font-size: .9em; }
.qr-chk { position: absolute; top: -6px; left: -6px; z-index: 5; background: var(--qr-paper); border-radius: 4px; padding: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }

/* ── 배경 바꾸기 창 ── */
.qr-bgpanel {
    position: relative; z-index: 20; max-width: 360px; margin: 10px 0 0 auto; padding: 14px 16px;
    background: #fff; color: #333; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12); font-size: 13px;
}
.qr-bgpanel[hidden] { display: none; }
.qr-bgpanel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.qr-bg-close { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; }
.qr-bgpanel-now { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qr-bg-thumb { width: 54px; height: 36px; border-radius: 6px; background: #eee center / cover; border: 1px solid rgba(0, 0, 0, .08); flex: none; }
.qr-bg-thumb.is-empty { background: repeating-linear-gradient(45deg, #f3f3f3 0 6px, #e6e6e6 6px 12px); }
.qr-bgpanel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0; }
.qr-bgpanel-row > span { width: 56px; flex: none; font-weight: 600; }
.qr-bgpanel-row input[type="file"] { max-width: 230px; font-size: 12px; }
.qr-bgpanel-msg { min-height: 1.2em; margin: 6px 0 0; font-size: 12px; color: #c4566e; }
.qr-bgpanel-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.qr-bgpanel-btns button { padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .15); background: #fff; cursor: pointer; }
.qr-bgpanel-btns .qr-bg-save { background: #2e2a26; color: #fff; border-color: #2e2a26; }
.qr-bgpanel-btns button:disabled { opacity: .5; cursor: default; }

/* ── 글보기 ── */
.qr-view-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.qr-view-bar #bo_v_top { position: relative; }
.qr-view-stage { padding: 18px 0 10px; }
.qr-item-big { width: min(380px, 100%); margin: 0 auto; }
.qr-item-big:hover { transform: rotate(var(--rot, 0deg)); }
.qr-item-big .qr-paper { padding: 36px 24px 50px; font-size: 13px; cursor: pointer; }
.qr-item-big .qr-shop { font-size: 18px; }
.qr-item-big .qr-quote { font-size: 15px; }
.qr-item-big .qr-memo { font-size: 12px; }
/* 프린터에서 막 나온 것처럼 위에서부터 나타나기 */
@keyframes qr-print-in {
    from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); }
    to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}
.qr-view .qr-card { animation: qr-print-in 1.1s steps(22, end) both; }
@media (prefers-reduced-motion: reduce) { .qr-view .qr-card { animation: none; } }
.qr-sign { text-align: center; }
.qr-view #bo_v_act { margin-top: 26px; }

/* ── 글쓰기 ── */
.qr-w-help { font-size: 12px; line-height: 1.7; padding: 10px 12px; border-radius: 8px; background: rgba(242, 238, 228, .75); color: #4a4540; }
.qr-w-help code { font-family: "QR Galmuri", monospace; background: var(--qr-hl); padding: 0 4px; border-radius: 3px; }

/* ── 화면 크기별 ── */
@media (max-width: 900px) {
    .qr-wall[data-cols="4"], .qr-wall[data-cols="5"], .qr-wall[data-cols="6"] { --qr-cols: 3; }
}
@media (max-width: 768px) {
    .qr-wall:not([data-cols="1"]) { --qr-cols: 2; }
    .qr-board { --qr-gap-x: 16px; --qr-gap-y: 30px; }
    .qr-paper { padding: 26px 13px 42px; font-size: 11px; }
    .qr-shop { font-size: 13px; }
    .qr-quote { font-size: 11.5px; }
    .qr-board.has-bg { padding: 16px 10px 22px; border-radius: 10px; }
}
@media (max-width: 420px) {
    .qr-wall { --qr-cols: 1 !important; }
    .qr-board { --qr-card-max: 300px; }
}

/* ── 배경 이미지 위에서도 글자가 잘 보이도록 (배경 쓸 때만) ── */
.qr-board.has-bg #bo_list_total,
.qr-board.has-bg .qr-allchk,
.qr-board.has-bg .pg_wrap,
.qr-board.has-bg .qr-empty,
.qr-view.has-bg #bo_v_file,
.qr-view.has-bg #bo_v_link,
.qr-write.has-bg #fwrite {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border-radius: 12px; padding: 10px 14px; box-sizing: border-box;
}
.qr-board.has-bg .qr-allchk,
.qr-board.has-bg #bo_list_total { display: inline-block; padding: 5px 12px; border-radius: 20px; }
.qr-board.has-bg .pg_wrap { display: table; margin: 10px auto 0; padding: 6px 14px; }
.qr-write.has-bg #fwrite { padding: 18px; }

/* ── 목록 맨 위 제목 + 기능 버튼 ── */
.qr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding: 6px 4px 4px; }
.qr-head-title { min-width: 0; flex: 1 1 auto; }
.qr-title {
    margin: 0; padding: 0;
    font-family: "QR Archivo", "Arial Black", sans-serif; font-weight: 400;
    font-size: clamp(30px, 5.2vw, 62px); line-height: 1.05; letter-spacing: .04em;
    color: transparent; -webkit-text-stroke: 1.6px var(--qr-head-ink);
    filter: drop-shadow(0 0 7px var(--qr-head-glow));
    word-break: keep-all; overflow-wrap: anywhere;
}
.qr-title > span { display: inline; }
.qr-ch { display: inline; }
.qr-title .qr-caret { width: .42em; height: .78em; vertical-align: -.02em; background: var(--qr-head-ink); }
.qr-sub {
    margin: 12px 0 0; font-family: "QR Galmuri", monospace; font-size: 12px; line-height: 1.7;
    color: var(--qr-head-ink); text-shadow: 0 0 6px var(--qr-head-glow), 0 0 2px var(--qr-head-glow);
    word-break: keep-all;
}
.qr-sub > span { display: block; min-height: 1.7em; }
.qr-sub-en { letter-spacing: .5px; font-style: italic; }
/* 타이핑 커서 */
.qr-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: qr-blink 1s steps(1) infinite; }
@keyframes qr-blink { 50% { opacity: 0; } }
.qr-typing [data-qr-type] .qr-ch { visibility: hidden; }
.qr-typing [data-qr-type] .qr-ch.on { visibility: visible; }

/* 동그란 아이콘 버튼 */
.qr-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-top: 6px; }
.qr-btn {
    position: relative; width: 36px; height: 36px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer; text-decoration: none !important;
    color: var(--qr-btn-fg) !important;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    transition: transform .18s ease, background .18s ease;
}
.qr-btn:hover, .qr-btn:focus-visible { transform: translateY(-2px); background: rgba(255, 255, 255, .8); }
.qr-btn.is-main { background: var(--qr-btn-main-bg); border-color: var(--qr-btn-main-bg); color: var(--qr-btn-main-fg) !important; }
.qr-btn.is-main:hover { background: var(--qr-btn-main-bg); filter: brightness(1.08); }
.qr-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* 마우스를 올리면 뜨는 이름표 */
.qr-btn[data-tip]::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 30;
    transform: translate(-50%, -3px); opacity: 0; pointer-events: none; white-space: nowrap;
    font: 11px/1 "QR Galmuri", monospace; padding: 5px 8px; border-radius: 6px;
    color: var(--qr-btn-main-fg); background: var(--qr-btn-main-bg);
    transition: opacity .15s ease, transform .15s ease;
}
.qr-btn[data-tip]:hover::after, .qr-btn[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* 검색: 돋보기를 누르면 옆으로 칸이 펼쳐져요 */
.qr-search { display: flex; align-items: center; gap: 0; }
.qr-search input[type="text"] {
    width: 0; padding: 0; margin: 0; border: 0; opacity: 0; height: 36px; box-sizing: border-box;
    border-radius: 18px; background: rgba(255, 255, 255, .7); color: var(--qr-head-ink);
    font: 12px "QR Galmuri", monospace; outline: 0;
    transition: width .25s ease, opacity .2s ease, padding .25s ease, margin .25s ease;
}
.qr-search.is-open input[type="text"] { width: 170px; padding: 0 14px; margin-right: 6px; opacity: 1; border: 1px solid rgba(255, 255, 255, .9); }
.qr-more { position: relative; }
.qr-more .more_opt { top: 44px; right: 0; }
.qr-board #bo_cate { margin-top: 14px; }
@media (max-width: 768px) {
    .qr-head { flex-direction: column; gap: 12px; }
    .qr-tools { margin-left: 0; flex-wrap: wrap; }
    .qr-search.is-open input[type="text"] { width: 140px; }
    .qr-btn[data-tip]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qr-caret { animation: none; } }

/* ── 글보기: 하얀 상자 없이 영수증만 ── */
#bo_v.qr-view, .view_article.qr-view {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
    overflow: visible !important; border-radius: 0;
}
.qr-view.has-bg { border-radius: 14px; }
.qr-view .qr-view-bar { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 4px; }
.qr-view .qr-view-stage { padding: 30px 0 6px; }

/* 문구 복사 · 이미지로 저장 */
.qr-actions { position: relative; display: flex; justify-content: center; gap: 10px; margin: 26px 0 0; flex-wrap: wrap; }
.qr-act {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; cursor: pointer;
    font: 12px/1 "QR Galmuri", monospace; color: var(--qr-btn-fg);
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: transform .18s ease, background .18s ease;
}
.qr-act:hover, .qr-act:focus-visible { transform: translateY(-2px); background: rgba(255, 255, 255, .85); }
.qr-act:disabled { opacity: .55; cursor: default; transform: none; }
.qr-toast {
    position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -4px);
    font: 11px/1 "QR Galmuri", monospace; padding: 6px 10px; border-radius: 6px; white-space: nowrap;
    color: var(--qr-btn-main-fg); background: var(--qr-btn-main-bg);
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.qr-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 이전 · 목록 · 다음 (상자 없이 글자 + 화살표) */
.qr-nav {
    display: flex; justify-content: center; align-items: center; gap: 14px;
    margin: 46px 0 10px; font: 13px/1 "QR Galmuri", monospace; letter-spacing: 1px;
    color: var(--qr-head-ink); text-shadow: 0 0 6px var(--qr-head-glow), 0 0 2px var(--qr-head-glow);
}
.qr-nav a { color: inherit !important; text-decoration: none !important; padding: 6px 2px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.qr-nav a:hover, .qr-nav a:focus-visible { border-bottom-color: currentColor; }
.qr-nav .is-off { opacity: .35; }
.qr-nav-dot { opacity: .6; }

/* 이미지로 저장하는 동안 잠깐 또렷하게 */
.qr-capturing .qr-print { --fade: 1 !important; }