/*
 * style.css — たびよてい（完全最終版・全機能搭載）
 */

/* ===== 基本設定と変数 ===== */
:root {
  --font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --font-display: 'Playfair Display', serif;
  --color-text: #333; --color-text-light: #667;
  --color-primary: #005f73; --color-primary-light: #0a9396;
  --color-accent: #ee9b00; --color-accent-hover: #ca6702;
  --color-bg: #f8f9fa; --color-bg-white: #ffffff;
  --color-border: #dee2e6; --color-white: #ffffff;
  --color-error: #d90429; --color-success: #2a9d8f;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --shadow-md: 0 5px 15px rgba(0,0,0,0.08);
  --shadow-lg: 0 15px 35px rgba(0,0,0,0.1); --radius-sm: 8px;
  --radius-md: 12px; --radius-lg: 16px; --transition-speed: 0.3s;
}

/* ===== グローバルスタイル ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.page-container, .trip-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/*
 * =========================================
 * Section 1: Landing Page (index.php) Styles
 * =========================================
 */
.landing-page .main-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.8);backdrop-filter:blur(12px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.05);transition:box-shadow var(--transition-speed) ease}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:15px 20px;height:80px}.logo{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--color-primary);text-decoration:none}.main-nav{display:flex;align-items:center;gap:12px}.nav-link{color:var(--color-text);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:var(--radius-sm);transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease}.nav-link:hover{background-color:rgba(0,95,115,.05);color:var(--color-primary)}.hero-section{position:relative;background-size:cover;background-position:center center;text-align:center;padding:140px 20px;min-height:85vh;display:flex;align-items:center;justify-content:center}.hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.5) 100%);z-index:1}.hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}.hero-title{font-family:var(--font-display);font-size:clamp(2.8rem,8vw,4.5rem);font-weight:700;line-height:1.25;margin:0 0 20px;color:var(--color-white);text-shadow:0 4px 20px rgba(0,0,0,.5)}.hero-subtitle{font-size:clamp(1.1rem,3vw,1.25rem);color:var(--color-white);max-width:600px;margin:0 auto 40px;line-height:1.8;text-shadow:0 2px 10px rgba(0,0,0,.6)}.hero-cta{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.input{width:100%;padding:12px 16px;font-size:1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-bg-white);color:var(--color-text);transition:border-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.input:focus{outline:none;border-color:var(--color-primary-light);box-shadow:0 0 0 3px rgba(10,147,150,.2)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--radius-sm);border:2px solid transparent;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;transition:all var(--transition-speed) ease;background-color:var(--color-accent);color:var(--color-bg-white)}.btn.large{padding:16px 32px;font-size:1.1rem;border-radius:50px}.btn.small{padding:8px 16px;font-size:.9rem}.btn:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.1)}.btn.secondary{background-color:transparent;color:var(--color-white);border-color:var(--color-white)}.btn.secondary:hover{background-color:var(--color-white);color:var(--color-primary)}.btn.full-width{width:100%}
.landing-page .content-section{padding:80px 0}.landing-page .section-title{text-align:center;font-size:2.5rem;font-family:var(--font-display);margin:0 0 20px;color:var(--color-primary)}.landing-page .section-description{text-align:center;font-size:1.1rem;color:var(--color-text-light);max-width:600px;margin:0 auto 50px;line-height:1.6}
.itinerary-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}.itinerary-card{background:var(--color-bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.itinerary-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.card-content{padding:25px}.card-header{display:flex;align-items:center;gap:15px;margin-bottom:15px}.card-icon{font-size:24px;background-color:var(--color-bg);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}.card-title{margin:0;font-size:1.25rem;font-weight:700}.card-meta{color:var(--color-text-light);margin:0 0 20px;font-size:.9rem}.card-form .form-group{display:flex;gap:10px}.card-form .input{flex-grow:1;background-color:var(--color-bg)}.login-card{background-color:var(--color-bg-white);padding:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:500px;margin:0 auto}.login-card .section-title{font-size:2rem}.field-group{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.field label{display:block;font-weight:700;margin-bottom:8px;font-size:.9rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;text-align:center}.feature-item{background:var(--color-bg-white);padding:40px 30px;border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.feature-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.feature-icon{font-size:3rem;margin-bottom:20px}.feature-title{font-size:1.5rem;margin:0 0 15px;font-family:var(--font-body);font-weight:700}.feature-text{color:var(--color-text-light);line-height:1.7;margin:0}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:50px;position:relative}.steps-grid::before{content:'';position:absolute;top:30px;left:5%;right:5%;height:2px;background:var(--color-border);z-index:-1}.step-item{background:var(--color-bg-white);padding:30px;border:1px solid var(--color-border);border-radius:var(--radius-md)}.step-number{width:60px;height:60px;border-radius:50%;background:var(--color-primary);color:var(--color-white);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;font-family:var(--font-display);margin-bottom:25px}.step-title{font-size:1.3rem;margin:0 0 15px}.step-text{color:var(--color-text-light);line-height:1.6;margin:0}
.login-card .btn,.card-form .btn{background-color:var(--color-primary);color:var(--color-white)}.login-card .btn:hover,.card-form .btn:hover{background-color:var(--color-primary-light)}.empty-state{text-align:center;padding:40px 20px;background:var(--color-bg-white);border-radius:var(--radius-lg);border:1px dashed var(--color-border);color:var(--color-text-light)}
.mobile-nav-toggle{display:none}.mobile-nav-menu{display:none}
footer.main-footer-bottom{background:var(--color-bg);padding:30px 20px;text-align:center;color:var(--color-text-light);font-size:.9rem;border-top:1px solid var(--color-border)}
@media (max-width:768px){html{scroll-padding-top:60px}.landing-page .main-header{box-shadow:var(--shadow-sm)}.header-content{height:60px;padding:10px 15px}.main-nav{display:none}.mobile-nav-toggle{display:flex;flex-direction:column;justify-content:space-around;width:24px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}.mobile-nav-toggle span{width:24px;height:3px;background:var(--color-primary);border-radius:2px;transition:all var(--transition-speed) ease}body.mobile-nav-active .mobile-nav-toggle span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}body.mobile-nav-active .mobile-nav-toggle span:nth-child(2){opacity:0}body.mobile-nav-active .mobile-nav-toggle span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}.mobile-nav-menu{display:flex;flex-direction:column;align-items:center;position:fixed;top:60px;left:0;right:0;bottom:0;background:var(--color-bg-white);padding-top:40px;transform:translateX(100%);transition:transform var(--transition-speed) ease-in-out;z-index:999}body.mobile-nav-active .mobile-nav-menu{transform:translateX(0)}.mobile-nav-link{font-size:1.5rem;font-weight:700;color:var(--color-primary);text-decoration:none;padding:20px 0;width:100%;text-align:center}.mobile-nav-link.primary{background:var(--color-accent);color:var(--color-white);margin-top:20px}.steps-grid::before{display:none}}

/*
 * ======================================================
 * Section 2: Trip Page, Form Page & Modal Styles
 * ======================================================
 */
.form-page-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background-color: var(--color-bg); }
.form-card { background: var(--color-bg-white); width: 100%; max-width: 480px; padding: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.form-title { text-align: center; font-family: var(--font-display); font-size: 2.2rem; color: var(--color-primary); margin: 0 0 10px; }
.form-description { text-align: center; color: var(--color-text-light); line-height: 1.6; margin: 0 auto 30px; }
.form-actions { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; }
.form-page-container .btn.secondary { background: var(--color-bg); color: var(--color-text); border: 2px solid var(--color-border); }
.form-page-container .btn.secondary:hover { background: var(--color-border); color: var(--color-primary); border-color: var(--color-border); }
.form-page-container .btn.large { border-radius: var(--radius-sm); }
.trip-header { background: var(--color-bg-white); padding: 30px 20px; border-bottom: 1px solid var(--color-border); text-align: center; }
.trip-header h1 { margin: 0; font-family: var(--font-display); font-size: 2.8rem; color: var(--color-primary); }
.trip-header .btn { margin-top: 15px; }
.trip-container { padding-top: 30px; padding-bottom: 30px; }
.trip-meta-card { background: var(--color-bg-white); padding: 20px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 30px; }
.trip-meta-card .meta-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.trip-meta-card .readonly-badge { background-color: var(--color-accent); color: var(--color-white); padding: 4px 10px; border-radius: 50px; font-size: .8rem; font-weight: 700; }
.trip-meta-card .readonly-url-box { margin-top: 15px; padding: 10px; background: var(--color-bg); border-radius: var(--radius-sm); font-size: .85rem; color: var(--color-text-light); word-break: break-all; }
.trip-meta-card code { background: var(--color-bg); border: 1px solid var(--color-border); padding: .2em .6em; border-radius: var(--radius-sm); font-size: 0.9em; color: var(--color-primary); }
.trip-page .btn.secondary { background-color: var(--color-bg-white); color: var(--color-primary); border-color: var(--color-border); }
.trip-page .btn.secondary:hover { border-color: var(--color-primary); background: rgba(0, 95, 115, 0.05); }
.alert { padding: 15px 20px; border-radius: var(--radius-md); margin: 20px 0; border: 1px solid; font-weight: 700; }
.alert.error { border-color: var(--color-error); background: rgba(217, 4, 41, 0.1); color: #ad0320; }
.alert.info { border-color: var(--color-success); background: rgba(42, 157, 143, 0.1); color: #216e65; }
.section-title-small { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-primary); margin: 0 0 15px; }
.topic-form { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; background: var(--color-bg-white); padding: 20px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.topic-form .inputs-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; }
.topic-form .input { height: 46px; } .topic-form textarea.input { height: 46px; resize: none; padding-top: 12px; }
.topic-form .btn { align-self: flex-start; background-color: var(--color-primary); border-radius: var(--radius-sm); }
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.topic-card { position: relative; background: var(--color-bg-white); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--color-border); transition: box-shadow .2s ease; }
.topic-card:hover { box-shadow: var(--shadow-md); }
.topic-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.topic-card .title { font-weight: 700; color: var(--color-primary); margin-bottom: 8px; flex-grow: 1; }
.topic-card .content { font-size: 0.95rem; color: var(--color-text-light); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.topic-controls { display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; }
.topic-card:hover .topic-controls { opacity: 1; }
.day-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; border-bottom: 1px solid var(--color-border); padding-bottom: 15px; }
.day-tab { padding: 10px 20px; border-radius: 50px; font-weight: 700; text-decoration: none; background: transparent; color: var(--color-text-light); border: 1px solid transparent; transition: all var(--transition-speed) ease; }
.day-tab:hover { color: var(--color-primary); }
.day-tab.active { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.trip-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 992px) { .trip-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr); } }
.day-item { background: var(--color-bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 25px; overflow: hidden; }
.day-item-hero { width: 100%; height: 200px; object-fit: cover; }
.day-item-content { padding: 20px; }
.day-item-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.day-item-time { font-size: 1.2rem; font-weight: 700; color: var(--color-primary); flex-grow: 1; }
.day-item-controls { display: flex; align-items: center; gap: 5px; }
.day-item-type { font-size: 0.9rem; font-weight: 700; margin-right: 10px; }
.control-btn { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 5px; border-radius: 50%; width: 32px; height: 32px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; color: var(--color-text-light); }
.control-btn:hover { background-color: rgba(0,0,0,0.1); color: var(--color-text); }
.delete-form { margin: 0; }
.day-item-body { padding-top: 15px; }
.day-item-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 15px; }
.day-item-map { margin-bottom: 15px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.static-map-image { display: block; width: 100%; height: auto; }
.weather-forecast { margin-bottom: 15px; }
.weather-info { display: flex; align-items: center; gap: 10px; background: var(--color-bg); padding: 10px; border-radius: var(--radius-md); font-size: 0.9rem; }
.weather-icon { width: 40px; height: 40px; }
.weather-temp { font-weight: 700; font-size: 1.1rem; }
.weather-temp-min { color: var(--color-text-light); }
.weather-desc { color: var(--color-text-light); }
.weather-info.muted { color: var(--color-text-light); }
.weather-info.error { color: var(--color-error); }
.day-item-description { color: var(--color-text-light); line-height: 1.7; margin-bottom: 15px; }
.day-item-meta-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9rem; }
.day-item-meta-table td { padding: 10px; border-bottom: 1px solid var(--color-border); word-break: break-word; }
.day-item-meta-table tr:last-child td { border-bottom: none; }
.day-item-meta-table td:first-child { font-weight: 700; color: var(--color-text-light); width: 120px; }
.attachments-grid { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px; }
.attachment-thumb { max-width: 150px; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.attachment-thumb:hover { transform: scale(1.05); }
.attachment-file { background-color: var(--color-bg) !important; color: var(--color-primary) !important; border-color: var(--color-border) !important; }
.form-column .sticky { position: sticky; top: 100px; }
#itemForm .form-card, .modal-content { background: var(--color-bg-white); padding: 25px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
#itemForm .form-title, .modal-content .form-title { font-family: var(--font-display); font-size: 1.8rem; margin: 0 0 20px; color: var(--color-primary); text-align: center; }
.form .field { margin-bottom: 15px; }
#itemForm .field-group, .modal-content .field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--color-text-light); margin-bottom: 6px; }
#itemForm .input, .modal-content .input { height: 46px; } .input[type="file"] { padding: 8px; height: auto; }
#itemForm textarea.input, .modal-content textarea.input { height: auto; min-height: 90px; padding: 12px 16px; }
#itemForm .btn, .modal-content .btn { background: var(--color-primary); border-radius: var(--radius-sm); }
#itemForm .btn:hover, .modal-content .btn:hover { background: var(--color-primary-light); }
.optional-fields { border-left: 3px solid var(--color-border); padding-left: 15px; margin: 20px 0; }
.optional-fields .opt { display: none; }
#edit-hero-image-preview { margin-bottom: 15px; }
.hero-preview-image { max-width: 200px; height: auto; border-radius: var(--radius-sm); display: block; margin-bottom: 5px; }
#edit-hero-image-preview label { font-size: 0.9rem; color: var(--color-error); display: flex; align-items: center; gap: 5px; }
#edit-attachments-list { margin-bottom: 15px; }
#edit-attachments-list > label { font-weight: 700; color: var(--color-text-light); display: block; margin-bottom: 10px; }
.attachment-edit-item { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin-bottom: 5px; }
.attachment-edit-item input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }
.attachment-edit-item label { margin: 0; color: var(--color-error); font-weight: normal; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
.modal-content { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.modal-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2rem; color: var(--color-text-light); cursor: pointer; line-height: 1; }
.modal-content .btn { border-radius: var(--radius-sm); }
body.readonly-mode .topic-form, body.readonly-mode .form-column, body.readonly-mode #edit-settings-btn, body.readonly-mode .day-item-controls, body.readonly-mode .topic-controls { display: none !important; }
body.readonly-mode .trip-grid { grid-template-columns: 1fr; }
@media (max-width: 991px) { .form-column .sticky { position: static; } }
@media (max-width: 768px) {
  .trip-header h1 { font-size: 2.2rem; }
  .topic-form .inputs-grid, #itemForm .field-group, .modal-content .field-group { grid-template-columns: 1fr; }
}