@charset "UTF-8";

/* --- 全体の質感：クラフト紙 --- */
body {
    background-color: #F0EBE0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    margin: 0; padding: 0; height: 100vh;
}

/* 地図 */
#map {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%; z-index: 0;
}

/* --- 【新デザイン】コンパクトなラベル型ヘッダー --- */
.torn-paper-header {
    width: 100%;
    background-color: #FAF7F2; 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    
    /* 余白を最小限に (上4px, 下12px) */
    padding: 4px 0 12px 0;
    
    text-align: center;
    position: relative;
    
    /* 上の角を丸くする（ラベルっぽく） */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    
    /* 下側だけ破れた加工 */
    clip-path: polygon(
        0% 0%, 100% 0%, 
        100% 92%, 
        98% 88%, 95% 93%, 92% 87%, 89% 92%, 86% 88%, 
        83% 93%, 80% 87%, 77% 92%, 74% 88%, 71% 93%, 
        68% 87%, 65% 92%, 62% 88%, 59% 93%, 56% 87%, 
        53% 92%, 50% 88%, 47% 92%, 44% 87%, 41% 92%, 
        38% 88%, 35% 92%, 32% 87%, 29% 92%, 26% 88%, 
        23% 92%, 20% 87%, 17% 92%, 14% 88%, 11% 92%, 
        8% 87%, 5% 92%, 2% 88%, 
        0% 92%
    );
}

/* ステッチ（縫い目）も幅に合わせて調整 */
.torn-paper-header::before {
    content: '';
    position: absolute;
    top: 4px; 
    left: 8px; right: 8px;
    height: 0;
    border-top: 2px dashed #8D6E63;
    opacity: 0.5;
}

/* ヘッダーの影（全体ではなくラベルだけに落ちるように） */
.header-shadow-wrapper {
    filter: drop-shadow(0px 3px 3px rgba(62, 39, 35, 0.25));
    width: 100%;
    position: relative;
    z-index: 20;
}

/* --- 以下、既存スタイル（変更なし） --- */
.wood-scroll-container {
    padding-right: 48px; 
    overflow-x: auto;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(141, 110, 99, 0.6) transparent;
}
.wood-tag {
    flex: 0 0 auto;
    background-color: #C69C6D; 
    color: #FFF;
    padding: 8px 16px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 3px solid #8D6E63;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-right: 4px;
    transition: all 0.2s;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
}
.wood-tag.active {
    background-color: #5D4037;
    border-bottom: 1px solid #3E2723;
    transform: translateY(2px);
    color: #FFECB3;
}

.paper-scroll-container {
    padding-right: 48px; padding-left: 4px; padding-bottom: 8px;
    overflow-x: auto; cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 85, 50, 0.4) transparent;
}
.paper-tag {
    padding: 6px 14px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: bold;
    background-color: #FFF;
    color: #5D4037;
    border: 1px solid #D7CCC8;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
    white-space: nowrap;
    transition: all 0.2s;
    position: relative;
    padding-left: 24px;
}
.paper-tag::before {
    content: '';
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; background-color: #EFEBE9;
    border-radius: 50%; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
}
.paper-tag.active {
    background-color: #FF7043;
    color: #FFF;
    border-color: #D84315;
    transform: rotate(-2deg);
}

#info-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    background-color: #F0EBE0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.3);
    height: 60vh;
    display: flex; flex-direction: column;
    pointer-events: auto;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(110%);
    z-index: 1000;
    border: 1px solid #D7CCC8;
}
#info-panel.show { transform: translateY(0); }

.tape-handle-container {
    width: 100%; height: 40px;
    position: relative;
    display: flex; justify-content: center;
    cursor: pointer;
    z-index: 10;
}
.masking-tape {
    background-color: rgba(255, 235, 59, 0.7);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px);
    width: 120px; height: 28px;
    margin-top: -14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: bold; color: rgba(0,0,0,0.5); letter-spacing: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transform: rotate(-1deg);
    clip-path: polygon(2% 0, 98% 0, 100% 100%, 0% 100%);
}

.content-area { flex: 1; overflow-y: auto; padding: 20px 24px; }
.action-area { 
    padding: 16px; 
    background-color: #8D6E63;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

.photo-scroll-container {
    display: flex; gap: 16px; overflow-x: auto;
    padding: 8px 8px 24px 8px; margin-bottom: 8px;
    scrollbar-width: thin; scrollbar-color: #8D6E63 transparent;
}
.photo-card {
    flex: 0 0 auto; width: 180px; height: 160px;
    background-color: #FFF;
    padding: 8px 8px 30px 8px;
    box-shadow: 2px 4px 8px rgba(0,0,0,0.15);
    transform: rotate(0deg);
}
.photo-card img {
    width: 100%; height: 100%; object-fit: cover;
    filter: sepia(0.2);
}
.photo-card:nth-child(odd) { transform: rotate(-2deg); }
.photo-card:nth-child(even) { transform: rotate(2deg); z-index: 1; }

.dashed-line {
    border-bottom: 2px dashed #BCAAA4;
    margin-bottom: 16px;
}
.memo-area {
    background-color: #FFF;
    padding: 16px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
    transform: rotate(0.5deg);
    font-family: "Yomogi", cursive;
    font-size: 15px;
    color: #4E342E;
    line-height: 1.8;
}
.stamp-badge {
    display: inline-block;
    border: 2px solid #5D4037;
    color: #5D4037;
    padding: 2px 8px;
    font-family: "Yomogi", cursive;
    font-weight: bold;
    border-radius: 4px;
    transform: rotate(-3deg);
    opacity: 0.8;
}

.custom-pin:hover { transform: scale(1.15) translateY(-5px); transition: transform 0.2s; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* --- 地図上の店名ラベル --- */
.shop-name-label {
    background-color: rgba(255, 255, 255, 0.85); /* 少し透けた白 */
    border: 1px solid #8D6E63;
    border-radius: 4px;
    color: #3E2723;
    font-family: "Yomogi", cursive; /* 手書きフォント */
    font-weight: bold;
    font-size: 11px; /* 邪魔にならないサイズ */
    padding: 0px 4px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    white-space: nowrap; /* 勝手に改行させない */
    margin-top: 0;
}

/* Leaflet標準の余計な矢印などを消す */
.leaflet-tooltip-bottom:before {
    display: none;
}